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 <lungucristian95@gmail.com>
This commit is contained in:
BalogunofAfrica 2024-02-19 08:26:32 +01:00 committed by GitHub
parent bfed36d19f
commit 9362d12bbd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 38 deletions

View File

@ -27,6 +27,19 @@
:blurred-border-color colors/white-opa-10 :blurred-border-color colors/white-opa-10
:text-color {:style {:color colors/white}}}}}) :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 (defn tag-resources
[size type resource icon-color label text-color labelled?] [size type resource icon-color label text-color labelled?]
[rn/view [rn/view
@ -47,13 +60,7 @@
24 12) 24 12)
:color icon-color}]) :color icon-color}])
(when (= type :emoji) (when (= type :emoji)
[text/text [emoji-comp size resource])
{:style {:margin-right 4}
:size (case size
32 :paragraph-1
24 :paragraph-2
nil)}
resource])
(when labelled? (when labelled?
[text/text [text/text
(merge {:size (case size (merge {:size (case size
@ -73,7 +80,7 @@
:size 32/24 :size 32/24
:on-press fn :on-press fn
:blurred? true/false :blurred? true/false
:resource icon/image :resource icon/image/text(emojis)
:labelled? true/false :labelled? true/false
:disabled? true/false} :disabled? true/false}
@ -107,4 +114,3 @@
[tag-resources size type resource icon-color label text-color labelled?]]])) [tag-resources size type resource icon-color label text-color labelled?]]]))
(def tag (quo.theme/with-theme tag-internal)) (def tag (quo.theme/with-theme tag-internal))

View File

@ -21,6 +21,7 @@
(defn view-internal (defn view-internal
[{:keys [container-style [{:keys [container-style
title title
title-number-of-lines
avatar avatar
title-accessibility-label title-accessibility-label
description description
@ -28,7 +29,8 @@
button-icon button-icon
button-on-press button-on-press
customization-color customization-color
emoji-hash]}] emoji-hash]
:or {title-number-of-lines 1}}]
[rn/view {:style container-style} [rn/view {:style container-style}
[rn/view [rn/view
{:style {:flex-direction :row {:style {:flex-direction :row
@ -41,7 +43,7 @@
{:accessibility-label title-accessibility-label {:accessibility-label title-accessibility-label
:weight :semi-bold :weight :semi-bold
:ellipsize-mode :tail :ellipsize-mode :tail
:number-of-lines 1 :number-of-lines title-number-of-lines
:size :heading-1} :size :heading-1}
title]] title]]
(when button-icon (when button-icon

View File

@ -71,7 +71,7 @@
{:key category-id {:key category-id
;; on-layout fires only when the component re-renders, so ;; on-layout fires only when the component re-renders, so
;; in case the category hasn't changed, it will not be fired ;; 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) (when-not (= constants/empty-category-id category-id)
[quo/divider-label [quo/divider-label
{:on-press #(collapse-category community-id category-id collapsed?) {:on-press #(collapse-category community-id category-id collapsed?)
@ -238,18 +238,18 @@
(defn- community-header (defn- community-header
[title logo description] [title logo description]
[quo/text-combinations [quo/text-combinations
{:container-style {:container-style {:margin-top
{:margin-top (if logo
(if logo 12
12 (+ scroll-page.style/picture-radius
(+ scroll-page.style/picture-radius scroll-page.style/picture-border-width
scroll-page.style/picture-border-width 12))
12)) :margin-bottom 12}
:margin-bottom 12} :avatar logo
:avatar logo :title title
:title title :title-number-of-lines 2
:description description :description description
:title-accessibility-label :community-title :title-accessibility-label :community-title
:description-accessibility-label :community-description}]) :description-accessibility-label :community-description}])
(defn- community-content (defn- community-content
@ -328,10 +328,14 @@
(swap! categories-heights select-keys categories) (swap! categories-heights select-keys categories)
(reset! first-channel-height height))] (reset! first-channel-height height))]
(fn [id joined name images] (fn [id joined name images]
(let [cover {:uri (get-in images [:banner :uri])} (let [cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])} logo {:uri (get-in images [:thumbnail :uri])}
collapsed? (and initial-joined? joined) collapsed? (and initial-joined? joined)
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))] first-category-height (->> @categories-heights
vals
(apply min)
(+ @first-channel-height))
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
[scroll-page/scroll-page [scroll-page/scroll-page
{:cover-image cover {:cover-image cover
:collapsed? collapsed? :collapsed? collapsed?
@ -347,7 +351,8 @@
:community-name name :community-name name
:community-logo logo} :community-logo logo}
:sticky-header [sticky-category-header :sticky-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height) {:enabled (> @scroll-height
first-category-height)
:label (pick-first-category-by-height :label (pick-first-category-by-height
@scroll-height @scroll-height
@first-channel-height @first-channel-height

View File

@ -15,15 +15,15 @@
:community-icon (resources/get-mock-image :status-logo) :community-icon (resources/get-mock-image :status-logo)
:customization-color :blue :customization-color :blue
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}] :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]
:tags [{:id 1 :tags [{:id 1
:tag-label (i18n/label :t/music) :name (i18n/label :t/music)
:emoji (resources/get-image :music)} :emoji (resources/get-image :music)}
{:id 2 {:id 2
:tag-label (i18n/label :t/lifestyle) :name (i18n/label :t/lifestyle)
:emoji (resources/get-image :lifestyle)} :emoji "🧩"}
{:id 3 {:id 3
:tag-label (i18n/label :t/podcasts) :name (i18n/label :t/podcasts)
:emoji (resources/get-image :podcasts)}]}) :emoji "🎶"}]})
(def descriptor (def descriptor
[{:key :status [{:key :status