From 9362d12bbddea497f4efc943f0510d3194e1d09d Mon Sep 17 00:00:00 2001 From: BalogunofAfrica <45393944+BalogunofAfrica@users.noreply.github.com> Date: Mon, 19 Feb 2024 08:26:32 +0100 Subject: [PATCH] fix: communities review (#18634) * fix: community tag emoji size * fix: hide channel category sticky header for none * fix line wrap * fix formatting * refactor emoji component for tags --------- Co-authored-by: Lungu Cristian --- src/quo/components/tags/tag.cljs | 24 +++++++---- .../components/text_combinations/view.cljs | 6 ++- .../contexts/communities/overview/view.cljs | 41 +++++++++++-------- .../quo/community/community_card_view.cljs | 18 ++++---- 4 files changed, 51 insertions(+), 38 deletions(-) diff --git a/src/quo/components/tags/tag.cljs b/src/quo/components/tags/tag.cljs index cf5fcfa473..4bca27bd28 100644 --- a/src/quo/components/tags/tag.cljs +++ b/src/quo/components/tags/tag.cljs @@ -27,6 +27,19 @@ :blurred-border-color colors/white-opa-10 :text-color {:style {:color colors/white}}}}}) +(defn- emoji-comp + [size resource] + (let [dimension (case size + 32 20 + 24 12 + nil)] + (if (string? resource) + [rn/text {:style {:margin-right 4 :font-size dimension}} + resource] + [rn/image + {:source resource + :style {:margin-right 4 :width dimension :height dimension}}]))) + (defn tag-resources [size type resource icon-color label text-color labelled?] [rn/view @@ -47,13 +60,7 @@ 24 12) :color icon-color}]) (when (= type :emoji) - [text/text - {:style {:margin-right 4} - :size (case size - 32 :paragraph-1 - 24 :paragraph-2 - nil)} - resource]) + [emoji-comp size resource]) (when labelled? [text/text (merge {:size (case size @@ -73,7 +80,7 @@ :size 32/24 :on-press fn :blurred? true/false - :resource icon/image + :resource icon/image/text(emojis) :labelled? true/false :disabled? true/false} @@ -107,4 +114,3 @@ [tag-resources size type resource icon-color label text-color labelled?]]])) (def tag (quo.theme/with-theme tag-internal)) - diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs index 0b3061efb8..6fa6dbc846 100644 --- a/src/quo/components/text_combinations/view.cljs +++ b/src/quo/components/text_combinations/view.cljs @@ -21,6 +21,7 @@ (defn view-internal [{:keys [container-style title + title-number-of-lines avatar title-accessibility-label description @@ -28,7 +29,8 @@ button-icon button-on-press customization-color - emoji-hash]}] + emoji-hash] + :or {title-number-of-lines 1}}] [rn/view {:style container-style} [rn/view {:style {:flex-direction :row @@ -41,7 +43,7 @@ {:accessibility-label title-accessibility-label :weight :semi-bold :ellipsize-mode :tail - :number-of-lines 1 + :number-of-lines title-number-of-lines :size :heading-1} title]] (when button-icon diff --git a/src/status_im/contexts/communities/overview/view.cljs b/src/status_im/contexts/communities/overview/view.cljs index d3059f8db9..8dbf13b27f 100644 --- a/src/status_im/contexts/communities/overview/view.cljs +++ b/src/status_im/contexts/communities/overview/view.cljs @@ -71,7 +71,7 @@ {:key category-id ;; on-layout fires only when the component re-renders, so ;; in case the category hasn't changed, it will not be fired - :on-layout #(on-category-layout name (int (layout-y %)))} + :on-layout #(on-category-layout name category-id (int (layout-y %)))} (when-not (= constants/empty-category-id category-id) [quo/divider-label {:on-press #(collapse-category community-id category-id collapsed?) @@ -238,18 +238,18 @@ (defn- community-header [title logo description] [quo/text-combinations - {:container-style - {:margin-top - (if logo - 12 - (+ scroll-page.style/picture-radius - scroll-page.style/picture-border-width - 12)) - :margin-bottom 12} - :avatar logo - :title title - :description description - :title-accessibility-label :community-title + {:container-style {:margin-top + (if logo + 12 + (+ scroll-page.style/picture-radius + scroll-page.style/picture-border-width + 12)) + :margin-bottom 12} + :avatar logo + :title title + :title-number-of-lines 2 + :description description + :title-accessibility-label :community-title :description-accessibility-label :community-description}]) (defn- community-content @@ -328,10 +328,14 @@ (swap! categories-heights select-keys categories) (reset! first-channel-height height))] (fn [id joined name images] - (let [cover {:uri (get-in images [:banner :uri])} - logo {:uri (get-in images [:thumbnail :uri])} - collapsed? (and initial-joined? joined) - overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))] + (let [cover {:uri (get-in images [:banner :uri])} + logo {:uri (get-in images [:thumbnail :uri])} + collapsed? (and initial-joined? joined) + first-category-height (->> @categories-heights + vals + (apply min) + (+ @first-channel-height)) + overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))] [scroll-page/scroll-page {:cover-image cover :collapsed? collapsed? @@ -347,7 +351,8 @@ :community-name name :community-logo logo} :sticky-header [sticky-category-header - {:enabled (> @scroll-height @first-channel-height) + {:enabled (> @scroll-height + first-category-height) :label (pick-first-category-by-height @scroll-height @first-channel-height diff --git a/src/status_im/contexts/preview/quo/community/community_card_view.cljs b/src/status_im/contexts/preview/quo/community/community_card_view.cljs index b3675bd930..7b39ebf4fe 100644 --- a/src/status_im/contexts/preview/quo/community/community_card_view.cljs +++ b/src/status_im/contexts/preview/quo/community/community_card_view.cljs @@ -15,15 +15,15 @@ :community-icon (resources/get-mock-image :status-logo) :customization-color :blue :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}] - :tags [{:id 1 - :tag-label (i18n/label :t/music) - :emoji (resources/get-image :music)} - {:id 2 - :tag-label (i18n/label :t/lifestyle) - :emoji (resources/get-image :lifestyle)} - {:id 3 - :tag-label (i18n/label :t/podcasts) - :emoji (resources/get-image :podcasts)}]}) + :tags [{:id 1 + :name (i18n/label :t/music) + :emoji (resources/get-image :music)} + {:id 2 + :name (i18n/label :t/lifestyle) + :emoji "🧩"} + {:id 3 + :name (i18n/label :t/podcasts) + :emoji "🎶"}]}) (def descriptor [{:key :status