From dd7795a8b80ba0dd69841ef9e79b2abcc8b33344 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Tue, 2 Apr 2024 08:14:08 +0100 Subject: [PATCH] Truncate secondary names in username and author components (#19468) * fix: allow name-container inside message content to shrink so secondary-name can be truncated * fix: responsively truncate contact profile secondary-name * fix: ensure home chat-list-items use full available width in layout * fix: adjust layout of home chat-list-item shrinking with notification counter * fix: adjust layout of home chat-list-item when displaying notification counter * tidy: simplify alignment * tweak: adjust alignment of quo/author component for different text sizes * tidy: extract styles and reformat notification-layout --- src/quo/components/messages/author/style.cljs | 6 +- src/quo/components/messages/author/view.cljs | 6 +- .../text_combinations/username/style.cljs | 19 ++++--- .../text_combinations/username/view.cljs | 3 +- .../chat/home/chat_list_item/style.cljs | 10 +++- .../chat/home/chat_list_item/view.cljs | 56 +++++++++++-------- 6 files changed, 63 insertions(+), 37 deletions(-) diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs index 30da1f0051..41a54dc751 100644 --- a/src/quo/components/messages/author/style.cljs +++ b/src/quo/components/messages/author/style.cljs @@ -9,6 +9,7 @@ (def name-container {:margin-right 8 + :flex-shrink 1 :flex-direction :row :align-items :flex-end }) @@ -31,14 +32,13 @@ (defn secondary-name [theme] - {:padding-top 1 - :flex-shrink 999999 + {:flex-shrink 999999 :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) (defn icon-container [is-first?] {:margin-left (if is-first? 4 2) - :margin-bottom 4}) + :margin-bottom 2}) (defn time-text [theme] diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index e594a80369..7d42696f2c 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -13,7 +13,11 @@ [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? muted? size theme] :or {size 13}}] - [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})} + [rn/view + {:style (merge style/container + style + {:height (if (= size 15) 21.75 18.2) + :padding-bottom (if (= size 15) 2 0.5)})} [rn/view {:style style/name-container} [text/text {:weight :semi-bold diff --git a/src/quo/components/text_combinations/username/style.cljs b/src/quo/components/text_combinations/username/style.cljs index 3d46b7e43e..ec6aa64aff 100644 --- a/src/quo/components/text_combinations/username/style.cljs +++ b/src/quo/components/text_combinations/username/style.cljs @@ -2,22 +2,27 @@ (:require [quo.foundations.colors :as colors])) (def container - {:flex-direction :row - :height 32}) + {:flex-direction :row + :justify-content :flex-start + :height 32}) (def username-text-container {:flex-direction :row - :align-items :flex-end}) + :align-items :flex-end + :flex-shrink 1}) (defn real-name-text [theme blur?] - {:color (if blur? - (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) - (colors/theme-colors colors/neutral-60 colors/neutral-40 theme))}) + {:color (if blur? + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) + (colors/theme-colors colors/neutral-60 colors/neutral-40 theme)) + :flex-shrink 1}) (defn real-name-dot [theme blur?] - (assoc (real-name-text theme blur?) :margin-horizontal 6)) + (merge (real-name-text theme blur?) + {:margin-horizontal 6 + :flex-shrink 0})) (defn status-icon-container [name-type status] diff --git a/src/quo/components/text_combinations/username/view.cljs b/src/quo/components/text_combinations/username/view.cljs index 65e9ad31e3..5c1450a9e4 100644 --- a/src/quo/components/text_combinations/username/view.cljs +++ b/src/quo/components/text_combinations/username/view.cljs @@ -26,7 +26,8 @@ {:style (style/real-name-text theme blur?) :size :paragraph-1 :accessibility-label :real-name - :weight :medium} + :weight :medium + :number-of-lines 1} real-name]])]) (defn- icon-20 diff --git a/src/status_im/contexts/chat/home/chat_list_item/style.cljs b/src/status_im/contexts/chat/home/chat_list_item/style.cljs index 2e814b9c6b..2a4189b8f6 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/style.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/style.cljs @@ -11,9 +11,8 @@ :align-items :center}) (def chat-data-container - {:flex 1 - :margin-left 8 - :margin-right 16}) + {:flex 1 + :margin-left 8}) (def notification-container {:margin-left :auto @@ -22,6 +21,11 @@ :justify-content :center :align-items :center}) +(def notification-container-layout + {:flex-grow 1 + :justify-content :center + :margin-left 8}) + ;; TODO: duplicate of `quo.components.common.unread-grey-dot.style` ;; Replace it when this component is defined as part of `quo.components` (defn grey-dot diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs index d1136e5cde..27050a8b60 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/view.cljs @@ -184,35 +184,45 @@ {:customization-color color :size :size-32}])) +(defn- notification-layout + [child] + [rn/view + {:style style/notification-container-layout} + [rn/view {:style style/notification-container} + child]]) + (defn notification [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}] (let [customization-color (rf/sub [:profile/customization-color]) unread-messages? (pos? unviewed-messages-count) unread-mentions? (pos? unviewed-mentions-count)] - [rn/view {:style style/notification-container} - (cond - muted - [quo/icon :i/muted {:color colors/neutral-40}] + (cond + muted + [notification-layout + [quo/icon :i/muted {:color colors/neutral-40}]] - (and group-chat unread-mentions?) + (and group-chat unread-mentions?) + [notification-layout [quo/counter {:container-style {:position :relative :right 0} :customization-color customization-color :accessibility-label :new-message-counter} - unviewed-mentions-count] + unviewed-mentions-count]] - ;; TODO: use the grey-dot component when chat-list-item is moved to quo.components - (and group-chat unread-messages?) + ;; TODO: use the grey-dot component when chat-list-item is moved to quo.components + (and group-chat unread-messages?) + [notification-layout [rn/view {:style (style/grey-dot) - :accessibility-label :unviewed-messages-public}] + :accessibility-label :unviewed-messages-public}]] - unread-messages? + unread-messages? + [notification-layout [quo/counter {:container-style {:position :relative :right 0} :customization-color customization-color :accessibility-label :new-message-counter} - unviewed-messages-count])])) + unviewed-messages-count]]))) (defn chat-item [{:keys [chat-id group-chat color name last-message timestamp muted] @@ -223,23 +233,25 @@ (rf/sub [:contacts/contact-two-names-by-identity chat-id])) {:keys [ens-verified added?] :as contact} (when-not group-chat (rf/sub [:contacts/contact-by-address chat-id]))] - [:<> + [rn/view {:style {:flex-direction :row}} [avatar-view {:contact contact :chat-id chat-id :full-name primary-name :color color :muted? muted}] - [rn/view {:style style/chat-data-container} - [quo/author - {:primary-name primary-name - :secondary-name secondary-name - :size 15 - :verified? ens-verified - :contact? added? - :muted? muted - :time-str (datetime/to-short-str timestamp)}] - [last-message-preview group-chat last-message muted]] + [rn/view {:style {:flex-shrink 1}} + [rn/view {:style style/chat-data-container} + [quo/author + {:primary-name primary-name + :secondary-name secondary-name + :size 15 + :verified? ens-verified + :contact? added? + :muted? muted + :time-str (datetime/to-short-str timestamp) + :style {:flex-shrink 1}}] + [last-message-preview group-chat last-message muted]]] [notification item]])) (defn chat-user