From a9b63e0f22afdd9817114b09408255df54ea4bcc Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Mon, 25 Sep 2023 19:58:20 +0800 Subject: [PATCH] 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> --- .../list_items/preview_list/view.cljs | 96 ++++--------------- .../settings/settings_item/view.cljs | 3 +- .../components/tags/context_tag/view.cljs | 17 ++-- .../components/tags/number_tag/style.cljs | 15 +-- src/quo2/components/tags/number_tag/view.cljs | 4 +- .../quo_preview/list_items/preview_lists.cljs | 7 +- .../quo_preview/tags/context_tags.cljs | 80 +++++++++------- .../components/switcher_cards/view.cljs | 5 +- 8 files changed, 90 insertions(+), 137 deletions(-) diff --git a/src/quo2/components/list_items/preview_list/view.cljs b/src/quo2/components/list_items/preview_list/view.cljs index 768df73e7b..bbedcf0766 100644 --- a/src/quo2/components/list_items/preview_list/view.cljs +++ b/src/quo2/components/list_items/preview_list/view.cljs @@ -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]) @@ -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}}] @@ -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)} @@ -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)) diff --git a/src/quo2/components/settings/settings_item/view.cljs b/src/quo2/components/settings/settings_item/view.cljs index 9d7252f3cc..71a188cda6 100644 --- a/src/quo2/components/settings/settings_item/view.cljs +++ b/src/quo2/components/settings/settings_item/view.cljs @@ -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 diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 16ecf428b2..6320bdd916 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -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)} diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs index 9a653fd8b6..30a618b30b 100644 --- a/src/quo2/components/tags/number_tag/style.cljs +++ b/src/quo2/components/tags/number_tag/style.cljs @@ -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))}) diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs index 61ef93dec8..2098d32e88 100644 --- a/src/quo2/components/tags/number_tag/view.cljs +++ b/src/quo2/components/tags/number_tag/view.cljs @@ -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}] diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index 20c2de7779..63f3e7b410 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -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 [] diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index e967a11705..9c48800229 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -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] @@ -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)}) @@ -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" @@ -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]]])])) diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index 0eb3971b79..8e4ca907dc 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -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