status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
Mohamed Javid 2023-09-25 19:58:20 +08:00 committed by GitHub
parent f47a4a18e8
commit a9b63e0f22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 90 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/quo2/components/list_items/preview_list/view.cljs
View File

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

3
src/quo2/components/settings/settings_item/view.cljs
View File

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

17
src/quo2/components/tags/context_tag/view.cljs
View File

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

15
src/quo2/components/tags/number_tag/style.cljs
View File

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

4
src/quo2/components/tags/number_tag/view.cljs
View File

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

7
src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View File

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

80
src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View File

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

5
src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

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