From d302a6104951f28b173493120e682dfda35ae71c Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Tue, 22 Aug 2023 22:11:02 +0530 Subject: [PATCH] Refactor preview-list component Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- .../view.cljs} | 116 ++++++++++-------- src/quo2/core.cljs | 4 +- .../contexts/communities/overview/view.cljs | 2 +- .../quo_preview/list_items/preview_lists.cljs | 12 +- .../components/switcher_cards/view.cljs | 2 +- 5 files changed, 72 insertions(+), 64 deletions(-) rename src/quo2/components/list_items/{preview_list.cljs => preview_list/view.cljs} (64%) diff --git a/src/quo2/components/list_items/preview_list.cljs b/src/quo2/components/list_items/preview_list/view.cljs similarity index 64% rename from src/quo2/components/list_items/preview_list.cljs rename to src/quo2/components/list_items/preview_list/view.cljs index 7a4e94bd1d1f..a040b67d9787 100644 --- a/src/quo2/components/list_items/preview_list.cljs +++ b/src/quo2/components/list_items/preview_list/view.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.list-items.preview-list +(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] @@ -10,61 +10,67 @@ [react-native.hole-view :as hole-view])) (def params - {32 {:border-radius {:rounded 16 :squared 10} - :hole-radius {:rounded 18 :squared 12} - :margin-left -8 - :hole-size 36 - :hole-x 22 - :hole-y -2} - 24 {:border-radius {:rounded 12 :squared 8} - :hole-radius {:rounded 13 :squared 9} - :margin-left -4 - :hole-size 26 - :hole-x 19 - :hole-y -1} - 20 {:border-radius {:rounded 10 :squared 8} - :hole-radius {:rounded 11 :squared 9} - :margin-left -4 - :hole-size 22 - :hole-x 15 - :hole-y -1} - 16 {:border-radius {:rounded 8 :squared 8} - :hole-radius {:rounded 9 :squared 9} - :margin-left -4 - :hole-size 18 - :hole-x 11 - :hole-y -1} - 14 {:border-radius {:rounded 7 :squared 7} - :hole-radius {:rounded 8 :squared 8} - :margin-left -2 - :hole-size 16 - :hole-x 11 - :hole-y -1}}) - -(def more-icon-for-sizes #{16 14}) + {:size/s-32 {:size 32 + :border-radius {:rounded 16 :squared 10} + :hole-radius {:rounded 18 :squared 12} + :margin-left -8 + :hole-size 36 + :hole-x 22 + :hole-y -2} + :size/s-24 {:size 24 + :border-radius {:rounded 12 :squared 8} + :hole-radius {:rounded 13 :squared 9} + :margin-left -4 + :hole-size 26 + :hole-x 19 + :hole-y -1} + :size/s-20 {:size 20 + :border-radius {:rounded 10 :squared 8} + :hole-radius {:rounded 11 :squared 9} + :margin-left -4 + :hole-size 22 + :hole-x 15 + :hole-y -1} + :size/s-16 {:size 16 + :border-radius {:rounded 8 :squared 8} + :hole-radius {:rounded 9 :squared 9} + :margin-left -4 + :hole-size 18 + :hole-x 11 + :hole-y -1} + :size/s-14 {:size 14 + :border-radius {:rounded 7 :squared 7} + :hole-radius {:rounded 8 :squared 8} + :margin-left -2 + :hole-size 16 + :hole-x 11 + :hole-y -1}}) (defn avatar - [item type size border-radius] - (case type - :user [user-avatar/user-avatar - (merge {:ring? false - :status-indicator? false - :size (case size - 32 :small - 24 :xs - 20 :xxs - 16 :xxxs)} - item)] + [item type size-key border-radius] + (let [size (get-in params [size-key :size]) + user-avatar-size (case size-key + :size/s-32 :small + :size/s-24 :xs + :size/s-20 :xxs + :size/s-16 :xxxs + :xxxs)] + (case type + :user [user-avatar/user-avatar + (merge {:ring? false + :status-indicator? false + :size user-avatar-size} + item)] - :accounts [account-avatar/view - (merge item {:size size})] + :accounts [account-avatar/view + (merge item {:size size})] - (:communities :tokens :collectibles :network :dapps) [fast-image/fast-image - {:source (:source item) - :style {:width size - :height size - :border-radius border-radius}}] - nil)) + (:communities :tokens :collectibles :network :dapps) [fast-image/fast-image + {:source (:source item) + :style {:width size + :height size + :border-radius border-radius}}] + nil))) (defn list-item [index type size item number margin-left @@ -89,6 +95,8 @@ (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 @@ -141,7 +149,7 @@ "[preview-list opts items] opts {:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network - :size 32/24/20/16/14 + :size :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14 :number number of items in the list (optional) :blur? overflow-label blur?} items preview list items (only 4 items is required for preview) @@ -163,7 +171,7 @@ (when (> number 4) [overflow-label {:label (- number 3) - :size size + :size (get-in params [size :size]) :blur? blur? :border-radius border-radius :margin-left margin-left diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index cdc810baf928..c2c911fbde95 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -62,7 +62,7 @@ quo2.components.list-items.channel quo2.components.list-items.community.view quo2.components.list-items.menu-item - quo2.components.list-items.preview-list + quo2.components.list-items.preview-list.view quo2.components.list-items.token-value.view quo2.components.list-items.user-list quo2.components.loaders.skeleton @@ -233,7 +233,7 @@ (def account-list-card quo2.components.list-items.account-list-card.view/view) (def channel-list-item quo2.components.list-items.channel/list-item) (def menu-item quo2.components.list-items.menu-item/menu-item) -(def preview-list quo2.components.list-items.preview-list/view) +(def preview-list quo2.components.list-items.preview-list.view/view) (def user-list quo2.components.list-items.user-list/user-list) (def community-list-item quo2.components.list-items.community.view/view) (def token-value quo2.components.list-items.token-value.view/view) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 555aacfef73c..f79f9fb45860 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -25,7 +25,7 @@ [quo/preview-list {:type :user :number (count user-list) - :size 24} + :size :size/s-24} user-list] [quo/text {:accessibility-label :communities-screen-title 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 71599a00fd23..0c712a8dfa88 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 @@ -27,15 +27,15 @@ {:label "Size:" :key :size :type :select - :options [{:key 32 + :options [{:key :size/s-32 :value "32"} - {:key 24 + {:key :size/s-24 :value "24"} - {:key 20 + {:key :size/s-20 :value "20"} - {:key 16 + {:key :size/s-16 :value "16"} - {:key 14 + {:key :size/s-14 :value "14"}]} {:label "Number" :key :number @@ -109,7 +109,7 @@ (defn preview-preview-lists [] (let [state (reagent/atom {:type :accounts - :size 32 + :size :size/s-32 :number 4 :more-than-99-label (i18n/label :counter-99-plus)}) type (reagent/cursor state [:type]) 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 28c3fb822e4d..6e70f90b3d2d 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 @@ -68,7 +68,7 @@ [quo/preview-list {:type :collectibles :more-than-99-label (i18n/label :counter-99-plus) - :size 24} + :size :size/s-24} data] constants/content-type-sticker