Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated data-item, monospaced & aligned address #18008

Merged
merged 4 commits into from
Dec 1, 2023
Merged

Updated data-item, monospaced & aligned address #18008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de9b8a9
Upd
alwx Nov 27, 2023
1c62067
Fix
alwx Nov 28, 2023
919e022
Merge branch 'develop' into bugfix/17944
alwx Nov 30, 2023
7eb3285
Merge branch 'develop' into bugfix/17944
alwx Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions src/quo/components/settings/data_item/component_spec.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}])
Expand All @@ -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}])
Expand All @@ -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}])
Expand All @@ -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}])
Expand All @@ -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}])
Expand All @@ -115,70 +115,70 @@
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? true
:right-icon :i/chevron-right
: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/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
:label :preview
: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
:label :preview
: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
:label :preview
:status :default
:size :default
:title "Label"
:subtitle "Description"
:subtitle "Subtitle"
:subtitle-type :account
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
Expand Down
4 changes: 2 additions & 2 deletions src/quo/components/settings/data_item/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 11 additions & 11 deletions src/quo/components/settings/data_item/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)])
Expand All @@ -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`"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably subtitle-type should be changed to subtitle here, because subtitle-type is not string, if I understood the component right.

[{: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
Expand All @@ -79,7 +79,7 @@
[left-subtitle
{:theme theme
:size size
:description description
:subtitle-type subtitle-type
:icon icon
:icon-color icon-color
:blur? blur?
Expand Down
6 changes: 3 additions & 3 deletions src/status_im2/contexts/quo_preview/settings/data_item.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{:key :graph}
{:key :preview}]}
{:type :select
:key :description
:key :subtitle-type
:options [{:key :default}
{:key :icon}
{:key :network}
Expand All @@ -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 "🎮"
Expand Down
7 changes: 7 additions & 0 deletions src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 7 deletions src/status_im2/contexts/wallet/collectible/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
[]
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/wallet/edit_account/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
[quo/data-item
{:status :default
:size :default
:description :default
:subtitle-type :default
:label :none
:blur? false
:icon-right? true
Expand Down