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
: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))

View File

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

View File

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

View File

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