From fd4d64c53e8a750df1ff01b2f4690b546807a4da Mon Sep 17 00:00:00 2001 From: Lungu Cristian Date: Tue, 26 Mar 2024 12:07:48 +0200 Subject: [PATCH] Fix chat spacings (#19015) * fix: chat system messages spacing * fix: spacing between chat actions and time header * fix: distance from last message to shell button * fix: addressed review comment * fix: conflict bug * fix: chat spacings --- .../community/channel_action/style.cljs | 4 +- src/quo/components/dividers/date.cljs | 7 +-- .../messenger/messages/content/style.cljs | 16 +++--- .../chat/messenger/messages/content/view.cljs | 53 +++++++++++-------- .../chat/messenger/messages/list/style.cljs | 5 +- .../chat/messenger/messages/list/view.cljs | 10 ++-- 6 files changed, 53 insertions(+), 42 deletions(-) diff --git a/src/quo/components/community/channel_action/style.cljs b/src/quo/components/community/channel_action/style.cljs index 70d1b0350e..cd4f10af6c 100644 --- a/src/quo/components/community/channel_action/style.cljs +++ b/src/quo/components/community/channel_action/style.cljs @@ -13,6 +13,7 @@ [{:keys [color pressed? theme]}] {:height 102 :padding 12 + :padding-bottom 10 :border-radius 16 :background-color (colors/resolve-color color theme (if pressed? 20 10)) :justify-content :space-between}) @@ -20,4 +21,5 @@ (def channel-action-row {:flex-direction :row :justify-content :space-between - :align-items :center}) + :align-items :center + :padding-right 2}) diff --git a/src/quo/components/dividers/date.cljs b/src/quo/components/dividers/date.cljs index 48532ad399..50b3e405b5 100644 --- a/src/quo/components/dividers/date.cljs +++ b/src/quo/components/dividers/date.cljs @@ -8,9 +8,10 @@ (defn date [value] [rn/view - {:margin-vertical 12 - :padding-right 20 - :padding-left 60} + {:padding-top 8 + :padding-bottom 12 + :padding-right 20 + :padding-left 60} [text/text {:weight :medium :accessibility-label :divider-date-text 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 ff2f396fd9..12db458956 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/style.cljs @@ -5,17 +5,15 @@ (def ^:private message-padding-scaling-ratio 4.5) (defn message-container - ([] - (message-container false nil nil false)) - ([in-pinned-view? pinned-by mentioned last-in-group?] - (cond-> {:border-radius 16 - :margin-horizontal 8} + [{:keys [in-pinned-view? pinned-by mentioned last-in-group? system-message?]}] + (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) + (and (not in-pinned-view?) (or mentioned pinned-by)) + (assoc :background-color colors/primary-50-opa-5 :margin-bottom 4) - (and (not in-pinned-view?) (or mentioned pinned-by last-in-group?)) - (assoc :margin-top 4)))) + (and (not in-pinned-view?) (not system-message?) (or mentioned pinned-by last-in-group?)) + (assoc :margin-top 4))) (defn user-message-content [{:keys [outgoing outgoing-status six-reactions? window-scale small-screen?]}] 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 d9cbc9f3b4..86f0b65087 100644 --- a/src/status_im/contexts/chat/messenger/messages/content/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/content/view.cljs @@ -292,7 +292,7 @@ :show-user-info? false :show-reactions? true}]]))}])) -(defn system-message? +(defn check-if-system-message? [content-type] (#{constants/content-type-system-text constants/content-type-community @@ -305,28 +305,35 @@ (defn message [{:keys [pinned-by mentioned content-type last-in-group? deleted? deleted-for-me?] :as message-data} {:keys [in-pinned-view?] :as context} keyboard-shown?] - [rn/view - {:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?) - :accessibility-label :chat-item} - (cond - (system-message? content-type) - [system-message-content message-data] + (let [system-message? (check-if-system-message? content-type)] + [rn/view + {:style (style/message-container + {:in-pinned-view? in-pinned-view? + :pinned-by pinned-by + :mentioned mentioned + :last-in-group? last-in-group? + :system-message? system-message?}) + :accessibility-label :chat-item} + (cond + system-message? + [system-message-content message-data] - (or deleted? deleted-for-me?) - [content.deleted/deleted-message - (assoc message-data - :on-long-press - #(on-long-press message-data - context - keyboard-shown?)) - context] + (or deleted? deleted-for-me?) + [content.deleted/deleted-message + (assoc message-data + :on-long-press + #(on-long-press message-data + context + keyboard-shown?)) + context] - (= content-type constants/content-type-bridge-message) - [bridge-message-content message-data] - :else - [user-message-content - {:message-data message-data - :context context - :keyboard-shown? keyboard-shown? - :show-reactions? true}])]) + (= content-type constants/content-type-bridge-message) + [bridge-message-content message-data] + + :else + [user-message-content + {:message-data message-data + :context context + :keyboard-shown? keyboard-shown? + :show-reactions? true}])])) diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index 482704e025..eba0c882db 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -8,8 +8,9 @@ {:flex 1 :z-index 2}) -(def list-container - {:padding-vertical 16}) +(def chat-actions-container + {:margin-top 16 + :padding-bottom 20}) (defn background-container [background-color background-opacity top-margin] diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 47df80902c..8f155a1816 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -23,6 +23,7 @@ [utils.re-frame :as rf] [utils.worklets.chat.messenger.messages :as worklets])) +(defonce ^:const distance-from-last-message 4) (defonce ^:const loading-indicator-extra-spacing 250) (defonce ^:const loading-indicator-page-loading-height 100) (defonce ^:const min-message-height 32) @@ -119,11 +120,11 @@ messages.constants/default-extrapolation-option) top (reanimated/interpolate distance-from-list-top [0 messages.constants/header-container-top-margin] - [-40 -8] + [-44 -8] messages.constants/default-extrapolation-option) left (reanimated/interpolate distance-from-list-top [0 messages.constants/header-container-top-margin] - [20 -4] + [16 -4] messages.constants/default-extrapolation-option)] [reanimated/view {:style (style/header-image scale top left theme)} @@ -143,7 +144,7 @@ mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat) unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)] [quo/channel-actions - {:container-style {:margin-top 16} + {:container-style style/chat-actions-container :actions [{:accessibility-label :action-button-pinned :big? true :label (or latest-pin-text (i18n/label :t/no-pinned-messages)) @@ -221,7 +222,7 @@ :number-of-lines 1} display-name] [contact-icon contact theme]] - (when bio + (when (seq bio) [quo/text {:style style/bio} bio]) [actions chat-id customization-color]]])) @@ -348,6 +349,7 @@ :style {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)} + :content-container-style {:padding-top distance-from-last-message} :inverted true :on-layout #(on-layout {:event %