diff --git a/resources/images/icons2/16x16/angry@2x.png b/resources/images/icons2/16x16/angry@2x.png deleted file mode 100644 index 66948efd8b..0000000000 Binary files a/resources/images/icons2/16x16/angry@2x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/angry@3x.png b/resources/images/icons2/16x16/angry@3x.png deleted file mode 100644 index 94ceada6be..0000000000 Binary files a/resources/images/icons2/16x16/angry@3x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/laugh@2x.png b/resources/images/icons2/16x16/laugh@2x.png deleted file mode 100644 index 19dbb1da06..0000000000 Binary files a/resources/images/icons2/16x16/laugh@2x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/laugh@3x.png b/resources/images/icons2/16x16/laugh@3x.png deleted file mode 100644 index a984eb0e16..0000000000 Binary files a/resources/images/icons2/16x16/laugh@3x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/love@2x.png b/resources/images/icons2/16x16/love@2x.png deleted file mode 100644 index afc3f44268..0000000000 Binary files a/resources/images/icons2/16x16/love@2x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/love@3x.png b/resources/images/icons2/16x16/love@3x.png deleted file mode 100644 index e60a63747a..0000000000 Binary files a/resources/images/icons2/16x16/love@3x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/thumbs-down@2x.png b/resources/images/icons2/16x16/thumbs-down@2x.png deleted file mode 100644 index d950265d02..0000000000 Binary files a/resources/images/icons2/16x16/thumbs-down@2x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/thumbs-down@3x.png b/resources/images/icons2/16x16/thumbs-down@3x.png deleted file mode 100644 index 8c09188dc0..0000000000 Binary files a/resources/images/icons2/16x16/thumbs-down@3x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/thumbs-up@2x.png b/resources/images/icons2/16x16/thumbs-up@2x.png deleted file mode 100644 index f1633baf78..0000000000 Binary files a/resources/images/icons2/16x16/thumbs-up@2x.png and /dev/null differ diff --git a/resources/images/icons2/16x16/thumbs-up@3x.png b/resources/images/icons2/16x16/thumbs-up@3x.png deleted file mode 100644 index 0f5f468398..0000000000 Binary files a/resources/images/icons2/16x16/thumbs-up@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/angry@2x.png b/resources/images/icons2/20x20/angry@2x.png deleted file mode 100644 index 2df9b95f36..0000000000 Binary files a/resources/images/icons2/20x20/angry@2x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/angry@3x.png b/resources/images/icons2/20x20/angry@3x.png deleted file mode 100644 index de3195b100..0000000000 Binary files a/resources/images/icons2/20x20/angry@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/laugh@2x.png b/resources/images/icons2/20x20/laugh@2x.png deleted file mode 100644 index e5c0fc9da1..0000000000 Binary files a/resources/images/icons2/20x20/laugh@2x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/laugh@3x.png b/resources/images/icons2/20x20/laugh@3x.png deleted file mode 100644 index 9d756099b3..0000000000 Binary files a/resources/images/icons2/20x20/laugh@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/love@2x.png b/resources/images/icons2/20x20/love@2x.png deleted file mode 100644 index fb59c32d1e..0000000000 Binary files a/resources/images/icons2/20x20/love@2x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/love@3x.png b/resources/images/icons2/20x20/love@3x.png deleted file mode 100644 index b3d2e9c35f..0000000000 Binary files a/resources/images/icons2/20x20/love@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/thumbs-down@2x.png b/resources/images/icons2/20x20/thumbs-down@2x.png deleted file mode 100644 index 4ee86b1b28..0000000000 Binary files a/resources/images/icons2/20x20/thumbs-down@2x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/thumbs-down@3x.png b/resources/images/icons2/20x20/thumbs-down@3x.png deleted file mode 100644 index 3a03c1787b..0000000000 Binary files a/resources/images/icons2/20x20/thumbs-down@3x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/thumbs-up@2x.png b/resources/images/icons2/20x20/thumbs-up@2x.png deleted file mode 100644 index 0863b22a6b..0000000000 Binary files a/resources/images/icons2/20x20/thumbs-up@2x.png and /dev/null differ diff --git a/resources/images/icons2/20x20/thumbs-up@3x.png b/resources/images/icons2/20x20/thumbs-up@3x.png deleted file mode 100644 index 1316510961..0000000000 Binary files a/resources/images/icons2/20x20/thumbs-up@3x.png and /dev/null differ diff --git a/src/quo2/components/reactions/reaction.cljs b/src/quo2/components/reactions/reaction.cljs index df3be50cfc..c716bbddc8 100644 --- a/src/quo2/components/reactions/reaction.cljs +++ b/src/quo2/components/reactions/reaction.cljs @@ -1,6 +1,7 @@ (ns quo2.components.reactions.reaction (:require [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] + [quo2.components.reactions.resource :as resource] [quo2.components.reactions.style :as style] [quo2.foundations.colors :as colors] [quo2.theme :as theme] @@ -28,9 +29,10 @@ :on-long-press on-long-press :accessibility-label accessibility-label :style (style/reaction neutral?)} - [icons/icon emoji - {:no-color true - :size 16}] + [rn/image + {:style {:width 16 :height 16} + :accessibility-label :emoji + :source (resource/get-reaction emoji)}] [text/text {:size :paragraph-2 :weight :semi-bold diff --git a/src/quo2/components/reactions/resource.clj b/src/quo2/components/reactions/resource.clj new file mode 100644 index 0000000000..06303e30e9 --- /dev/null +++ b/src/quo2/components/reactions/resource.clj @@ -0,0 +1,30 @@ +(ns quo2.components.reactions.resource + (:require [clojure.java.io :as io] + [clojure.string :as string])) + +(def ^:private reactions-dir "./resources/images/reactions/") + +(defn- resolve-reaction + [reaction] + (let [path (str reactions-dir (name reaction) ".png") + file (io/file path)] + (when (.exists file) + `(js/require ~(str "." path))))) + +(defn- find-all-image-base-names + [] + (let [dir (io/file reactions-dir)] + (->> dir + file-seq + (filter #(string/ends-with? % "png")) + (map #(.getName %)) + (map #(string/replace % #"\.png$" "")) + (map #(first (string/split % #"@"))) + distinct))) + +(defmacro resolve-all-reactions + [] + (reduce (fn [acc reaction] + (assoc acc reaction (resolve-reaction reaction))) + {} + (find-all-image-base-names))) diff --git a/src/quo2/components/reactions/resource.cljs b/src/quo2/components/reactions/resource.cljs new file mode 100644 index 0000000000..a9d394d438 --- /dev/null +++ b/src/quo2/components/reactions/resource.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.reactions.resource + (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]])) + +(def ^:private reactions + (resolve-all-reactions)) + +(defn get-reaction + [reaction] + (assert (keyword? reaction) "Reaction should be a keyword") + (assert (= "reaction" (namespace reaction)) + "Reaction keyword should be namespaced with :reaction") + (get reactions (name reaction))) diff --git a/src/quo2/components/selectors/reactions/component_spec.cljs b/src/quo2/components/selectors/reactions/component_spec.cljs new file mode 100644 index 0000000000..34dbf7cbf8 --- /dev/null +++ b/src/quo2/components/selectors/reactions/component_spec.cljs @@ -0,0 +1,23 @@ +(ns quo2.components.selectors.reactions.component-spec + (:require [quo2.components.selectors.reactions.view :as view] + [test-helpers.component :as h])) + +(h/describe "Selectors > Reactions" + (h/test "renders component" + (h/render [view/view :reaction/sad]) + (h/is-truthy (h/get-by-label-text :reaction))) + + (h/describe "on-press event" + (h/test "starts with released state" + (let [on-press (h/mock-fn)] + (h/render [view/view :reaction/love {:on-press on-press}]) + (h/fire-event :press (h/get-by-label-text :reaction)) + (h/was-called on-press))) + + (h/test "starts with pressed state" + (let [on-press (h/mock-fn)] + (h/render [view/view :reaction/love + {:on-press on-press + :start-pressed? true}]) + (h/fire-event :press (h/get-by-label-text :reaction)) + (h/was-called on-press))))) diff --git a/src/quo2/components/selectors/reactions/style.cljs b/src/quo2/components/selectors/reactions/style.cljs new file mode 100644 index 0000000000..913c809fc8 --- /dev/null +++ b/src/quo2/components/selectors/reactions/style.cljs @@ -0,0 +1,11 @@ +(ns quo2.components.selectors.reactions.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [pressed?] + {:padding 10 + :border-radius 12 + :border-width 1 + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) + :background-color (when pressed? + (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))}) diff --git a/src/quo2/components/selectors/reactions/view.cljs b/src/quo2/components/selectors/reactions/view.cljs new file mode 100644 index 0000000000..3a4c1fb170 --- /dev/null +++ b/src/quo2/components/selectors/reactions/view.cljs @@ -0,0 +1,25 @@ +(ns quo2.components.selectors.reactions.view + (:require [quo2.components.reactions.resource :as reactions.resource] + [quo2.components.selectors.reactions.style :as style] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(defn view + [_ {:keys [start-pressed?]}] + (let [pressed? (reagent/atom start-pressed?)] + (fn [emoji + {:keys [container-style on-press + accessibility-label] + :or {accessibility-label :reaction}}] + [rn/touchable-without-feedback + {:accessibility-label accessibility-label + :on-press (fn [e] + (swap! pressed? not) + (when on-press + (on-press e)))} + [rn/view + {:style (merge (style/container @pressed?) + container-style)} + [rn/image + {:source (reactions.resource/get-reaction emoji) + :style {:width 20 :height 20}}]]]))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 6fbf98dfd6..c6971c58e0 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -64,6 +64,7 @@ quo2.components.profile.profile-card.view quo2.components.profile.select-profile.view quo2.components.reactions.reaction + quo2.components.selectors.reactions.view quo2.components.record-audio.record-audio.view quo2.components.record-audio.soundtrack.view quo2.components.selectors.disclaimer.view @@ -110,6 +111,9 @@ (def skeleton quo2.components.loaders.skeleton/skeleton) (def author quo2.components.messages.author.view/author) +;;;; SELECTORS +(def reactions quo2.components.selectors.reactions.view/view) + ;;;; AVATAR (def account-avatar quo2.components.avatars.account-avatar/account-avatar) (def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 12adf0f318..5c5ac4dc52 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -14,13 +14,13 @@ [quo2.components.drawers.drawer-buttons.component-spec] [quo2.components.drawers.permission-context.component-spec] [quo2.components.inputs.input.component-spec] - [quo2.components.keycard.component-spec] [quo2.components.inputs.profile-input.component-spec] [quo2.components.inputs.recovery-phrase.component-spec] [quo2.components.inputs.title-input.component-spec] + [quo2.components.keycard.component-spec] + [quo2.components.links.link-preview.component-spec] [quo2.components.links.url-preview-list.component-spec] [quo2.components.links.url-preview.component-spec] - [quo2.components.links.link-preview.component-spec] [quo2.components.markdown.--tests--.text-component-spec] [quo2.components.notifications.notification.component-spec] [quo2.components.onboarding.small-option-card.component-spec] @@ -30,6 +30,7 @@ [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.selectors.disclaimer.component-spec] [quo2.components.selectors.filter.component-spec] + [quo2.components.selectors.reactions.component-spec] [quo2.components.selectors.selectors.component-spec] [quo2.components.share.share-qr-code.component-spec] [quo2.components.tags.--tests--.status-tags-component-spec])) diff --git a/src/status_im2/constants.cljs b/src/status_im2/constants.cljs index b855e56ee2..14cb2d377f 100644 --- a/src/status_im2/constants.cljs +++ b/src/status_im2/constants.cljs @@ -71,12 +71,12 @@ (def request-to-join-pending-state 1) (def reactions - {emoji-reaction-love :i/love - emoji-reaction-thumbs-up :i/thumbs-up - emoji-reaction-thumbs-down :i/thumbs-down - emoji-reaction-laugh :i/laugh - emoji-reaction-sad :i/sad - emoji-reaction-angry :i/angry}) + {emoji-reaction-love :reaction/love + emoji-reaction-thumbs-up :reaction/thumbs-up + emoji-reaction-thumbs-down :reaction/thumbs-down + emoji-reaction-laugh :reaction/laugh + emoji-reaction-sad :reaction/sad + emoji-reaction-angry :reaction/angry}) (def ^:const invitation-state-unknown 0) (def ^:const invitation-state-requested 1) diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs index 45f725ecb1..a063ecbd53 100644 --- a/src/status_im2/contexts/chat/messages/drawers/view.cljs +++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs @@ -3,7 +3,6 @@ [react-native.core :as rn] [status-im.ui.components.react :as react] [status-im2.contexts.chat.composer.reply.view :as reply] - [status-im2.common.not-implemented :as not-implemented] [status-im2.constants :as constants] [utils.i18n :as i18n] [utils.re-frame :as rf] @@ -175,29 +174,23 @@ :padding-horizontal 30 :padding-top 5 :padding-bottom 15}} - (doall - (for [[id icon] constants/reactions] - (let [emoji-reaction-id (get own-reactions id)] - ^{:key id} - [not-implemented/not-implemented - [quo/button - (merge - {:size 40 - :type (if emoji-reaction-id :grey :ghost) - :icon true - :icon-no-color true - :accessibility-label (str "emoji-picker-" id) - :on-press (fn [] - (if emoji-reaction-id - (rf/dispatch [:models.reactions/send-emoji-reaction-retraction - {:message-id message-id - :emoji-id id - :emoji-reaction-id emoji-reaction-id}]) - (rf/dispatch [:models.reactions/send-emoji-reaction - {:message-id message-id - :emoji-id id}])) - (rf/dispatch [:hide-bottom-sheet]))}) - icon]])))])) + (for [[id reaction-name] constants/reactions + :let [emoji-reaction-id (get own-reactions id)]] + ^{:key id} + [quo/reactions reaction-name + {:start-pressed? (boolean emoji-reaction-id) + :accessibility-label (str "reaction-" (name reaction-name)) + :on-press + (fn [] + (if emoji-reaction-id + (rf/dispatch [:models.reactions/send-emoji-reaction-retraction + {:message-id message-id + :emoji-id id + :emoji-reaction-id emoji-reaction-id}]) + (rf/dispatch [:models.reactions/send-emoji-reaction + {:message-id message-id + :emoji-id id}])) + (rf/dispatch [:hide-bottom-sheet]))}])])) (defn reactions-and-actions [message-data diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 957f17c3b7..5c64d608b8 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -13,6 +13,7 @@ [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar] [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar] [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar] + [status-im2.contexts.quo-preview.selectors.reactions :as selector-reactions] [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar] [status-im2.contexts.quo-preview.banners.banner :as banner] [status-im2.contexts.quo-preview.buttons.button :as button] @@ -296,7 +297,10 @@ :component filter/preview} {:name :selectors :options {:topBar {:visible true}} - :component selectors/preview-selectors}] + :component selectors/preview-selectors} + {:name :select-reactions + :options {:topBar {:visible true}} + :component selector-reactions/preview}] :settings [{:name :privacy-option :options {:topBar {:visible true}} :component privacy-option/preview-options} diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs index b487adabe3..ea2323ddd5 100644 --- a/src/status_im2/contexts/quo_preview/reactions/react.cljs +++ b/src/status_im2/contexts/quo_preview/reactions/react.cljs @@ -1,8 +1,10 @@ (ns status-im2.contexts.quo-preview.reactions.react - (:require [quo2.components.reactions.reaction :as quo2.reaction] + (:require [clojure.string :as string] + [quo2.components.reactions.reaction :as quo2.reaction] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] + [status-im2.constants :as constants] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor @@ -12,29 +14,24 @@ {: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"}]} + :options (for [reaction (vals constants/reactions)] + {:key reaction + :value (string/capitalize (name reaction))})} {:label "Neutral" :key :neutral? :type :boolean}]) (defn cool-preview [] - (let [state (reagent/atom {:emoji :main-icons/love16})] + (let [state (reagent/atom {:emoji :reaction/love})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} [preview/customizer state descriptor] [rn/view {:padding-vertical 60 + :justify-content :center + :flex-direction :row :align-items :center} [quo2.reaction/reaction @state] [quo2.reaction/add-reaction @state]]]]))) diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions.cljs new file mode 100644 index 0000000000..552f27d7a5 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/selectors/reactions.cljs @@ -0,0 +1,30 @@ +(ns status-im2.contexts.quo-preview.selectors.reactions + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im2.constants :as constants])) + +(defn cool-preview + [] + [rn/view + [rn/view {:style {:margin-vertical 24}} + (into [rn/view + {:style {:flex 1 + :margin-top 200 + :flex-direction :row + :justify-content :center + :align-items :center}}] + (for [emoji (vals constants/reactions)] + ^{:key emoji} + [quo/reactions emoji {:container-style {:margin-right 5}}]))]]) + +(defn preview + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1}} + [rn/flat-list + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]])