From e71c167e8a33b891d61371e68638055b929c8d72 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Thu, 19 Oct 2023 00:48:42 -0700 Subject: [PATCH] Fix: Messages/Author component text overflow (#17414) --- src/quo/components/inputs/input/view.cljs | 2 +- src/quo/components/list_items/user_list.cljs | 7 ++-- src/quo/components/messages/author/style.cljs | 34 +++++++++++++------ src/quo/components/messages/author/view.cljs | 23 ++++++------- src/quo/core.cljs | 2 +- .../ui/screens/profile/contact/views.cljs | 4 +-- .../contexts/chat/messages/list/view.cljs | 19 ++++++----- .../drawers/nickname_drawer/style.cljs | 5 ++- .../drawers/nickname_drawer/view.cljs | 24 ++++++------- src/status_im2/contexts/quo_preview/main.cljs | 8 ++--- 10 files changed, 71 insertions(+), 57 deletions(-) diff --git a/src/quo/components/inputs/input/view.cljs b/src/quo/components/inputs/input/view.cljs index 6f9d9411be..50b1100038 100644 --- a/src/quo/components/inputs/input/view.cljs +++ b/src/quo/components/inputs/input/view.cljs @@ -77,7 +77,7 @@ (when on-change-text (on-change-text new-text)) (let [amount-chars (count new-text)] (reset! char-count amount-chars) - (when (>= amount-chars char-limit) + (when (and (>= amount-chars char-limit) on-char-limit-reach) (on-char-limit-reach amount-chars))))] (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button label char-limit multiline? clearable? on-focus on-blur container-style] diff --git a/src/quo/components/list_items/user_list.cljs b/src/quo/components/list_items/user_list.cljs index 494fd42af6..27351e08f7 100644 --- a/src/quo/components/list_items/user_list.cljs +++ b/src/quo/components/list_items/user_list.cljs @@ -20,8 +20,7 @@ (defn action-icon [{:keys [type on-press on-check disabled? checked?]}] [rn/touchable-opacity - {:on-press (when on-press on-press) - :style {:position :absolute :right 20}} + {:on-press (when on-press on-press)} (case type :options [icons/icon :i/options @@ -50,8 +49,8 @@ :profile-picture photo-path :online? online? :size :small}] - [rn/view {:style {:margin-left 8}} - [author/author + [rn/view {:style {:margin-horizontal 8 :flex 1}} + [author/view {:primary-name primary-name :secondary-name secondary-name :contact? contact? diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs index ee2903f0a6..a771bee596 100644 --- a/src/quo/components/messages/author/style.cljs +++ b/src/quo/components/messages/author/style.cljs @@ -3,31 +3,45 @@ [quo.foundations.colors :as colors])) (def container - {:flex-wrap :wrap + {:flex-wrap :nowrap :flex-direction :row :align-items :center}) (defn middle-dot-nickname - [] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) + [theme] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :margin-horizontal 4}) (defn chat-key-text - [] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) + [theme] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :margin-left 8 :padding-top 1}) (defn middle-dot-chat-key - [] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) + [theme] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :margin-left 4}) +(defn primary-name + [muted? theme] + {:color (if muted? + colors/neutral-50 + (colors/theme-colors colors/neutral-100 colors/white theme)) + :flex-shrink 1}) + +(defn secondary-name + [theme] + {:padding-top 1 + :flex-shrink 999999 + :min-width 40 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) + (def icon-container {:margin-left 4}) (defn time-text - [verified?] - {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) + [theme] + {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) :padding-top 1 - :margin-left (if verified? 8 4)}) + :margin-left 8}) diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index df85355820..4cdb35e321 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -4,14 +4,14 @@ [quo.components.icon :as icons] [quo.components.markdown.text :as text] [quo.components.messages.author.style :as style] - [quo.foundations.colors :as colors] + [quo.theme :as quo.theme] [react-native.core :as rn])) (def middle-dot "ยท") -(defn author +(defn- internal-view [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? - muted? size] + muted? size theme] :or {size 13}}] [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})} [text/text @@ -19,24 +19,21 @@ :size (if (= size 15) :paragraph-1 :paragraph-2) :number-of-lines 1 :accessibility-label :author-primary-name - :style {:color (if muted? - colors/neutral-50 - (colors/theme-colors colors/neutral-100 colors/white))}} + :style (style/primary-name muted? theme)} primary-name] (when (not (string/blank? secondary-name)) [:<> [text/text {:size :label :number-of-lines 1 - :style (style/middle-dot-nickname)} + :style (style/middle-dot-nickname theme)} middle-dot] [text/text {:weight :medium :size :label :number-of-lines 1 :accessibility-label :author-secondary-name - :style {:padding-top 1 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + :style (style/secondary-name theme)} secondary-name]]) (when contact? [icons/icon :main-icons2/contact @@ -59,14 +56,14 @@ {:monospace true :size :label :number-of-lines 1 - :style (style/chat-key-text)} + :style (style/chat-key-text theme)} short-chat-key]) (when (and (not verified?) time-str short-chat-key) [text/text {:monospace true :size :label :number-of-lines 1 - :style (style/middle-dot-chat-key)} + :style (style/middle-dot-chat-key theme)} middle-dot]) (when time-str [text/text @@ -74,5 +71,7 @@ :size :label :accessibility-label :message-timestamp :number-of-lines 1 - :style (style/time-text verified?)} + :style (style/time-text theme)} time-str])]) + +(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 13d17bc5c3..9be41f8d87 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -294,6 +294,7 @@ (def text quo.components.markdown.text/text) ;;;; Messages +(def author quo.components.messages.author.view/view) (def gap quo.components.messages.gap/gap) (def system-message quo.components.messages.system-message.view/system-message) @@ -319,7 +320,6 @@ (def soundtrack quo.components.record-audio.soundtrack.view/f-soundtrack) ;;;; Selectors -(def author quo.components.messages.author.view/author) (def disclaimer quo.components.selectors.disclaimer.view/view) (def filter quo.components.selectors.filter.view/view) (def reactions-selector quo.components.selectors.reactions-selector.view/view) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 8da516f9ad..e9532555ce 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -105,7 +105,7 @@ (save-nickname public-key @entered-nickname)) :auto-capitalize :none :auto-focus false - :max-length 32 + :max-length constants/profile-name-max-length :accessibility-label :nickname-input :default-value nickname :placeholder (i18n/label :t/nickname) @@ -132,7 +132,7 @@ {:style {:align-self :flex-end :margin-top 16 :color colors/gray}} - (str (count @entered-nickname) " / 32")]] + (str (count @entered-nickname) " / " constants/profile-name-max-length)]] [toolbar/toolbar {:show-border? true :center diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 1572599060..a07ee421ca 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -83,8 +83,8 @@ [{:keys [ens-verified added?]} theme] (when (or ens-verified added?) [rn/view - {:style {:padding-left 10 - :margin-top 2}} + {:style {:margin-left 4 + :margin-top 8}} (if ens-verified [quo/icon :i/verified {:no-color true @@ -225,12 +225,15 @@ :display-name display-name :online? online? :profile-picture photo-path}])] - [quo/text - {:weight :semi-bold - :size :heading-1 - :style {:margin-top (if group-chat 54 12)} - :number-of-lines 1} - display-name + [rn/view + {:style {:flex-direction :row + :margin-top (if group-chat 54 12)}} + [quo/text + {:weight :semi-bold + :size :heading-1 + :style {:flex-shrink 1} + :number-of-lines 1} + display-name] [contact-icon contact theme]] (when bio [quo/text {:style style/bio} diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs index f15ac23633..c770d28b7c 100644 --- a/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs +++ b/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs @@ -10,10 +10,9 @@ :border-radius 20 :align-items :center :align-self :flex-start - :padding 4 - :margin-top 8 + :margin-top 4 :margin-left -4 - :margin-bottom 16}) + :margin-bottom 20}) (def buttons-container {:flex-direction :row diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs index 02e2b65d58..5f72af3bfd 100644 --- a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs +++ b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs @@ -7,6 +7,7 @@ [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] + [status-im2.constants :as constants] [status-im2.contexts.contacts.drawers.nickname-drawer.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -38,23 +39,22 @@ :accessibility-label accessibility-label} [quo/text {:weight :semi-bold - :size :heading-1} title] + :size :heading-2} title] [rn/view {:style (style/context-container)} - [quo/user-avatar - {:full-name primary-name - :profile-picture photo-path - :size :xxs - :status-indicator? false}] - [quo/text - {:weight :medium - :size :paragraph-2 - :style {:margin-left 4}} primary-name]] + [quo/context-tag + {:type :default + :blur? false + :profile-picture photo-path + :full-name primary-name + :size 24}]] [quo/input {:type :text - :blur? true + :blur? false :placeholder (i18n/label :t/type-nickname) :auto-focus true - :max-length 32 + :max-length constants/profile-name-max-length + :label (i18n/label :t/nickname) + :char-limit constants/profile-name-max-length :on-change-text (fn [nickname] (reset! entered-nickname nickname)) :on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 829788a698..d6a4868244 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -339,12 +339,12 @@ :component text/view} {:name :markdown-list :component markdown-list/view}] - :messages [{:name :gap + :messages [{:name :author + :component messages-author/view} + {:name :gap :component messages-gap/view} {:name :system-messages - :component system-message/view} - {:name :author - :component messages-author/view}] + :component system-message/view}] :navigation [{:name :bottom-nav-tab :component bottom-nav-tab/view} {:name :top-nav