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

Updated `data-item`, monospaced & aligned address (#18008) 

* Upd

* Fix
This commit is contained in:
Alexander 2023-12-01 10:03:08 +01:00 committed by GitHub
parent b5202b4d28
commit 52f7fc59ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,14 +10,14 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
@ -27,14 +27,14 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? false :card? false
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
@ -45,14 +45,14 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :small :size :small
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
@ -63,14 +63,14 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
@ -81,31 +81,31 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
(h/is-truthy (h/get-by-text "Description"))) (h/is-truthy (h/get-by-text "Subtitle")))
(h/test "right icon is not visible when icon-right? is false" (h/test "right icon is not visible when icon-right? is false"
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
@ -115,7 +115,6 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? true :icon-right? true
:right-icon :i/chevron-right :right-icon :i/chevron-right
:card? true :card? true
@ -123,17 +122,17 @@
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :icon-right))) (h/is-truthy (h/query-by-label-text :icon-right)))
(h/test "description icon is visible when description is icon" (h/test "icon is visible when subtitle type is icon"
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :icon
:icon-right? true :icon-right? true
:right-icon :i/chevron-right :right-icon :i/chevron-right
:card? true :card? true
@ -141,17 +140,17 @@
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :icon
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :description-icon))) (h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
(h/test "description image is visible when description is network" (h/test "image is visible when subtitle type is network"
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :network
:icon-right? true :icon-right? true
:right-icon :i/chevron-right :right-icon :i/chevron-right
:card? true :card? true
@ -159,18 +158,18 @@
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :network
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow :customization-color :yellow
:network-image (quo.resources/get-network :ethereum)}]) :network-image (quo.resources/get-network :ethereum)}])
(h/is-truthy (h/query-by-label-text :description-image))) (h/is-truthy (h/query-by-label-text :subtitle-type-image)))
(h/test "description emoji is visible when description is account" (h/test "emoji is visible when subtitle type is account"
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:description :account
:icon-right? true :icon-right? true
:right-icon :i/chevron-right :right-icon :i/chevron-right
:card? true :card? true
@ -178,7 +177,8 @@
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder :icon :i/placeholder
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]) :customization-color :yellow}])

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

@ -37,8 +37,8 @@
:align-items :center}) :align-items :center})
(defn subtitle-icon-container (defn subtitle-icon-container
[description] [subtitle-type]
{:margin-right (when (not= :default description) 4) {:margin-right (when (not= :default subtitle-type) 4)
:justify-content :center}) :justify-content :center})
(defn title (defn title

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

@ -16,14 +16,15 @@
[rn/view {:style (style/loading-container size blur? theme)}]) [rn/view {:style (style/loading-container size blur? theme)}])
(defn- left-subtitle (defn- left-subtitle
[{:keys [theme size description icon icon-color blur? subtitle customization-color emoji [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
network-image]}] network-image]
:or {subtitle-type :default}}]
[rn/view {:style style/subtitle-container} [rn/view {:style style/subtitle-container}
(when (not= :small size) (when (not= :small size)
[rn/view {:style (style/subtitle-icon-container description)} [rn/view {:style (style/subtitle-icon-container subtitle-type)}
(case description (case subtitle-type
:icon [icons/icon icon :icon [icons/icon icon
{:accessibility-label :description-icon {:accessibility-label :subtitle-type-icon
:size 16 :size 16
:color icon-color}] :color icon-color}]
:account [account-avatar/view :account [account-avatar/view
@ -32,7 +33,7 @@
:emoji emoji :emoji emoji
:type :default}] :type :default}]
:network [rn/image :network [rn/image
{:accessibility-label :description-image {:accessibility-label :subtitle-type-image
:source network-image :source network-image
:style style/image}] :style style/image}]
nil)]) nil)])
@ -58,10 +59,9 @@
(i18n/label :t/days)])]) (i18n/label :t/days)])])
(defn- left-side (defn- left-side
"The description can either be given as a string `description` or a component `custom-subtitle`" "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
[{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
customization-color network-image customization-color network-image emoji]
emoji]
:as props}] :as props}]
[rn/view {:style style/left-side} [rn/view {:style style/left-side}
[left-title [left-title
@ -79,7 +79,7 @@
[left-subtitle [left-subtitle
{:theme theme {:theme theme
:size size :size size
:description description :subtitle-type subtitle-type
:icon icon :icon icon
:icon-color icon-color :icon-color icon-color
:blur? blur? :blur? blur?

6
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

@ -16,7 +16,7 @@
{:key :graph} {:key :graph}
{:key :preview}]} {:key :preview}]}
{:type :select {:type :select
:key :description :key :subtitle-type
:options [{:key :default} :options [{:key :default}
{:key :icon} {:key :icon}
{:key :network} {:key :network}
@ -39,14 +39,14 @@
[] []
(let [state (reagent/atom {:on-press #(js/alert (str "pressed")) (let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false :blur? false
:description :account :subtitle-type :account
:icon-right? false :icon-right? false
:card? true :card? true
:label :none :label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Subtitle"
:icon :i/placeholder :icon :i/placeholder
:right-icon :i/chevron-right :right-icon :i/chevron-right
:emoji "🎮" :emoji "🎮"

7
src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View File

@ -54,5 +54,12 @@
:subtitle address :subtitle address
:status :default :status :default
:size :default :size :default
:subtitle-type :default
:custom-subtitle (fn [] [quo/text
{:size :paragraph-2
;; TODO: monospace font
;; https://github.com/status-im/status-mobile/issues/17009
:weight :monospace}
address])
:container-style style/data-item :container-style style/data-item
:on-press #(js/alert "To be implemented")}]]]))) :on-press #(js/alert "To be implemented")}]]])))

14
src/status_im2/contexts/wallet/collectible/view.cljs
View File

@ -68,12 +68,12 @@
[rn/flat-list [rn/flat-list
{:render-fn (fn [{:keys [trait-type value]}] {:render-fn (fn [{:keys [trait-type value]}]
[quo/data-item [quo/data-item
{:description :default {:card? true
:card? true
:status :default :status :default
:size :default :size :default
:title trait-type :title trait-type
:subtitle value :subtitle value
:subtitle-type :default
:container-style style/traits-item}]) :container-style style/traits-item}])
:data traits :data traits
:key :collectibles-list :key :collectibles-list
@ -91,24 +91,24 @@
{:style style/info-container} {:style style/info-container}
[rn/view {:style style/account} [rn/view {:style style/account}
[quo/data-item [quo/data-item
{:description :account {:card? true
:card? true
:status :default :status :default
:size :default :size :default
:title (i18n/label :t/account-title) :title (i18n/label :t/account-title)
:subtitle "Collectibles vault" :subtitle "Collectibles vault"
:subtitle-type :account
:emoji "🎮" :emoji "🎮"
:customization-color :yellow}]] :customization-color :yellow}]]
[rn/view {:style style/network} [rn/view {:style style/network}
[quo/data-item [quo/data-item
{:description :network {:card? true
:card? true
:status :default :status :default
:size :default :size :default
:title (i18n/label :t/network) :title (i18n/label :t/network)
:network-image (quo.resources/get-network network-keyword) :network-image (quo.resources/get-network network-keyword)
:subtitle network-name}]]])) :subtitle network-name
:subtitle-type :network}]]]))
(defn view (defn view
[] []

2
src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs
View File

@ -44,12 +44,12 @@
[quo/data-item [quo/data-item
{:status :default {:status :default
:size :default :size :default
:description :default
:label :none :label :none
:blur? false :blur? false
:card? true :card? true
:title (i18n/label :t/address) :title (i18n/label :t/address)
:subtitle address :subtitle address
:subtitle-type :default
:container-style (merge style/data-item :container-style (merge style/data-item
{:background-color (colors/theme-colors colors/neutral-2_5 {:background-color (colors/theme-colors colors/neutral-2_5
colors/neutral-90 colors/neutral-90

2
src/status_im2/contexts/wallet/edit_account/view.cljs
View File

@ -79,7 +79,7 @@
[quo/data-item [quo/data-item
{:status :default {:status :default
:size :default :size :default
:description :default :subtitle-type :default
:label :none :label :none
:blur? false :blur? false
:icon-right? true :icon-right? true