diff --git a/src/quo/components/selectors/react_selector/view.cljs b/src/quo/components/selectors/react_selector/view.cljs index fcb8f9cfb9..2bcb0eac0e 100644 --- a/src/quo/components/selectors/react_selector/view.cljs +++ b/src/quo/components/selectors/react_selector/view.cljs @@ -34,10 +34,9 @@ (= :pinned use-case) theme) container-style)} - [rn/image - {:style {:width 15 :height 15} - :accessibility-label :emoji - :source (reaction.resource/get-reaction emoji)}] + [rn/text + {:accessibility-label :emoji} + (reaction.resource/system-emojis emoji)] [text/text {:size :paragraph-2 :weight :semi-bold diff --git a/src/quo/components/selectors/reaction_resource.cljs b/src/quo/components/selectors/reaction_resource.cljs index b439e44771..d019c3d870 100644 --- a/src/quo/components/selectors/reaction_resource.cljs +++ b/src/quo/components/selectors/reaction_resource.cljs @@ -4,6 +4,14 @@ (def ^:private reactions (resolve-all-reactions)) +(def system-emojis + {:reaction/thumbs-up "👍" + :reaction/thumbs-down "👎" + :reaction/love "❤" + :reaction/laugh "😂" + :reaction/sad "😢" + :reaction/angry "😡"}) + (defn get-reaction [reaction] (assert (keyword? reaction) "Reaction should be a keyword") diff --git a/src/quo/components/selectors/reactions_selector/view.cljs b/src/quo/components/selectors/reactions_selector/view.cljs index b711ccf0c7..ecb67b064b 100644 --- a/src/quo/components/selectors/reactions_selector/view.cljs +++ b/src/quo/components/selectors/reactions_selector/view.cljs @@ -19,6 +19,5 @@ (swap! pressed? not) (when on-press (on-press e)))} - [rn/image - {:source (reactions.resource/get-reaction emoji) - :style {:width 20 :height 20}}]]))) + [rn/text + (reactions.resource/system-emojis emoji)]]))) diff --git a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs index 7e61ec4f49..72d9d6023e 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs @@ -52,7 +52,7 @@ (get constants/reactions (:emoji-id reaction)))) (defn- view-internal - [{:keys [message-id chat-id pinned-by theme]} user-message-content] + [{:keys [message-id chat-id pinned-by preview? theme]} user-message-content] (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])] [:<> (when (seq reactions) @@ -60,7 +60,7 @@ {:container-style {:margin-left 44 :margin-top 8} :reactions (map add-emoji-key reactions) - :add-reaction? true + :add-reaction? (not preview?) :use-case (when pinned-by :pinned) :on-press #(on-press (assoc % :message-id message-id)) :on-long-press #(on-long-press (assoc % diff --git a/src/status_im/contexts/chat/messenger/messages/content/style.cljs b/src/status_im/contexts/chat/messenger/messages/content/style.cljs index 59701b052f..d89e9030b8 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/style.cljs @@ -2,6 +2,8 @@ (:require [quo.foundations.colors :as colors])) +(def ^:private message-padding-scaling-ratio 4.5) + (defn message-container ([] (message-container false nil nil false)) @@ -16,10 +18,16 @@ (assoc :margin-top 4)))) (defn user-message-content - [{:keys [outgoing outgoing-status]}] + [{:keys [outgoing outgoing-status six-reactions? window-scale small-screen?]}] {:border-radius 16 :padding-horizontal 8 - :padding-vertical 4 + :padding-top 4 + :padding-bottom (if (or small-screen? + (and + (> 3 window-scale) + six-reactions?)) + (* message-padding-scaling-ratio window-scale) + 4) :opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)}) diff --git a/src/status_im/contexts/chat/messenger/messages/content/view.cljs b/src/status_im/contexts/chat/messenger/messages/content/view.cljs index f010d649a4..ef5900ce05 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/view.cljs @@ -119,31 +119,38 @@ [] (let [show-delivery-state? (reagent/atom false)] (fn [{:keys [message-data context keyboard-shown? show-reactions? in-reaction-and-action-menu? - show-user-info? theme]}] + show-user-info? preview? theme]}] (let [{:keys [content-type quoted-message content - outgoing outgoing-status pinned-by]} message-data - first-image (first (:album message-data)) - outgoing-status (if (= content-type - constants/content-type-album) - (:outgoing-status first-image) - outgoing-status) - outgoing (if (= content-type - constants/content-type-album) - (:outgoing first-image) - outgoing) - context (assoc context - :on-long-press - #(on-long-press message-data - context - keyboard-shown?)) - response-to (:response-to content) - height (rf/sub [:dimensions/window-height]) - {window-width :width} (rn/get-window) - message-container-data {:window-width window-width - :padding-right 20 - :padding-left 20 - :avatar-container-width 32 - :message-margin-left 8}] + outgoing outgoing-status pinned-by + message-id chat-id]} message-data + first-image (first (:album message-data)) + outgoing-status (if (= content-type + constants/content-type-album) + (:outgoing-status first-image) + outgoing-status) + outgoing (if (= content-type + constants/content-type-album) + (:outgoing first-image) + outgoing) + context (assoc context + :on-long-press + #(on-long-press message-data + context + keyboard-shown?)) + response-to (:response-to content) + height (rf/sub [:dimensions/window-height]) + {window-width :width + window-scale :scale} (rn/get-window) + message-container-data {:window-width window-width + :padding-right 20 + :padding-left 20 + :avatar-container-width 32 + :message-margin-left 8} + reactions (rf/sub [:chats/message-reactions message-id + chat-id]) + six-reactions? (-> reactions + count + (= 6))] [rn/touchable-highlight {:accessibility-label (if (and outgoing (= outgoing-status :sending)) :message-sending @@ -152,7 +159,10 @@ :style (style/user-message-content {:first-in-group? (:first-in-group? message-data) :outgoing outgoing - :outgoing-status outgoing-status}) + :outgoing-status outgoing-status + :small-screen? rn/small-screen? + :window-scale window-scale + :six-reactions? six-reactions?}) :on-press (fn [] (if (and platform/ios? keyboard-shown?) (do @@ -212,7 +222,7 @@ (when @show-delivery-state? [status/status outgoing-status])])] (when show-reactions? - [reactions/message-reactions-row message-data + [reactions/message-reactions-row (assoc message-data :preview? preview?) [rn/view {:pointer-events :none} [user-message-content-internal {:theme theme @@ -226,22 +236,24 @@ (defn on-long-press [{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?] (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:show-bottom-sheet - {:content (drawers/reactions-and-actions message-data context) - :border-radius 16 - :selected-item - (if (or deleted? deleted-for-me?) - (fn [] [content.deleted/deleted-message message-data]) - (fn [] - [rn/view - {:pointer-events :none - :padding-top 4} - [user-message-content - {:message-data message-data - :context context - :keyboard-shown? keyboard-shown? - :show-reactions? true - :show-user-info? true}]]))}])) + (rf/dispatch + [:show-bottom-sheet + {:content (drawers/reactions-and-actions message-data context) + :border-radius 16 + :selected-item + (if (or deleted? deleted-for-me?) + (fn [] [content.deleted/deleted-message message-data]) + (fn [] + [rn/view + {:pointer-events :none + :padding-top 4} + [user-message-content + {:message-data message-data + :context context + :keyboard-shown? keyboard-shown? + :show-reactions? true + :show-user-info? true + :preview? true}]]))}])) (defn system-message? [content-type] diff --git a/src/status_im/contexts/chat/messenger/messages/drawers/style.cljs b/src/status_im/contexts/chat/messenger/messages/drawers/style.cljs index 934e40b30c..908163ab81 100644 --- a/src/status_im/contexts/chat/messenger/messages/drawers/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/drawers/style.cljs @@ -8,9 +8,7 @@ :justify-content :center}) (def tab-icon - {:margin-right 4 - :width 20 - :height 20}) + {:margin-right 4}) (defn tab-count [active? theme] diff --git a/src/status_im/contexts/chat/messenger/messages/drawers/view.cljs b/src/status_im/contexts/chat/messenger/messages/drawers/view.cljs index e269ecf039..037a442eba 100644 --- a/src/status_im/contexts/chat/messenger/messages/drawers/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/drawers/view.cljs @@ -34,10 +34,10 @@ {:id reaction-type-int :accessibility-label (keyword (str "authors-for-reaction-" reaction-type-int)) :label [rn/view {:style style/tab} - [rn/image - {:source (reactions.resource/get-reaction - (get constants/reactions reaction-type-int)) - :style style/tab-icon}] + [rn/text + {:style style/tab-icon} + (reactions.resource/system-emojis + (get constants/reactions reaction-type-int))] [quo/text {:weight :medium :size :paragraph-1 diff --git a/test/appium/views/chat_view.py b/test/appium/views/chat_view.py index abd53b5d4b..d5c67d4007 100644 --- a/test/appium/views/chat_view.py +++ b/test/appium/views/chat_view.py @@ -276,7 +276,7 @@ class ChatElementByText(Text): self.emoji = emoji self.emojis_id = 'emoji-reaction-%s' % str(emojis[self.emoji]) super().__init__(driver, prefix=parent_locator, - xpath="/../..//*[@content-desc='%s']/android.widget.TextView" % self.emojis_id) + xpath="/../..//*[@content-desc='%s']/android.widget.TextView[2]" % self.emojis_id) @property def text(self):