From 0ac6817488f02a7e31c9cf17fe2dead5d83e97df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Fri, 21 Jul 2023 14:15:29 -0600 Subject: [PATCH] [#16551] - shared community name in switcher (#16576) * Fix community tag text ellipsis * Fix channel card overflow and ellipsis in switcher --- .../components/tags/context_tag/style.cljs | 9 ++- .../components/tags/context_tag/view.cljs | 64 +++++++++++-------- .../components/switcher_cards/style.cljs | 30 ++++++--- .../components/switcher_cards/view.cljs | 39 +++++------ 4 files changed, 86 insertions(+), 56 deletions(-) diff --git a/src/quo2/components/tags/context_tag/style.cljs b/src/quo2/components/tags/context_tag/style.cljs index a11f5caf36..1197cc91fa 100644 --- a/src/quo2/components/tags/context_tag/style.cljs +++ b/src/quo2/components/tags/context_tag/style.cljs @@ -42,7 +42,14 @@ (colors/theme-colors colors/neutral-100 colors/white override-theme)) (def community-tag - {:padding-vertical 2}) + {:padding-vertical 2 + :padding-left 2}) + +(def community-tag-text-container + {:margin-left 4 + :flex 1 + :flex-direction :row + :align-items :center}) (defn community-tag-text [override-theme] diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 54c5c1c4a7..f67e5713fd 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -1,10 +1,10 @@ (ns quo2.components.tags.context-tag.view - (:require [quo2.components.avatars.user-avatar.view :as user-avatar] - [quo2.components.avatars.group-avatar :as group-avatar] + (:require [quo2.components.avatars.group-avatar :as group-avatar] + [quo2.components.avatars.user-avatar.style :as user-avatar-style] + [quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] [quo2.components.tags.context-tag.style :as style] - [quo2.components.avatars.user-avatar.style :as user-avatar-style] [react-native.core :as rn])) (defn trim-public-key @@ -40,31 +40,39 @@ (trim-public-key public-key)]]) (defn context-tag - [{:keys [text-style blur? no-avatar-placeholder?] :as params} photo name channel-name] - (let [text-params {:weight :medium - :size :paragraph-2 - :style (assoc text-style :justify-content :center)} + [{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text?] + :as props} + photo + name + channel-name] + (let [text-props {:weight :medium + :size :paragraph-2 + :style (assoc text-style :justify-content :center) + :number-of-lines 1 + :ellipsize-mode :tail} empty-photo? (nil? photo) avatar-size :xxs avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])] - [rn/view {:flex-direction :row} - [base-tag (assoc-in params [:style :padding-left] 3) - (if (and empty-photo? no-avatar-placeholder?) - [rn/view {:style {:width avatar-outer-size}}] - [user-avatar/user-avatar - {:full-name name - :profile-picture photo - :size avatar-size - :status-indicator? false}]) - [rn/view {:style style/context-tag-text-container} - [text/text text-params (str " " name)] - (when channel-name - [:<> - [icons/icon - :i/chevron-right - {:color (style/context-tag-icon-color blur?) - :size 16}] - [text/text text-params (str "# " channel-name)]])]]])) + [base-tag (update-in props [:style :padding-left] #(or % 3)) + (if (and empty-photo? no-avatar-placeholder?) + [rn/view {:style {:width avatar-outer-size}}] + [user-avatar/user-avatar + {:full-name name + :profile-picture photo + :size avatar-size + :status-indicator? false}]) + [rn/view {:style (or text-container-style style/context-tag-text-container)} + (if ellipsize-text? + [rn/view {:style {:flex 1}} + [text/text text-props name]] + [text/text text-props (str " " name)]) + (when channel-name + [:<> + [icons/icon + :i/chevron-right + {:color (style/context-tag-icon-color blur?) + :size 16}] + [text/text text-props (str "# " channel-name)]])]])) (defn user-avatar-tag [params username photo] @@ -88,8 +96,10 @@ (defn community-tag [avatar community-name {:keys [override-theme] :as params}] [context-tag - (merge {:style style/community-tag - :text-style (style/community-tag-text override-theme)} + (merge {:style style/community-tag + :text-style (style/community-tag-text override-theme) + :text-container-style style/community-tag-text-container + :ellipsize-text? true} params) avatar community-name]) diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/style.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/style.cljs index fc5ed06230..4a74fbf2d7 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/style.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/style.cljs @@ -46,21 +46,16 @@ (defn content-container [new-notifications?] - {:position :absolute - :max-width (if new-notifications? 108 136) - :flex-shrink 1 - :bottom 12 - :margin-left 12 - :margin-right (if new-notifications? 8 12)}) + {:flex 1 + :max-width (if new-notifications? 108 136)}) (def notification-container - {:position :absolute + {:margin-top :auto :width 20 :height 20 - :bottom 12 - :right 12 :justify-content :center - :align-items :center}) + :align-items :center + :margin-left 8}) (def last-message-text {:color (:last-message-text-color colors-map)}) @@ -91,8 +86,23 @@ :border-radius 4 :background-color background-color}) +(def bottom-container + {:position :absolute + :flex-direction :row + :justify-content :space-between + :align-items :flex-end + :bottom 12 + :left 12 + :right 12}) + ;; Supporting Components +(def channel-card-container + {:flex-direction :row + :align-items :center}) + +(def channel-card-text-container {:flex 1}) + (def sticker {:width 24 :height 24}) diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index aec903bba1..81c9f0d866 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -13,10 +13,25 @@ [status-im2.contexts.shell.jump-to.components.switcher-cards.style :as style] [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver])) +(defn- channel-card + [{:keys [emoji channel-name customization-color] :as _community-channel}] + [rn/view style/channel-card-container + [quo/channel-avatar + {:emoji emoji + :customization-color customization-color}] + [rn/view style/channel-card-text-container + [quo/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :ellipsize-mode :tail + :style style/community-channel} + channel-name]]]) + (defn content-container [type - {:keys [content-type data new-notifications? color-50 community-info - community-channel] + {:keys [content-type data new-notifications? color-50 + community-info community-channel] {:keys [text parsed-text source]} :data}] [rn/view {:style (style/content-container new-notifications?)} (case type @@ -33,23 +48,10 @@ :override-theme :dark :label (i18n/label :t/kicked)}] (:count :permission) [:<>] ;; Add components for these cases - nil) shell.constants/community-channel-card - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [quo/channel-avatar - {:emoji (:emoji community-channel) - :customization-color color-50}] - [quo/text - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :ellipsize-mode :tail - :style style/community-channel} - (:channel-name community-channel)]] + [channel-card (assoc community-channel :customization-color color-50)] (case content-type constants/content-type-text @@ -102,12 +104,13 @@ [quo/counter {:outline false :override-text-color colors/white - :override-bg-color color-60} counter-label] + :override-bg-color color-60} + counter-label] [rn/view {:style (style/unread-dot color-60)}])]) (defn bottom-container [type {:keys [new-notifications?] :as content}] - [:<> + [rn/view {:style style/bottom-container} [content-container type content] (when new-notifications? [notification-container content])])