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
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
@ -27,14 +27,14 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? false
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
@ -45,14 +45,14 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :small
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
@ -63,14 +63,14 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
@ -81,31 +81,31 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
: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/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
@ -115,7 +115,6 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? true
:right-icon :i/chevron-right
:card? true
@ -123,17 +122,17 @@
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(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
{:on-press (h/mock-fn)
:blur? false
:description :icon
:icon-right? true
:right-icon :i/chevron-right
:card? true
@ -141,17 +140,17 @@
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :icon
:icon :i/placeholder
:emoji "🎮"
: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
{:on-press (h/mock-fn)
:blur? false
:description :network
:icon-right? true
:right-icon :i/chevron-right
:card? true
@ -159,18 +158,18 @@
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :network
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow
: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
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? true
:right-icon :i/chevron-right
:card? true
@ -178,7 +177,8 @@
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])

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

@ -37,8 +37,8 @@
:align-items :center})
(defn subtitle-icon-container
[description]
{:margin-right (when (not= :default description) 4)
[subtitle-type]
{:margin-right (when (not= :default subtitle-type) 4)
:justify-content :center})
(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)}])
(defn- left-subtitle
[{:keys [theme size description icon icon-color blur? subtitle customization-color emoji
network-image]}]
[{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
network-image]
:or {subtitle-type :default}}]
[rn/view {:style style/subtitle-container}
(when (not= :small size)
[rn/view {:style (style/subtitle-icon-container description)}
(case description
[rn/view {:style (style/subtitle-icon-container subtitle-type)}
(case subtitle-type
:icon [icons/icon icon
{:accessibility-label :description-icon
{:accessibility-label :subtitle-type-icon
:size 16
:color icon-color}]
:account [account-avatar/view
@ -32,7 +33,7 @@
:emoji emoji
:type :default}]
:network [rn/image
{:accessibility-label :description-image
{:accessibility-label :subtitle-type-image
:source network-image
:style style/image}]
nil)])
@ -58,10 +59,9 @@
(i18n/label :t/days)])])
(defn- left-side
"The description can either be given as a string `description` or a component `custom-subtitle`"
[{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
customization-color network-image
emoji]
"The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
[{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
customization-color network-image emoji]
:as props}]
[rn/view {:style style/left-side}
[left-title
@ -79,7 +79,7 @@
[left-subtitle
{:theme theme
:size size
:description description
:subtitle-type subtitle-type
:icon icon
:icon-color icon-color
:blur? blur?

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

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

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

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

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

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

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

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