Update "Preview List" component to use "Number Tag" for overflow item (#17257)
This commit updates - the preview-list component to use "number-tag" for overflow items in the list as a follow-up of the PR Update "Preview list" component. - the usage of the preview-list component in the context-tag (multiuser and multinetwork type) is updated as it was broken. - the size APIs of preview-list and number-tag and their usage across the codebase to respect the new guidelines. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
parent
f47a4a18e8
commit
a9b63e0f22
|
@ -1,67 +1,13 @@
|
||||||
(ns quo2.components.list-items.preview-list.view
|
(ns quo2.components.list-items.preview-list.view
|
||||||
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
|
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
|
||||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||||
[quo2.components.icon :as quo2.icons]
|
|
||||||
[quo2.components.markdown.text :as quo2.text]
|
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[quo2.theme :as quo.theme]
|
|
||||||
[quo2.components.list-items.preview-list.properties :as properties]
|
[quo2.components.list-items.preview-list.properties :as properties]
|
||||||
|
[quo2.components.tags.number-tag.view :as number-tag]
|
||||||
|
[quo2.theme :as quo.theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.fast-image :as fast-image]
|
[react-native.fast-image :as fast-image]
|
||||||
[react-native.hole-view :as hole-view]))
|
[react-native.hole-view :as hole-view]))
|
||||||
|
|
||||||
;; This overflow item needs to be cleaned up once the "number tag" component is implemented
|
|
||||||
;; https://github.com/status-im/status-mobile/issues/17045
|
|
||||||
(defn get-overflow-color
|
|
||||||
[blur? blur-light-color blur-dark-color light-color dark-color theme]
|
|
||||||
(if blur?
|
|
||||||
(colors/theme-colors blur-light-color blur-dark-color theme)
|
|
||||||
(colors/theme-colors light-color dark-color theme)))
|
|
||||||
|
|
||||||
(def more-icon-for-sizes #{16 14})
|
|
||||||
|
|
||||||
(defn overflow-label
|
|
||||||
[{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
|
|
||||||
[rn/view
|
|
||||||
{:style {:width size
|
|
||||||
:height size
|
|
||||||
:margin-left margin-left
|
|
||||||
:border-radius border-radius
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center
|
|
||||||
:background-color (get-overflow-color
|
|
||||||
blur?
|
|
||||||
colors/neutral-80-opa-5
|
|
||||||
colors/white-opa-5
|
|
||||||
colors/neutral-20
|
|
||||||
colors/neutral-90
|
|
||||||
theme)}}
|
|
||||||
(if (more-icon-for-sizes size)
|
|
||||||
[quo2.icons/icon :i/more
|
|
||||||
{:size 12
|
|
||||||
:color (get-overflow-color
|
|
||||||
blur?
|
|
||||||
colors/neutral-80-opa-70
|
|
||||||
colors/white-opa-70
|
|
||||||
colors/neutral-50
|
|
||||||
colors/neutral-40
|
|
||||||
theme)}]
|
|
||||||
[quo2.text/text
|
|
||||||
{:size (if (= size 32) :paragraph-2 :label)
|
|
||||||
:weight :medium
|
|
||||||
:style {:color (get-overflow-color
|
|
||||||
blur?
|
|
||||||
colors/neutral-80-opa-70
|
|
||||||
colors/white-opa-70
|
|
||||||
colors/neutral-50
|
|
||||||
colors/neutral-40
|
|
||||||
theme)
|
|
||||||
:margin-left -2}}
|
|
||||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
|
||||||
(if (< label 100)
|
|
||||||
(str "+" label)
|
|
||||||
more-than-99-label)])])
|
|
||||||
|
|
||||||
(defn- preview-item
|
(defn- preview-item
|
||||||
[{:keys [item type size-key]}]
|
[{:keys [item type size-key]}]
|
||||||
(let [size (get-in properties/sizes [size-key :size])
|
(let [size (get-in properties/sizes [size-key :size])
|
||||||
|
@ -70,22 +16,22 @@
|
||||||
[size-key :border-radius (properties/border-type type)])]
|
[size-key :border-radius (properties/border-type type)])]
|
||||||
(case type
|
(case type
|
||||||
:user [user-avatar/user-avatar
|
:user [user-avatar/user-avatar
|
||||||
(merge {:ring? false
|
(assoc item
|
||||||
:status-indicator? false
|
:ring? false
|
||||||
:size user-avatar-size}
|
:status-indicator? false
|
||||||
item)]
|
:size user-avatar-size)]
|
||||||
|
|
||||||
:accounts [account-avatar/view
|
:accounts [account-avatar/view
|
||||||
(merge item {:size size})]
|
(assoc item :size size)]
|
||||||
|
|
||||||
(:communities :collectibles) [fast-image/fast-image
|
(:communities :collectibles) [fast-image/fast-image
|
||||||
{:source (:source item)
|
{:source (or (:source item) item)
|
||||||
:style {:width size
|
:style {:width size
|
||||||
:height size
|
:height size
|
||||||
:border-radius border-radius}}]
|
:border-radius border-radius}}]
|
||||||
|
|
||||||
(:tokens :network :dapps) [fast-image/fast-image
|
(:tokens :network :dapps) [fast-image/fast-image
|
||||||
{:source (:source item)
|
{:source (or (:source item) item)
|
||||||
:style {:width size
|
:style {:width size
|
||||||
:height size
|
:height size
|
||||||
:border-radius border-radius}}]
|
:border-radius border-radius}}]
|
||||||
|
@ -123,11 +69,11 @@
|
||||||
:blur? overflow-label blur?}
|
:blur? overflow-label blur?}
|
||||||
items preview list items (only 4 items is required for preview)
|
items preview list items (only 4 items is required for preview)
|
||||||
"
|
"
|
||||||
[{:keys [type size number blur? theme more-than-99-label]} items]
|
[{:keys [type size number blur?]} items]
|
||||||
(let [size-key (if (contains? properties/sizes size) size :size-24)
|
(let [size-key (if (contains? properties/sizes size) size :size-24)
|
||||||
number (or number (count items))
|
number (or number (count items))
|
||||||
margin-left (get-in properties/sizes [size-key :margin-left])
|
border-type (properties/border-type type)
|
||||||
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
|
margin-left (get-in properties/sizes [size-key :margin-left])]
|
||||||
[rn/view {:style {:flex-direction :row}}
|
[rn/view {:style {:flex-direction :row}}
|
||||||
(for [index (range (if (> number 4) 3 number))]
|
(for [index (range (if (> number 4) 3 number))]
|
||||||
^{:key (str index number)}
|
^{:key (str index number)}
|
||||||
|
@ -138,13 +84,11 @@
|
||||||
:item (get (vec items) index)
|
:item (get (vec items) index)
|
||||||
:number number}])
|
:number number}])
|
||||||
(when (> number 4)
|
(when (> number 4)
|
||||||
[overflow-label
|
[number-tag/view
|
||||||
{:label (- number 3)
|
{:type border-type
|
||||||
:size (get-in properties/sizes [size-key :size])
|
:number (str (- number 3))
|
||||||
:blur? blur?
|
:size size-key
|
||||||
:border-radius border-radius
|
:blur? blur?
|
||||||
:margin-left margin-left
|
:container-style {:margin-left margin-left}}])]))
|
||||||
:theme theme
|
|
||||||
:more-than-99-label more-than-99-label}])]))
|
|
||||||
|
|
||||||
(def view (quo.theme/with-theme view-internal))
|
(def view (quo.theme/with-theme view-internal))
|
||||||
|
|
|
@ -83,7 +83,8 @@
|
||||||
label-props]
|
label-props]
|
||||||
:color [rn/view
|
:color [rn/view
|
||||||
{:style (style/label-dot label-props)}]
|
{:style (style/label-dot label-props)}]
|
||||||
:preview [preview-list/view {:type (:type label-props)} (:data label-props)]
|
:preview [preview-list/view {:type (:type label-props) :size :size-24}
|
||||||
|
(:data label-props)]
|
||||||
nil)])
|
nil)])
|
||||||
|
|
||||||
(defn action-component
|
(defn action-component
|
||||||
|
|
|
@ -91,19 +91,20 @@
|
||||||
:default
|
:default
|
||||||
[tag-skeleton {:theme theme :size size :text full-name}
|
[tag-skeleton {:theme theme :size size :text full-name}
|
||||||
[user-avatar/user-avatar
|
[user-avatar/user-avatar
|
||||||
{:full-name full-name
|
{:full-name full-name
|
||||||
:profile-picture profile-picture
|
:profile-picture profile-picture
|
||||||
:size (if (= size 24) :xxs 28)
|
:size (if (= size 24) :xxs 28)
|
||||||
:status-indicator? false
|
:status-indicator? false
|
||||||
:ring? false}]]
|
:ring? false
|
||||||
|
:customization-color customization-color}]]
|
||||||
|
|
||||||
:multiuser
|
:multiuser
|
||||||
[preview-list/view {:type :user :size 20}
|
[preview-list/view {:type :user :size :size-20}
|
||||||
users]
|
users]
|
||||||
|
|
||||||
:multinetwork
|
:multinetwork
|
||||||
[preview-list/view {:type :network :size 20}
|
[preview-list/view {:type :network :size :size-20}
|
||||||
(map #(hash-map :profile-picture %) networks)]
|
networks]
|
||||||
|
|
||||||
:audio
|
:audio
|
||||||
[tag-skeleton {:theme theme :text (str duration)}
|
[tag-skeleton {:theme theme :text (str duration)}
|
||||||
|
|
|
@ -55,10 +55,11 @@
|
||||||
(get-in sizes [size (if widen? :width-extra :size)])))
|
(get-in sizes [size (if widen? :width-extra :size)])))
|
||||||
|
|
||||||
(defn container
|
(defn container
|
||||||
[{:keys [type number size blur? theme]}]
|
[{:keys [type number size blur? theme container-style]}]
|
||||||
{:style {:width (get-width size number)
|
{:style (assoc container-style
|
||||||
:height (get-in sizes [size :size])
|
:width (get-width size number)
|
||||||
:border-radius (get-shape-value size :border-radius type)
|
:height (get-in sizes [size :size])
|
||||||
:justify-content :center
|
:border-radius (get-shape-value size :border-radius type)
|
||||||
:align-items :center
|
:justify-content :center
|
||||||
:background-color (get-bg-color blur? theme)}})
|
:align-items :center
|
||||||
|
:background-color (get-bg-color blur? theme))})
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
(ns quo2.components.tags.number-tag.view
|
(ns quo2.components.tags.number-tag.view
|
||||||
(:require [quo2.components.icon :as icons]
|
(:require [quo2.components.icon :as icons]
|
||||||
[quo2.components.markdown.text :as text]
|
[quo2.components.markdown.text :as text]
|
||||||
[react-native.core :as rn]
|
|
||||||
[quo2.components.tags.number-tag.style :as style]
|
[quo2.components.tags.number-tag.style :as style]
|
||||||
[quo2.theme :as quo.theme]))
|
[quo2.theme :as quo.theme]
|
||||||
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(defn view-internal
|
(defn view-internal
|
||||||
[{:keys [number size blur? theme] :as props}]
|
[{:keys [number size blur? theme] :as props}]
|
||||||
|
|
|
@ -104,10 +104,9 @@
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [state (reagent/atom {:type :accounts
|
(let [state (reagent/atom {:type :accounts
|
||||||
:size :size-32
|
:size :size-32
|
||||||
:number 4
|
:number 4})
|
||||||
:more-than-99-label "99+"})
|
|
||||||
type (reagent/cursor state [:type])
|
type (reagent/cursor state [:type])
|
||||||
blur? (reagent/cursor state [:blur?])]
|
blur? (reagent/cursor state [:blur?])]
|
||||||
(fn []
|
(fn []
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns status-im2.contexts.quo-preview.tags.context-tags
|
(ns status-im2.contexts.quo-preview.tags.context-tags
|
||||||
(:require [quo2.core :as quo]
|
(:require [quo2.core :as quo]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im2.common.resources :as resources]
|
[status-im2.common.resources :as resources]
|
||||||
|
@ -69,8 +70,9 @@
|
||||||
:type :select
|
:type :select
|
||||||
:options (map (fn [idx]
|
:options (map (fn [idx]
|
||||||
{:key (mapv (fn [picture idx-name]
|
{:key (mapv (fn [picture idx-name]
|
||||||
{:profile-picture picture
|
{:profile-picture picture
|
||||||
:full-name (str (inc idx-name))})
|
:full-name (str (inc idx-name))
|
||||||
|
:customization-color (rand-nth (keys colors/customization))})
|
||||||
(take idx (cycle users))
|
(take idx (cycle users))
|
||||||
(range))
|
(range))
|
||||||
:value (str idx)})
|
:value (str idx)})
|
||||||
|
@ -175,12 +177,15 @@
|
||||||
:customization-color :army
|
:customization-color :army
|
||||||
:profile-picture nil
|
:profile-picture nil
|
||||||
:full-name "Full Name"
|
:full-name "Full Name"
|
||||||
:users [{:profile-picture (resources/mock-images :user-picture-male5)
|
:users [{:profile-picture (resources/mock-images :user-picture-male5)
|
||||||
:full-name "1"}
|
:full-name "1"
|
||||||
{:profile-picture nil
|
:customization-color (rand-nth (keys colors/customization))}
|
||||||
:full-name "3"}
|
{:profile-picture nil
|
||||||
{:profile-picture (resources/mock-images :user-picture-male5)
|
:full-name "3"
|
||||||
:full-name "2"}]
|
:customization-color (rand-nth (keys colors/customization))}
|
||||||
|
{:profile-picture (resources/mock-images :user-picture-male5)
|
||||||
|
:full-name "2"
|
||||||
|
:customization-color (rand-nth (keys colors/customization))}]
|
||||||
:group-name "Group"
|
:group-name "Group"
|
||||||
:community-logo (resources/mock-images :coinbase)
|
:community-logo (resources/mock-images :coinbase)
|
||||||
:community-name "Community"
|
:community-name "Community"
|
||||||
|
@ -200,31 +205,34 @@
|
||||||
:address example-pk
|
:address example-pk
|
||||||
:icon :i/placeholder
|
:icon :i/placeholder
|
||||||
:context "Context"
|
:context "Context"
|
||||||
:duration "00:32"})]
|
:duration "00:32"})
|
||||||
(fn []
|
type (reagent/cursor state [:type])]
|
||||||
[preview/preview-container
|
[:f>
|
||||||
{:state state
|
(fn []
|
||||||
:descriptor (concat descriptor
|
(rn/use-effect (fn []
|
||||||
(case (:type @state)
|
(when (#{:multiuser :multinetwork :audio} @type)
|
||||||
:default default-descriptor
|
(swap! state assoc :size 24)))
|
||||||
:multiuser multiuser-descriptor
|
[@type])
|
||||||
:group group-descriptor
|
[preview/preview-container
|
||||||
:channel channel-descriptor
|
{:state state
|
||||||
:community community-descriptor
|
:descriptor (concat descriptor
|
||||||
:token token-descriptor
|
(case (:type @state)
|
||||||
:network network-descriptor
|
:default default-descriptor
|
||||||
:multinetwork multinetwork-descriptor
|
:multiuser multiuser-descriptor
|
||||||
:account account-descriptor
|
:group group-descriptor
|
||||||
:collectible collectible-descriptor
|
:channel channel-descriptor
|
||||||
:address address-descriptor
|
:community community-descriptor
|
||||||
:icon icon-descriptor
|
:token token-descriptor
|
||||||
:audio audio-descriptor
|
:network network-descriptor
|
||||||
default-descriptor))}
|
:multinetwork multinetwork-descriptor
|
||||||
[rn/view {:style {:padding-bottom 150}}
|
:account account-descriptor
|
||||||
[rn/view {:style {:padding-vertical 60}}
|
:collectible collectible-descriptor
|
||||||
[preview/blur-view
|
:address address-descriptor
|
||||||
{:style {:flex 1
|
:icon icon-descriptor
|
||||||
:margin-vertical 20
|
:audio audio-descriptor
|
||||||
:margin-horizontal 40}
|
default-descriptor))
|
||||||
:show-blur-background? (:blur? @state)}
|
:blur-height 80
|
||||||
[quo/context-tag @state]]]]])))
|
:blur? true
|
||||||
|
:show-blur-background? (:blur? @state)}
|
||||||
|
[rn/view {:style {:align-items :center}}
|
||||||
|
[quo/context-tag @state]]])]))
|
||||||
|
|
|
@ -66,9 +66,8 @@
|
||||||
|
|
||||||
constants/content-type-image
|
constants/content-type-image
|
||||||
[quo/preview-list
|
[quo/preview-list
|
||||||
{:type :collectibles
|
{:type :collectibles
|
||||||
:more-than-99-label (i18n/label :counter-99-plus)
|
:size :size-24}
|
||||||
:size :size-24}
|
|
||||||
data]
|
data]
|
||||||
|
|
||||||
constants/content-type-sticker
|
constants/content-type-sticker
|
||||||
|
|
Loading…
Reference in New Issue