From e9d76c2a0bda768d473b31292a40685100219050 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Wed, 6 Sep 2023 08:17:31 -0700 Subject: [PATCH] Handle long names in pinned messages (#17078) Handle long names in all system messages variations --- .../components/messages/system_message.cljs | 107 ++++++++++-------- .../chat/messages/content/deleted/view.cljs | 15 ++- 2 files changed, 70 insertions(+), 52 deletions(-) diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs index 79788efb1b..fcb6fc4e95 100644 --- a/src/quo2/components/messages/system_message.cljs +++ b/src/quo2/components/messages/system_message.cljs @@ -2,7 +2,6 @@ (: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] [react-native.core :as rn] [utils.i18n :as i18n] @@ -29,7 +28,7 @@ (defn sm-timestamp [timestamp theme] - [rn/view {:margin-left 8 :margin-top 2} + [rn/view {:margin-left 8} [text/text {:size :label :style {:color (time-color theme) @@ -48,20 +47,23 @@ (defn split-text [label theme add-pred?] - (let [color (text-color theme)] - [:<> + (let [color (text-color theme) + label-vector (map-indexed vector (string/split label " "))] + [rn/view {:style {:flex-direction :row :flex-shrink 0 :align-items :center}} (when add-pred? [text/text {} " "]) - (for [[indx item] (map-indexed vector (string/split label " "))] + (for [[indx item] label-vector] ^{:key indx} [text/text {:size :paragraph-2 :style {:color color - :margin-right 3}} + :margin-right (if (= indx (dec (count label-vector))) + 0 + 3)}} item])])) (defn system-message-base - [{:keys [icon timestamp theme]} child] + [{:keys [icon]} child] [rn/view {:flex-direction :row :flex 1 @@ -70,46 +72,47 @@ [rn/view {:align-self :center :flex-direction :row - :margin-right 40 ;; dirty hack, flexbox won't work as expected :flex 1} - child - [sm-timestamp timestamp theme]]]) + child]]) (defn system-message-deleted-internal [{:keys [label child theme timestamp]}] [system-message-base - {:icon {:icon :i/delete - :color :danger - :opacity 5} - :timestamp timestamp - :theme theme} - (if child - child - [text/text - {:size :paragraph-2 - :style {:color (text-color theme)}} - (or label (i18n/label :t/message-deleted))])]) + {:icon {:icon :i/delete + :color :danger + :opacity 5}} + [rn/view {:style {:flex-direction :row :align-items :center}} + (if child + child + [text/text + {:size :paragraph-2 + :style {:color (text-color theme)}} + (or label (i18n/label :t/message-deleted))]) + [sm-timestamp timestamp theme]]]) (def system-message-deleted (quo.theme/with-theme system-message-deleted-internal)) (defn system-message-contact-internal [{:keys [display-name photo-path customization-color theme timestamp]} label icon] [system-message-base - {:icon {:icon icon - :color (or customization-color :primary) - :opacity 5} - :timestamp timestamp} + {:icon {:icon icon + :color (or customization-color :primary) + :opacity 5}} [rn/view {:flex-direction :row :align-items :center - :flex-wrap :wrap} - [rn/view {:flex-direction :row :align-items :center} + :flex-shrink 1 + :flex-wrap :nowrap} + [rn/view {:flex-direction :row :align-items :center :flex-shrink 1} [sm-user-avatar display-name photo-path] [text/text - {:weight :semi-bold - :size :paragraph-2} + {:weight :semi-bold + :number-of-lines 1 + :style {:flex-shrink 1} + :size :paragraph-2} display-name]] - [split-text label theme true]]]) + [split-text label theme true] + [sm-timestamp timestamp theme]]]) (def system-message-contact (quo.theme/with-theme system-message-contact-internal)) @@ -129,39 +132,47 @@ (defn system-message-contact-request-internal [{:keys [display-name photo-path customization-color theme timestamp incoming?]}] [system-message-base - {:icon {:icon :i/add-user - :color (or customization-color :primary) - :opacity 5} - :timestamp timestamp} + {:icon {:icon :i/add-user + :color (or customization-color :primary) + :opacity 5}} [rn/view {:flex-direction :row :align-items :center - :flex-wrap :wrap} + :flex-shrink 1 + :flex-wrap :nowrap} (when-not incoming? [split-text "Contact request sent to" theme false]) - [rn/view {:flex-direction :row :align-items :center} + [rn/view {:flex-direction :row :align-items :center :flex-shrink 1} [sm-user-avatar display-name photo-path] [text/text - {:weight :semi-bold - :size :paragraph-2} + {:weight :semi-bold + :number-of-lines 1 + :style {:flex-shrink 1} + :size :paragraph-2} display-name]] - (when incoming? [split-text "sent you a contact request" theme true])]]) + (when incoming? [split-text "sent you a contact request" theme true]) + [sm-timestamp timestamp theme]]]) (def system-message-contact-request (quo.theme/with-theme system-message-contact-request-internal)) (defn system-message-pinned-internal [{:keys [pinned-by child customization-color theme timestamp]}] [system-message-base - {:icon {:icon :i/pin - :color (or customization-color :primary) - :opacity 5} - :timestamp timestamp} - [rn/view + {:icon {:icon :i/pin + :color (or customization-color :primary) + :opacity 5}} + [rn/view {:style {:flex 1}} [rn/view {:flex-direction :row - :flex-wrap :wrap - :height 18.2} - [author/author {:primary-name pinned-by}] - [split-text (i18n/label :pinned-a-message) theme true]] + :align-items :center + :flex-wrap :nowrap} + [text/text + {:weight :semi-bold + :number-of-lines 1 + :style {:flex-shrink 1} + :size :paragraph-2} + pinned-by] + [split-text (i18n/label :pinned-a-message) theme true] + [sm-timestamp timestamp theme]] (when child child)]]) (def system-message-pinned (quo.theme/with-theme system-message-pinned-internal)) 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 8880b4b120..c0db70c2bb 100644 --- a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs @@ -6,7 +6,10 @@ (defn user-xxx-deleted-this-message [{:keys [display-name profile-picture]}] - [:<> + [rn/view + {:style {:flex-direction :row + :align-items :center + :flex-shrink 1}} [rn/view {:style {:margin-right 4 :align-self :center}} @@ -15,11 +18,15 @@ :profile-picture profile-picture :status-indicator? false :size :xxxs}]] - [quo/author - {:primary-name display-name - :style {:margin-right 4}}] + [quo/text + {:weight :semi-bold + :number-of-lines 1 + :style {:flex-shrink 1 :margin-right 4} + :size :paragraph-2} + display-name] [quo/text {:size :paragraph-2 + :flex-shrink 0 :number-of-lines 1} (i18n/label :t/deleted-this-message)]])