diff --git a/resources/images/icons/add_reaction20@2x.png b/resources/images/icons/add_reaction20@2x.png new file mode 100644 index 0000000000..703e7c07f6 Binary files /dev/null and b/resources/images/icons/add_reaction20@2x.png differ diff --git a/resources/images/icons/add_reaction20@3x.png b/resources/images/icons/add_reaction20@3x.png new file mode 100644 index 0000000000..627d4d3dc1 Binary files /dev/null and b/resources/images/icons/add_reaction20@3x.png differ diff --git a/resources/images/icons/angry16@2x.png b/resources/images/icons/angry16@2x.png new file mode 100644 index 0000000000..b8a65b3332 Binary files /dev/null and b/resources/images/icons/angry16@2x.png differ diff --git a/resources/images/icons/angry16@3x.png b/resources/images/icons/angry16@3x.png new file mode 100644 index 0000000000..38b6c6c140 Binary files /dev/null and b/resources/images/icons/angry16@3x.png differ diff --git a/resources/images/icons/laugh16@2x.png b/resources/images/icons/laugh16@2x.png new file mode 100644 index 0000000000..647ccb0185 Binary files /dev/null and b/resources/images/icons/laugh16@2x.png differ diff --git a/resources/images/icons/laugh16@3x.png b/resources/images/icons/laugh16@3x.png new file mode 100644 index 0000000000..10a2456997 Binary files /dev/null and b/resources/images/icons/laugh16@3x.png differ diff --git a/resources/images/icons/love16@2x.png b/resources/images/icons/love16@2x.png new file mode 100644 index 0000000000..5dfc4f6273 Binary files /dev/null and b/resources/images/icons/love16@2x.png differ diff --git a/resources/images/icons/love16@3x.png b/resources/images/icons/love16@3x.png new file mode 100644 index 0000000000..27060d87ac Binary files /dev/null and b/resources/images/icons/love16@3x.png differ diff --git a/resources/images/icons/sad16@2x.png b/resources/images/icons/sad16@2x.png new file mode 100644 index 0000000000..80555d2857 Binary files /dev/null and b/resources/images/icons/sad16@2x.png differ diff --git a/resources/images/icons/sad16@3x.png b/resources/images/icons/sad16@3x.png new file mode 100644 index 0000000000..186c36fe33 Binary files /dev/null and b/resources/images/icons/sad16@3x.png differ diff --git a/resources/images/icons/thumbs_down16@2x.png b/resources/images/icons/thumbs_down16@2x.png new file mode 100644 index 0000000000..7b6aa3a9f8 Binary files /dev/null and b/resources/images/icons/thumbs_down16@2x.png differ diff --git a/resources/images/icons/thumbs_down16@3x.png b/resources/images/icons/thumbs_down16@3x.png new file mode 100644 index 0000000000..9f6b91e215 Binary files /dev/null and b/resources/images/icons/thumbs_down16@3x.png differ diff --git a/resources/images/icons/thumbs_up16@2x.png b/resources/images/icons/thumbs_up16@2x.png new file mode 100644 index 0000000000..aaa407978c Binary files /dev/null and b/resources/images/icons/thumbs_up16@2x.png differ diff --git a/resources/images/icons/thumbs_up16@3x.png b/resources/images/icons/thumbs_up16@3x.png new file mode 100644 index 0000000000..a414868c45 Binary files /dev/null and b/resources/images/icons/thumbs_up16@3x.png differ diff --git a/src/quo2/components/reacts.cljs b/src/quo2/components/reacts.cljs new file mode 100644 index 0000000000..0ee6031ce9 --- /dev/null +++ b/src/quo2/components/reacts.cljs @@ -0,0 +1,65 @@ +(ns quo2.components.reacts + (:require [quo2.components.text :as quo2-text] + [quo.react-native :as rn] + [quo.theme :as theme] + [quo2.foundations.colors :as colors] + [status-im.ui.components.icons.icons :as icons])) + +(def reaction-styling + {:flex-direction :row + :justify-content :center + :align-items :center + :padding-vertical 3 + :padding-horizontal 8 + :border-radius 8}) + +(defn open-reactions-menu + [{:keys [on-press]}] + (let [dark? (theme/dark?)] + [rn/touchable-opacity {:on-press on-press + :style (merge reaction-styling + {:margin-top 25 + :border-width 1 + :border-color (if dark? + colors/white-opa-5 + colors/neutral-80)})} + [icons/icon :main-icons/add-reaction20 + {:color (if dark? + colors/white + colors/black)}]])) + +(defn render-react + "Add your emoji as a param here" + [{:keys [emoji clicks neutral? on-press]}] + (let [dark? (theme/dark?) + text-color (if dark? colors/white + colors/black) + numeric-value (int clicks) + clicks-positive? (pos? numeric-value)] + [rn/touchable-opacity {:on-press on-press + :style (merge reaction-styling + (cond-> {:background-color + (if dark? + (if neutral? + colors/neutral-70 + :transparent) + (if neutral? + colors/neutral-30 + :transparent))} + (and dark? (not neutral?)) (assoc :border-color colors/neutral-70 + :border-width 1) + (and (not dark?) (not neutral?)) (assoc :border-color colors/neutral-30 + :border-width 1)))} + [icons/icon emoji {:no-color true + :width 16 + :height 16}] + [quo2-text/text {:size :paragraph-2 + :weight :semi-bold + :color text-color + :flex-direction :row + :align-items :center + :justify-content :center} + (if clicks-positive? + (str " " numeric-value) + "")]])) + diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index bdf016aeee..0c2967efb6 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -24,6 +24,7 @@ [quo2.screens.token-tag :as token-tag] [quo2.screens.wallet-user-avatar :as wallet-user-avatar] [quo2.screens.user-avatar :as user-avatar] + [quo2.screens.reacts :as reacts] [re-frame.core :as re-frame])) (def screens [{:name :quo2-texts @@ -35,6 +36,9 @@ {:name :quo2-user-avatar :insets {:top false} :component user-avatar/preview-user-avatar} + {:name :quo2-reacts + :insets {:top false} + :component reacts/preview-reacts} {:name :quo2-button :insets {:top false} :component button/preview-button} diff --git a/src/quo2/screens/reacts.cljs b/src/quo2/screens/reacts.cljs new file mode 100644 index 0000000000..dd89f55d88 --- /dev/null +++ b/src/quo2/screens/reacts.cljs @@ -0,0 +1,45 @@ +(ns quo2.screens.reacts + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [quo2.components.reacts :as quo2] + [quo.design-system.colors :as colors])) + +(def descriptor [{:label "Count" + :key :clicks + :type :text} + {:label "Emoji" + :key :emoji + :type :select + :options [{:key :main-icons/love16 + :value "Love"} + {:key :main-icons/thumbs-up16 + :value "Thumbs Up"} + {:key :main-icons/thumbs-down16 + :value "Thumbs Down"} + {:key :main-icons/laugh16 + :value "Laugh"} + {:key :main-icons/sad16 + :value "Sad"}]} + {:label "Neutral" + :key :neutral? + :type :boolean}]) + +(defn cool-preview [] + (let [state (reagent/atom {:emoji :main-icons/love16})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/render-react @state] + [quo2/open-reactions-menu @state]]]))) + +(defn preview-reacts [] + [rn/view {:background-color (:ui-background @colors/theme) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])