Skip to content

Commit

Permalink
Update "Preview List" component to use "Number Tag" for overflow item (…
Browse files Browse the repository at this point in the history 
…#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 <[email protected]>
  • Loading branch information
@smohamedjavid @ibrkhalil
smohamedjavid authored and ibrkhalil committed Oct 1, 2023
1 parent 86ee849 commit ff569a8
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 137 deletions.
96 changes: 20 additions & 76 deletions src/quo2/components/list_items/preview_list/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,13 @@
(ns quo2.components.list-items.preview-list.view
(:require [quo2.components.avatars.account-avatar.view :as account-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.tags.number-tag.view :as number-tag]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[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
[{:keys [item type size-key]}]
(let [size (get-in properties/sizes [size-key :size])
Expand All @@ -70,22 +16,22 @@
[size-key :border-radius (properties/border-type type)])]
(case type
:user [user-avatar/user-avatar
(merge {:ring? false
:status-indicator? false
:size user-avatar-size}
item)]
(assoc item
:ring? false
:status-indicator? false
:size user-avatar-size)]

:accounts [account-avatar/view
(merge item {:size size})]
(assoc item :size size)]

(:communities :collectibles) [fast-image/fast-image
{:source (:source item)
{:source (or (:source item) item)
:style {:width size
:height size
:border-radius border-radius}}]

(:tokens :network :dapps) [fast-image/fast-image
{:source (:source item)
{:source (or (:source item) item)
:style {:width size
:height size
:border-radius border-radius}}]
Expand Down Expand Up @@ -123,11 +69,11 @@
:blur? overflow-label blur?}
items preview list items (only 4 items is required for preview)
"
[{:keys [type size number blur? theme more-than-99-label]} items]
(let [size-key (if (contains? properties/sizes size) size :size-24)
number (or number (count items))
margin-left (get-in properties/sizes [size-key :margin-left])
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
[{:keys [type size number blur?]} items]
(let [size-key (if (contains? properties/sizes size) size :size-24)
number (or number (count items))
border-type (properties/border-type type)
margin-left (get-in properties/sizes [size-key :margin-left])]
[rn/view {:style {:flex-direction :row}}
(for [index (range (if (> number 4) 3 number))]
^{:key (str index number)}
Expand All @@ -138,13 +84,11 @@
:item (get (vec items) index)
:number number}])
(when (> number 4)
[overflow-label
{:label (- number 3)
:size (get-in properties/sizes [size-key :size])
:blur? blur?
:border-radius border-radius
:margin-left margin-left
:theme theme
:more-than-99-label more-than-99-label}])]))
[number-tag/view
{:type border-type
:number (str (- number 3))
:size size-key
:blur? blur?
:container-style {:margin-left margin-left}}])]))

(def view (quo.theme/with-theme view-internal))
3 changes: 2 additions & 1 deletion src/quo2/components/settings/settings_item/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@
label-props]
:color [rn/view
{: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)])

(defn action-component
Expand Down
17 changes: 9 additions & 8 deletions src/quo2/components/tags/context_tag/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,19 +91,20 @@
:default
[tag-skeleton {:theme theme :size size :text full-name}
[user-avatar/user-avatar
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false}]]
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false
:customization-color customization-color}]]

:multiuser
[preview-list/view {:type :user :size 20}
[preview-list/view {:type :user :size :size-20}
users]

:multinetwork
[preview-list/view {:type :network :size 20}
(map #(hash-map :profile-picture %) networks)]
[preview-list/view {:type :network :size :size-20}
networks]

:audio
[tag-skeleton {:theme theme :text (str duration)}
Expand Down
15 changes: 8 additions & 7 deletions src/quo2/components/tags/number_tag/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,11 @@
(get-in sizes [size (if widen? :width-extra :size)])))

(defn container
[{:keys [type number size blur? theme]}]
{:style {:width (get-width size number)
:height (get-in sizes [size :size])
:border-radius (get-shape-value size :border-radius type)
:justify-content :center
:align-items :center
:background-color (get-bg-color blur? theme)}})
[{:keys [type number size blur? theme container-style]}]
{:style (assoc container-style
:width (get-width size number)
:height (get-in sizes [size :size])
:border-radius (get-shape-value size :border-radius type)
:justify-content :center
:align-items :center
:background-color (get-bg-color blur? theme))})
4 changes: 2 additions & 2 deletions src/quo2/components/tags/number_tag/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
(ns quo2.components.tags.number-tag.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[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
[{:keys [number size blur? theme] :as props}]
Expand Down
7 changes: 3 additions & 4 deletions src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,9 @@

(defn view
[]
(let [state (reagent/atom {:type :accounts
:size :size-32
:number 4
:more-than-99-label "99+"})
(let [state (reagent/atom {:type :accounts
:size :size-32
:number 4})
type (reagent/cursor state [:type])
blur? (reagent/cursor state [:blur?])]
(fn []
Expand Down
80 changes: 44 additions & 36 deletions src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.context-tags
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
Expand Down Expand Up @@ -69,8 +70,9 @@
:type :select
:options (map (fn [idx]
{:key (mapv (fn [picture idx-name]
{:profile-picture picture
:full-name (str (inc idx-name))})
{:profile-picture picture
:full-name (str (inc idx-name))
:customization-color (rand-nth (keys colors/customization))})
(take idx (cycle users))
(range))
:value (str idx)})
Expand Down Expand Up @@ -175,12 +177,15 @@
:customization-color :army
:profile-picture nil
:full-name "Full Name"
:users [{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "1"}
{:profile-picture nil
:full-name "3"}
{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "2"}]
:users [{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "1"
:customization-color (rand-nth (keys colors/customization))}
{:profile-picture nil
:full-name "3"
: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"
:community-logo (resources/mock-images :coinbase)
:community-name "Community"
Expand All @@ -200,31 +205,34 @@
:address example-pk
:icon :i/placeholder
:context "Context"
:duration "00:32"})]
(fn []
[preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:padding-vertical 60}}
[preview/blur-view
{:style {:flex 1
:margin-vertical 20
:margin-horizontal 40}
:show-blur-background? (:blur? @state)}
[quo/context-tag @state]]]]])))
:duration "00:32"})
type (reagent/cursor state [:type])]
[:f>
(fn []
(rn/use-effect (fn []
(when (#{:multiuser :multinetwork :audio} @type)
(swap! state assoc :size 24)))
[@type])
[preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))
:blur-height 80
:blur? true
:show-blur-background? (:blur? @state)}
[rn/view {:style {:align-items :center}}
[quo/context-tag @state]]])]))
5 changes: 2 additions & 3 deletions src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,8 @@

constants/content-type-image
[quo/preview-list
{:type :collectibles
:more-than-99-label (i18n/label :counter-99-plus)
:size :size-24}
{:type :collectibles
:size :size-24}
data]

constants/content-type-sticker
Expand Down

0 comments on commit ff569a8

Please sign in to comment.