From 1953137068da2e940ff085e1984a67f708e3f0ad Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 22 Jun 2023 11:47:30 +0200 Subject: [PATCH] Updated styles and layouts for messages (#16188) * Messages style * More styling * Chat layout * Formatting fix * Fixes * Updates * Fix * Styles for pinned messages * Style fixes * Style fixes --- src/quo2/components/dividers/date.cljs | 2 +- .../components/messages/author/style.cljs | 5 +- src/quo2/components/messages/author/view.cljs | 49 +++--- .../components/messages/system_message.cljs | 105 +++++-------- .../contexts/chat/composer/reply/style.cljs | 4 +- .../contexts/chat/composer/reply/view.cljs | 2 +- .../chat/menus/pinned_messages/view.cljs | 3 +- .../chat/messages/content/album/view.cljs | 2 +- .../chat/messages/content/deleted/view.cljs | 17 +- .../chat/messages/content/image/view.cljs | 4 +- .../chat/messages/content/pin/style.cljs | 28 ++-- .../chat/messages/content/pin/view.cljs | 52 ++----- .../chat/messages/content/reactions/view.cljs | 4 +- .../contexts/chat/messages/content/style.cljs | 18 ++- .../chat/messages/content/text/style.cljs | 14 +- .../chat/messages/content/text/view.cljs | 26 ++-- .../contexts/chat/messages/content/view.cljs | 146 +++++++++++------- .../contexts/chat/messages/list/view.cljs | 12 +- 18 files changed, 228 insertions(+), 265 deletions(-) diff --git a/src/quo2/components/dividers/date.cljs b/src/quo2/components/dividers/date.cljs index 36aba9ba8d..345c418e91 100644 --- a/src/quo2/components/dividers/date.cljs +++ b/src/quo2/components/dividers/date.cljs @@ -7,7 +7,7 @@ (defn date [value] [rn/view - {:margin-vertical 8 + {:margin-vertical 12 :padding-right 20 :padding-left 60} [text/text diff --git a/src/quo2/components/messages/author/style.cljs b/src/quo2/components/messages/author/style.cljs index 151d7f8a05..13c552d59e 100644 --- a/src/quo2/components/messages/author/style.cljs +++ b/src/quo2/components/messages/author/style.cljs @@ -2,10 +2,9 @@ (:require [quo2.foundations.colors :as colors])) (def container - {:flex 1 - :flex-wrap :wrap + {:flex-wrap :wrap :flex-direction :row - :align-items :center}) + :align-items :baseline}) (def middle-dot-nickname {:color colors/neutral-50 diff --git a/src/quo2/components/messages/author/view.cljs b/src/quo2/components/messages/author/view.cljs index 04cd6ab962..0abc042a76 100644 --- a/src/quo2/components/messages/author/view.cljs +++ b/src/quo2/components/messages/author/view.cljs @@ -9,28 +9,27 @@ (def middle-dot "ยท") (defn author - [{:keys [primary-name secondary-name short-chat-key time-str contact? verified? untrustworthy?]}] - [rn/view {:style style/container} - [:<> - [text/text - {:weight :semi-bold - :size :paragraph-2 - :number-of-lines 1 - :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} - primary-name] - (when (not (string/blank? secondary-name)) - [:<> - [text/text - {:size :paragraph-2 - :number-of-lines 1 - :style style/middle-dot-nickname} - middle-dot] - [text/text - {:weight :medium - :size :paragraph-2 - :number-of-lines 1 - :style {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}} - secondary-name]])] + [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}] + [rn/view {:style (merge style/container style)} + [text/text + {:weight :semi-bold + :size :paragraph-2 + :number-of-lines 1 + :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} + primary-name] + (when (not (string/blank? secondary-name)) + [:<> + [text/text + {:size :paragraph-2 + :number-of-lines 1 + :style style/middle-dot-nickname} + middle-dot] + [text/text + {:weight :medium + :size :paragraph-2 + :number-of-lines 1 + :style {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}} + secondary-name]]) (when contact? [icons/icon :main-icons2/contact {:size 12 @@ -50,21 +49,21 @@ (when (and (not verified?) short-chat-key) [text/text {:monospace true - :size :paragraph-2 + :size :label :number-of-lines 1 :style style/chat-key-text} short-chat-key]) (when (and (not verified?) time-str) [text/text {:monospace true - :size :paragraph-2 + :size :label :number-of-lines 1 :style style/middle-dot-chat-key} middle-dot]) (when time-str [text/text {:monospace true - :size :paragraph-2 + :size :label :accessibility-label :message-timestamp :number-of-lines 1 :style (style/time-text verified?)} diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs index 32f9b99bec..1bbb7e9f9a 100644 --- a/src/quo2/components/messages/system_message.cljs +++ b/src/quo2/components/messages/system_message.cljs @@ -2,11 +2,11 @@ (:require [quo2.components.avatars.icon-avatar :as icon-avatar] [quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.markdown.text :as text] + [quo2.components.messages.author.view :as author] [quo2.foundations.colors :as colors] [quo2.theme :as theme] [react-native.core :as rn] - [react-native.reanimated :as reanimated] - [utils.string :as utils])) + [react-native.reanimated :as reanimated])) (def themes-landed {:pinned colors/primary-50-opa-5 @@ -33,7 +33,7 @@ (defn sm-timestamp [timestamp-str] - [rn/view {:margin-left 6} + [rn/view {:margin-left 8} [text/text {:size :label :style {:color (get-color :time) @@ -61,32 +61,34 @@ :profile-picture image :ring? false}]]) -(defmulti sm-render :type) +(defmulti system-message-content :type) -(defmethod sm-render :deleted +(defmethod system-message-content :deleted [{:keys [label timestamp-str labels child]}] [rn/view - {:align-items :center - :justify-content :space-between - :flex 1 - :flex-direction :row} + {:flex-direction :row + :flex 1 + :align-items :center} + [sm-icon + {:icon :main-icons/delete + :color :danger + :opacity 5}] [rn/view - {:align-items :center - :flex-direction :row} - [sm-icon - {:icon :main-icons/delete - :color :danger - :opacity 5}] + {:align-items :baseline + :flex-direction :row + :flex 1 + :flex-wrap :wrap} (if child child [text/text {:size :paragraph-2 - :style {:color (get-color :text) - :margin-right 5}} - (or (get labels label) label (:message-deleted labels))]) + :style {:color (get-color :text)}} + (or (get labels label) + label + (:message-deleted labels))]) [sm-timestamp timestamp-str]]]) -(defmethod sm-render :added +(defmethod system-message-content :added [{:keys [state mentions timestamp-str labels]}] [rn/view {:align-items :center @@ -113,8 +115,8 @@ (:name (second mentions))] [sm-timestamp timestamp-str]]) -(defmethod sm-render :pinned - [{:keys [state pinned-by content timestamp-str labels]}] +(defmethod system-message-content :pinned + [{:keys [state pinned-by child timestamp-str labels]}] [rn/view {:flex-direction :row :flex 1 @@ -128,49 +130,20 @@ :flex 1} [rn/view {:align-items :baseline - :flex-direction :row} - [text/text - {:size :paragraph-2 - :weight :semi-bold - :style {:color (get-color :text)}} - (utils/truncate-str pinned-by 18)] + :flex-direction :row + :flex 1 + :flex-wrap :wrap} + [author/author + {:primary-name pinned-by + :style {:margin-right 4}}] [rn/view - {:margin-left 4 - :margin-right 2} [text/text {:size :paragraph-2 :style {:color (get-color :text)}} (:pinned-a-message labels)]] [sm-timestamp timestamp-str]] - [rn/view {:flex-direction :row} - [rn/view - {:flex-direction :row - :margin-right 4} - [sm-user-avatar (:image (:mentions content))] - [text/text - {:weight :semi-bold - :size :label} - (:name (:mentions content))]] - (when (seq (:text content)) - [rn/view - {:margin-right 20 - :flex-direction :row - :flex 1} - [text/text - {:size :label - :style {:color (get-color :text)} - :number-of-lines 1 - :ellipsize-mode :tail} - (:text content)]]) - [rn/view - {:justify-content :flex-end - :flex-direction :row - :min-width 10} - (when (seq (:info content)) - [text/text - {:size :label - :style {:color (get-color :time)}} - (utils/truncate-str (:info content) 24)])]]]]) + (when child + child)]]) (defn- f-system-message [{:keys [type style non-pressable? animate-landing? labels on-long-press] :as message}] @@ -189,15 +162,13 @@ :on-long-press on-long-press :style (reanimated/apply-animations-to-style {:background-color sv-color} - (merge - {:flex-direction :row - :flex 1 - :border-radius 16 - :padding-vertical 9 - :padding-horizontal 11 - :background-color sv-color} - style))} - [sm-render message labels]])) + (merge {:flex-direction :row + :flex 1 + :padding-vertical 8 + :padding-horizontal 12 + :background-color sv-color} + style))} + [system-message-content message labels]])) (defn system-message [message] diff --git a/src/status_im2/contexts/chat/composer/reply/style.cljs b/src/status_im2/contexts/chat/composer/reply/style.cljs index ee372ffb29..a6d2523c61 100644 --- a/src/status_im2/contexts/chat/composer/reply/style.cljs +++ b/src/status_im2/contexts/chat/composer/reply/style.cljs @@ -18,7 +18,8 @@ [pin?] (merge {:flex-direction :row :flex 1 - :align-items :center} + :align-items :center + :margin-top 2} (when-not pin? {:left 22 :margin-right 22}))) @@ -33,7 +34,6 @@ (def message-text {:text-transform :none :margin-left 4 - :margin-top 2 :flex-shrink 1}) (def gradient diff --git a/src/status_im2/contexts/chat/composer/reply/view.cljs b/src/status_im2/contexts/chat/composer/reply/view.cljs index cff187f12b..ed7de59e90 100644 --- a/src/status_im2/contexts/chat/composer/reply/view.cljs +++ b/src/status_im2/contexts/chat/composer/reply/view.cljs @@ -73,7 +73,7 @@ :size :xxxs}] [quo/text {:weight :semi-bold - :size :paragraph-2 + :size :label :number-of-lines 1 :style style/message-author-text} (format-reply-author from contact-name current-public-key)]])) diff --git a/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs b/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs index df80261d67..7bed2f25ac 100644 --- a/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs +++ b/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs @@ -14,10 +14,9 @@ (defn message-render-fn [{:keys [deleted? deleted-for-me?] :as message} _ _ context] - ;; TODO (flexsurfer) probably we don't want reactions here (if (or deleted? deleted-for-me?) [content.deleted/deleted-message message context] - [message/message-with-reactions message context (atom false)])) + [message/message message context (atom false)])) (defn pinned-messages [chat-id] diff --git a/src/status_im2/contexts/chat/messages/content/album/view.cljs b/src/status_im2/contexts/chat/messages/content/album/view.cljs index f4799644da..63495f6c91 100644 --- a/src/status_im2/contexts/chat/messages/content/album/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/album/view.cljs @@ -31,7 +31,7 @@ portrait? (and (= images-count rectangular-style-count) (= album-style :portrait))] (if (and albumize? (> images-count 1)) [:<> - [rn/view {:style {:margin-bottom 10}} [text/text-content first-image]] + [rn/view {:style {:margin-bottom 4}} [text/text-content first-image]] [rn/view {:style (style/album-container portrait?) :accessible true diff --git a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs index b1e61c0fa6..dc73d334b5 100644 --- a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs @@ -7,21 +7,20 @@ (defn user-xxx-deleted-this-message [{:keys [display-name profile-picture]}] - [rn/view - {:style {:flex-direction :row - :align-items :center - :flex 1 - :flex-wrap :wrap}} - [rn/view {:style {:margin-right 4}} + [:<> + [rn/view + {:style {:margin-right 4 + :align-self :center}} [quo/user-avatar {:full-name display-name :profile-picture profile-picture :status-indicator? false :size :xxxs}]] - [quo/author {:primary-name display-name}] + [quo/author + {:primary-name display-name + :style {:margin-right 4}}] [quo/text - {:style {:margin-left 4} - :size :paragraph-2 + {:size :paragraph-2 :number-of-lines 1} (i18n/label :t/deleted-this-message)]]) diff --git a/src/status_im2/contexts/chat/messages/content/image/view.cljs b/src/status_im2/contexts/chat/messages/content/image/view.cljs index b5504bc981..188dce7d3c 100644 --- a/src/status_im2/contexts/chat/messages/content/image/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/image/view.cljs @@ -22,10 +22,10 @@ image-local-url (http/replace-port (:image content) (rf/sub [:mediaserver/port]))] [:<> (when (= index 0) - [rn/view {:style {:margin-bottom 10}} [text/text-content message]]) + [text/text-content message]) [rn/touchable-opacity {:active-opacity 1 - :style {:margin-top (when (pos? index) 10)} + :style {:margin-top 4} :on-long-press on-long-press :on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox message-id diff --git a/src/status_im2/contexts/chat/messages/content/pin/style.cljs b/src/status_im2/contexts/chat/messages/content/pin/style.cljs index 15c3cb74af..140821ff1f 100644 --- a/src/status_im2/contexts/chat/messages/content/pin/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/pin/style.cljs @@ -1,24 +1,23 @@ (ns status-im2.contexts.chat.messages.content.pin.style (:require [quo2.foundations.colors :as colors])) -(def system-message-default-size 36) +(def system-message-default-size 34) (def system-message-margin-right 8) (def pin-indicator-container - {:margin-top 4 - :margin-left 54 - :justify-content :center - :align-self :flex-start - :align-items :flex-start - :flex-direction :row}) + {:padding-left 42 + :margin-bottom 2 + :align-items :center + :flex-direction :row}) (def pin-author-text - {:color colors/primary-50 - :bottom 2}) + {:color colors/primary-50 + :margin-left 2}) (defn pinned-message-text [] - {:color (colors/theme-colors colors/neutral-100 colors/white)}) + {:color (colors/theme-colors colors/neutral-100 colors/white) + :margin-left 4}) (def system-message-container {:flex-direction :row :margin-vertical 8}) @@ -26,15 +25,16 @@ (def system-message-inner-container {:width system-message-default-size :height system-message-default-size - :margin-right system-message-margin-right :border-radius system-message-default-size + :margin-right system-message-margin-right :justify-content :center :align-items :center :background-color colors/primary-50-opa-10}) (def system-message-author-container - {:flex-direction :row :align-items :center}) + {:flex-direction :row + :align-items :baseline}) (def system-message-timestamp-container - {:padding-left 5 - :margin-top 2}) + {:padding-left 8 + :color colors/neutral-50}) diff --git a/src/status_im2/contexts/chat/messages/content/pin/view.cljs b/src/status_im2/contexts/chat/messages/content/pin/view.cljs index b126bef471..c42422864a 100644 --- a/src/status_im2/contexts/chat/messages/content/pin/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/pin/view.cljs @@ -5,53 +5,33 @@ [quo2.core :as quo] [quo2.foundations.colors :as colors] [utils.re-frame :as rf] - [utils.i18n :as i18n] - [status-im2.contexts.chat.messages.content.legacy-view :as old-message] - [status-im.ui.screens.chat.styles.message.message :as old-style])) + [utils.i18n :as i18n])) (defn pinned-by-view [pinned-by] (let [{:keys [public-key]} (rf/sub [:multiaccount/contact]) contact-names (rf/sub [:contacts/contact-two-names-by-identity pinned-by]) - author-name (if (= pinned-by public-key) (i18n/label :t/You) (first contact-names))] + author-name (if (= pinned-by public-key) + (i18n/label :t/You) + (first contact-names))] [rn/view {:style style/pin-indicator-container :accessibility-label :pinned-by} - [quo/icon :i/pin {:color colors/primary-50 :size 16}] + [quo/icon :i/pin + {:color colors/primary-50 + :size 16}] [quo/text {:size :label :weight :medium :style style/pin-author-text} author-name]])) -(defn system-message - [{:keys [from in-popover? quoted-message timestamp-str chat-id] :as message}] - [rn/touchable-opacity - {:on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id])) - :active-opacity 1 - :style (merge style/system-message-container - (old-style/message-wrapper message))} - [rn/view - {:style style/system-message-inner-container - :accessibility-label :content-type-pin-icon} - [quo/icon :i/pin {:color colors/primary-50 :size 16}]] - [rn/view - [rn/view {:style style/system-message-author-container} - [rn/touchable-opacity - {:style old-style/message-author-touchable - :disabled in-popover? - :on-press #(rf/dispatch [:chat.ui/show-profile from])} - [old-message/message-author-name from {} 20]] - [quo/text - {:size :label - :style (style/pinned-message-text)} - (str " " (i18n/label :t/pinned-a-message))] - [rn/text - {:style (merge - style/system-message-timestamp-container - (old-style/message-timestamp-text)) - :accessibility-label :message-timestamp} - timestamp-str]] - [reply/quoted-message quoted-message false true]]]) +(defn pinned-message + [{:keys [from quoted-message timestamp-str]}] + (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))] + [quo/system-message + {:type :pinned + :pinned-by display-name + :child [reply/quoted-message quoted-message false true] + :timestamp-str timestamp-str + :labels {:pinned-a-message (i18n/label :t/pinned-a-message)}}])) \ No newline at end of file diff --git a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs index 7f0ee49546..05c24c8ff7 100644 --- a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs @@ -43,8 +43,8 @@ [rn/scroll-view {:shows-horizontal-scroll-indicator false :horizontal true - :style {:margin-left 52 - :margin-bottom 12 + :style {:margin-left 44 + :margin-top 8 :flex-direction :row}} (for [{:keys [own emoji-id quantity emoji-reaction-id] :as emoji-reaction} reactions] diff --git a/src/status_im2/contexts/chat/messages/content/style.cljs b/src/status_im2/contexts/chat/messages/content/style.cljs index 12eb476639..b6852cd8c5 100644 --- a/src/status_im2/contexts/chat/messages/content/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/style.cljs @@ -2,10 +2,14 @@ (:require [quo2.foundations.colors :as colors])) (defn message-container - [in-pinned-view? pinned-by mentioned last-in-group?] - (merge (when (and (not in-pinned-view?) (or mentioned pinned-by)) - {:background-color colors/primary-50-opa-5 - :margin-bottom 4}) - (when (or mentioned pinned-by last-in-group?) - {:margin-top 8}) - {:border-radius 16})) + ([] + (message-container false nil nil false)) + ([in-pinned-view? pinned-by mentioned last-in-group?] + (cond-> {:border-radius 16 + :margin-horizontal 8} + + (and (not in-pinned-view?) (or mentioned pinned-by)) + (assoc :background-color colors/primary-50-opa-5 :margin-bottom 4) + + (or mentioned pinned-by last-in-group?) + (assoc :margin-top 8)))) diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs index 78a28eefd1..c7a08d847b 100644 --- a/src/status_im2/contexts/chat/messages/content/text/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/style.cljs @@ -1,22 +1,14 @@ (ns status-im2.contexts.chat.messages.content.text.style (:require [quo2.foundations.colors :as colors])) -(def spacing-between-blocks 10) - -(def parsed-text-block - {:margin-top -4}) - -(def paragraph - {:margin-top spacing-between-blocks}) +(def spacing-between-blocks 0) (def block - {:margin-top spacing-between-blocks - :border-radius 6 + {:border-radius 6 :padding-horizontal 3}) (def quote - {:margin-top spacing-between-blocks - :border-left-width 1 + {:border-left-width 1 :padding-left 10 :border-left-color colors/neutral-40}) diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index 79d5b6706c..3b9c32f8d0 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -79,21 +79,19 @@ (case (keyword type) :paragraph (conj blocks - [rn/view {:style style/paragraph} - (reduce - (fn [acc e] - (render-inline acc e chat-id)) - [quo/text] - children)]) + (reduce + (fn [acc e] + (render-inline acc e chat-id)) + [quo/text {:size :paragraph-1}] + children)) :edited-block (conj blocks - [rn/view {:style style/paragraph} - (reduce - (fn [acc e] - (render-inline acc e chat-id)) - [quo/text] - children)]) + (reduce + (fn [acc e] + (render-inline acc e chat-id)) + [quo/text {:size :paragraph-1}] + children)) :blockquote (conj blocks @@ -124,7 +122,7 @@ (defn render-parsed-text [{:keys [content chat-id edited-at]}] ^{:key (:parsed-text content)} - [rn/view {:style style/parsed-text-block} + [rn/view (reduce (fn [acc e] (render-block acc e chat-id)) [:<>] @@ -134,6 +132,6 @@ (defn text-content [message-data] - [rn/view + [:<> [render-parsed-text message-data] [link-preview/view message-data]]) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 95d0550642..e93ba69350 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -6,6 +6,7 @@ [status-im2.contexts.chat.messages.content.style :as style] [status-im2.contexts.chat.messages.content.pin.view :as pin] [status-im2.constants :as constants] + [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted] [status-im2.contexts.chat.messages.content.unknown.view :as content.unknown] [status-im2.contexts.chat.messages.content.text.view :as content.text] [status-im2.contexts.chat.messages.drawers.view :as drawers] @@ -29,12 +30,12 @@ (def delivery-state-showing-time-ms 3000) (defn avatar-container - [{:keys [content last-in-group? pinned-by quoted-message from]} message-reaction-view?] + [{:keys [content last-in-group? pinned-by quoted-message from]} show-reactions?] (if (or (and (seq (:response-to content)) quoted-message) last-in-group? pinned-by - message-reaction-view?) + (not show-reactions?)) [avatar/avatar from :small] [rn/view {:padding-top 2 :width 32}])) @@ -46,8 +47,8 @@ quoted-message from timestamp]} - message-reaction-view?] - (when (or (and (seq response-to) quoted-message) last-in-group? pinned-by message-reaction-view?) + show-reactions?] + (when (or (and (seq response-to) quoted-message) last-in-group? pinned-by (not show-reactions?)) (let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity from]) {:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])] [quo/author @@ -61,46 +62,54 @@ (defn system-message-content [{:keys [content-type quoted-message] :as message-data}] (if quoted-message - [pin/system-message message-data] - (case content-type + [pin/pinned-message message-data] + (condp = content-type - constants/content-type-system-text [system.text/text-content message-data] + constants/content-type-system-text + [system.text/text-content message-data] - constants/content-type-system-pinned-message [system.text/text-content message-data] + constants/content-type-system-pinned-message + [system.text/text-content message-data] - constants/content-type-community [not-implemented/not-implemented - [old-message/community message-data]] + constants/content-type-community + [not-implemented/not-implemented + [old-message/community message-data]] - constants/content-type-contact-request [not-implemented/not-implemented - [old-message/system-contact-request message-data]]))) + constants/content-type-contact-request + [not-implemented/not-implemented + [old-message/system-contact-request message-data]]))) (declare on-long-press) (defn user-message-content [] (let [show-delivery-state? (reagent/atom false)] - (fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data} - context - keyboard-shown? - message-reaction-view?] - (let [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])] + (fn [{:keys [message-data context keyboard-shown? show-reactions?]}] + (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])] [rn/touchable-highlight {:accessibility-label (if (and outgoing (= outgoing-status :sending)) :message-sending :message-sent) :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) :style {:border-radius 16 + :padding 8 :opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)} :on-press (fn [] (if (and platform/ios? keyboard-shown?) @@ -112,24 +121,28 @@ (js/setTimeout #(reset! show-delivery-state? false) delivery-state-showing-time-ms)))) :on-long-press #(on-long-press message-data context keyboard-shown?)} - [rn/view {:style {:padding-vertical 4}} + [:<> + (when pinned-by + [pin/pinned-by-view pinned-by]) (when (and (seq response-to) quoted-message) [reply/quoted-message quoted-message]) [rn/view - {:style {:padding-horizontal 12 + {:style {:padding-horizontal 4 :flex-direction :row}} - [avatar-container message-data message-reaction-view?] + [avatar-container message-data show-reactions?] (into - (if message-reaction-view? - [gesture/scroll-view] - [rn/view]) + (if show-reactions? + [rn/view] + [gesture/scroll-view]) [{:style {:margin-left 8 :flex 1 - :max-height (when message-reaction-view? (* 0.4 height))}} - [author message-data message-reaction-view?] + :max-height (when-not show-reactions? + (* 0.4 height))}} + [author message-data show-reactions?] (case content-type - constants/content-type-text [content.text/text-content message-data context] + constants/content-type-text + [content.text/text-content message-data context] constants/content-type-emoji [not-implemented/not-implemented [old-message/emoji message-data]] @@ -146,34 +159,49 @@ constants/content-type-album [album/album-message message-data context on-long-press] - [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) + [not-implemented/not-implemented + [content.unknown/unknown-content message-data]]) + (when @show-delivery-state? - [status/status outgoing-status])])]]])))) + [status/status outgoing-status])])] + (when show-reactions? + [reactions/message-reactions-row message-data + [rn/view {:pointer-events :none} + [user-message-content + {:message-data message-data + :context context + :keyboard-shown? keyboard-shown? + :show-reactions? false}]]])]])))) (defn on-long-press - [message-data context keyboard-shown] + [message-data context keyboard-shown?] (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:show-bottom-sheet {:content (drawers/reactions-and-actions message-data context) :selected-item (fn [] [rn/view {:pointer-events :none} - [user-message-content message-data context keyboard-shown true]])}])) + [user-message-content + {:message-data message-data + :context context + :keyboard-shown? keyboard-shown? + :show-reactions? true}]])}])) -(defn message-with-reactions - [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group?] :as message-data} - context - keyboard-shown] - [rn/view - {:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?) - :accessibility-label :chat-item} - (when pinned-by - [pin/pinned-by-view pinned-by]) - (if (#{constants/content-type-system-text constants/content-type-community - constants/content-type-contact-request - constants/content-type-system-pinned-message} - content-type) - [system-message-content message-data] - [user-message-content message-data context keyboard-shown false]) - [reactions/message-reactions-row message-data - [rn/view {:pointer-events :none} - [user-message-content message-data context keyboard-shown true]]]]) +(defn message + [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? deleted? deleted-for-me?] + :as message-data} context keyboard-shown?] + (if (or deleted? deleted-for-me?) + [rn/view {:style (style/message-container)} + [content.deleted/deleted-message message-data context]] + [rn/view + {:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?) + :accessibility-label :chat-item} + (if (#{constants/content-type-system-text constants/content-type-community + constants/content-type-contact-request + constants/content-type-system-pinned-message} + content-type) + [system-message-content message-data] + [user-message-content + {:message-data message-data + :context context + :keyboard-shown? keyboard-shown? + :show-reactions? true}])])) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index c16193e63c..75c15c4ab4 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -11,9 +11,7 @@ [react-native.reanimated :as reanimated] [status-im.ui.screens.chat.group :as chat.group] [status-im.ui.screens.chat.message.gap :as message.gap] - [status-im2.common.not-implemented :as not-implemented] [status-im2.constants :as constants] - [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted] [status-im2.contexts.chat.messages.content.view :as message] [status-im2.contexts.chat.messages.list.state :as state] [status-im2.contexts.chat.messages.list.style :as style] @@ -234,7 +232,7 @@ (reset! messages-view-header-height (+ height y)))) (defn render-fn - [{:keys [type value deleted? deleted-for-me? content-type] :as message-data} _ _ + [{:keys [type value content-type] :as message-data} _ _ {:keys [context keyboard-shown?]}] ;;TODO temporary hide mutual-state-updates https://github.com/status-im/status-mobile/issues/16254 (when (not= content-type constants/content-type-system-mutual-state-update) @@ -243,12 +241,8 @@ (if (= type :datemark) [quo/divider-date value] (if (= content-type constants/content-type-gap) - [not-implemented/not-implemented - [message.gap/gap message-data]] - [rn/view {:padding-horizontal 8} - (if (or deleted? deleted-for-me?) - [content.deleted/deleted-message message-data context] - [message/message-with-reactions message-data context keyboard-shown?])]))])) + [message.gap/gap message-data] + [message/message message-data context keyboard-shown?]))])) (defn scroll-handler [event scroll-y]