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:
parent
bfed36d19f
commit
9362d12bbd
|
@ -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))
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue