Fix channel card overflow and ellipsis in switcher

status-im · Jul 20, 2023 · 6fbc3cc · 6fbc3cc
1 parent ca25362
commit 6fbc3cc
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs
@@ -99,7 +99,6 @@
    (merge {:style                style/community-tag
            :text-style           (style/community-tag-text override-theme)
            :text-container-style style/community-tag-text-container
-           :community-tag?       true
            :ellipsize-text?      true}
           params)
    avatar

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
@@ -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
@@ -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])])