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 `quo/data-item` to show accounts and networks as preview (#20382) 

* Update `quo/data-item` to show accounts and networks as preview

* Podfile.lock change reverted
This commit is contained in:
Alexander 2024-06-17 09:37:35 +02:00 committed by GitHub
parent 88b97d1151
commit d2f67ef46c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 73 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo/components/settings/data_item/component_spec.cljs
View File

@ -10,9 +10,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
@ -27,9 +25,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? false
:label :none
:status :default
:size :default
:title "Label"
@ -45,9 +41,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? true
:label :none
:status :default
:size :small
:title "Label"
@ -63,9 +57,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
@ -81,9 +73,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
@ -98,9 +88,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
@ -115,10 +103,8 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true
:label :none
:status :default
:size :default
:title "Label"
@ -133,10 +119,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true
:label :preview
:status :default
:size :default
:title "Label"
@ -151,10 +134,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true
:label :preview
:status :default
:size :default
:title "Label"
@ -170,10 +150,7 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true
:label :preview
:status :default
:size :default
:title "Label"

5
src/quo/components/settings/data_item/style.cljs
View File

@ -71,9 +71,8 @@
(colors/theme-colors colors/neutral-100
colors/white
theme))})
(defn right-icon
[label]
{:margin-left (if (or (= label :graph) (= label :none)) 12 8)})
(def right-icon
{:margin-left 12})
(def left-side
{:flex 1})

90
src/quo/components/settings/data_item/view.cljs
View File

@ -1,15 +1,13 @@
(ns quo.components.settings.data-item.view
(:require
[quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.common.not-implemented.view :as not-implemented]
[quo.components.icon :as icons]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.settings.data-item.style :as style]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[utils.i18n :as i18n]))
[react-native.core :as rn]))
(defn- left-loading
[{:keys [size blur?]}]
@ -45,32 +43,24 @@
subtitle]]))
(defn- left-title
[{:keys [title label size blur?]}]
[{:keys [title blur?]}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style style/title-container}
[text/text
{:weight :regular
:size :paragraph-2
:style (style/title blur? theme)}
title]
(when (and (= :graph label) (not= :small size))
[text/text
{:weight :regular
:size :label
:style (style/title blur? theme)}
(i18n/label :t/days)])]))
title]]))
(defn- left-side
"The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
[{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
[{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type icon-color
customization-color network-image emoji]
:as props}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style style/left-side}
[left-title
{:title title
:label label
:size size
:blur? blur?
:theme theme}]
(if (= status :loading)
@ -93,49 +83,43 @@
:network-image network-image}]))]))
(defn- right-side
[{:keys [label icon-right? right-icon icon-color communities-list]}]
[rn/view {:style style/right-container}
(case label
:preview [preview-list/view
{:type :communities
:number 3
:size :size-24}
communities-list]
:graph [text/text "graph"]
:none nil
nil)
(when icon-right?
[rn/view {:style (style/right-icon label)}
[icons/icon right-icon
{:accessibility-label :icon-right
:color icon-color
:size 20}]])])
[{:keys [right-icon right-content icon-color]}]
(let [{:keys [type data size]
:or {size :size-24}} right-content]
[rn/view {:style style/right-container}
(when type
[preview-list/view
{:type type
:number (count data)
:size size}
data])
(when right-icon
[rn/view {:style style/right-icon}
[icons/icon right-icon
{:accessibility-label :icon-right
:color icon-color
:size 20}]])]))
(defn view
[{:keys [blur? card? icon-right? right-icon label status size on-press communities-list
container-style]
[{:keys [blur? card? right-icon right-content status size on-press container-style]
:as props}]
(let [theme (quo.theme/use-theme)
icon-color (if (or blur? (= :dark theme))
colors/neutral-40
colors/neutral-50)]
(if (= :graph label)
[not-implemented/view {:blur? blur?}]
[rn/pressable
{:accessibility-label :data-item
:disabled (not icon-right?)
:on-press on-press
:style (merge (style/container {:size size
:card? card?
:blur? blur?
:actionable? on-press
:theme theme})
container-style)}
[left-side props]
(when (and (= :default status) (not= :small size))
[right-side
{:label label
:icon-right? icon-right?
:right-icon right-icon
:icon-color icon-color
:communities-list communities-list}])])))
[rn/pressable
{:accessibility-label :data-item
:disabled (not right-icon)
:on-press on-press
:style (merge (style/container {:size size
:card? card?
:blur? blur?
:actionable? on-press
:theme theme})
container-style)}
[left-side props]
(when (and (= :default status) (not= :small size))
[right-side
{:right-icon right-icon
:right-content right-content
:icon-color icon-color}])]))

48
src/status_im/contexts/preview/quo/settings/data_item.cljs
View File

@ -6,15 +6,42 @@
[status-im.common.resources :as resources]
[status-im.contexts.preview.quo.preview :as preview]))
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(def networks-list
[{:source (quo.resources/get-network :ethereum)}
{:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}])
(def descriptor
[{:key :blur? :type :boolean}
{:key :card? :type :boolean}
{:key :icon-right? :type :boolean}
{:type :select
:key :label
:options [{:key :none}
{:key :graph}
{:key :preview}]}
:key :right-icon
:options [{:key :i/chevron-right}
{:key :i/copy}
{:key nil
:value "None"}]}
{:type :select
:key :right-content
:options [{:key nil
:value "None"}
{:key {:type :communities
:data communities-list}
:value "Communities"}
{:key {:type :network
:data networks-list}
:value "Networks"}
{:key {:type :accounts
:data [{:emoji "🔥" :customization-color :yellow}]}
:value "Account (size-24)"}
{:key {:type :accounts
:data [{:emoji "🔥" :customization-color :yellow}]
:size :size-32}
:value "Account (size-32)"}]}
{:type :select
:key :subtitle-type
:options [{:key :default}
@ -30,29 +57,22 @@
:options [{:key :default}
{:key :small}]}])
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(defn view
[]
(let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false
:subtitle-type :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Subtitle"
:icon :i/placeholder
:right-icon :i/chevron-right
:right-content nil
:emoji "🎮"
:customization-color :yellow
:network-image (quo.resources/get-network :ethereum)
:communities-list communities-list})]
:network-image (quo.resources/get-network :ethereum)})]
(fn []
[preview/preview-container
{:state state

2
src/status_im/contexts/wallet/account/edit_account/view.cljs
View File

@ -83,9 +83,7 @@
{:status :default
:size :default
:subtitle-type :default
:label :none
:blur? false
:icon-right? true
:right-icon :i/advanced
:card? true
:title (i18n/label :t/address)

2
src/status_im/contexts/wallet/account/tabs/about/view.cljs
View File

@ -76,10 +76,8 @@
:content-container-style {:padding-bottom (+ constants/floating-shell-button-height 8)}}
[quo/data-item
{:description :default
:icon-right? true
:right-icon :i/options
:card? true
:label :none
:status :default
:size :default
:title (if watch-only? (i18n/label :t/watched-address) (i18n/label :t/address))

2
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -48,14 +48,12 @@
:i/advanced]]
[quo/data-item
{:container-style style/fees-data-item
:label :none
:status (if loading-routes? :loading :default)
:size :small
:title (i18n/label :t/fees)
:subtitle fees}]
[quo/data-item
{:container-style style/amount-data-item
:label :none
:status (if loading-routes? :loading :default)
:size :small
:title (i18n/label :t/recipient-gets)

2
src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs
View File

@ -162,9 +162,7 @@
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? false
:card? false
:label :none
:status :default
:size :small
:title title

1
src/status_im/contexts/wallet/sheets/network_preferences/view.cljs
View File

@ -81,7 +81,6 @@
{:status :default
:size :default
:description :default
:label :none
:blur? blur?
:card? true
:title (i18n/label :t/address)

1
src/status_im/contexts/wallet/sheets/remove_account/view.cljs
View File

@ -49,7 +49,6 @@
:custom-subtitle (fn []
[quo/text {:weight :medium}
formatted-path])
:icon-right? true
:right-icon :i/copy
:on-press (fn []
(rf/dispatch [:toasts/upsert