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

UI Component - Account (#14643) 

* Implement accounts component
This commit is contained in:
Ulises Manuel Cárdenas 2022-12-30 03:44:21 -06:00 committed by GitHub
parent 110debc4c4
commit 5493d059b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 180 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/quo2/components/avatars/account_avatar.cljs
View File

@ -1,13 +1,8 @@
(ns quo2.components.avatars.account-avatar
(:require [quo2.components.icon :as icons]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]))
(def icon-color-value
{:dark (get-in colors/customization [:dark :purple])
:light (get-in colors/customization [:light :purple])})
(defn get-border-radius
[size]
(case size
@ -27,12 +22,11 @@
20 11))
(defn account-avatar
[{:keys [size icon]
:or {size 80
icon :main-icons/placeholder}}]
(let [icon-color (if (theme/dark?)
(:dark icon-color-value)
(:light icon-color-value))
[{:keys [size icon color]
:or {size 80
icon :i/placeholder
color :purple}}]
(let [icon-color (colors/custom-color-by-theme color 50 60)
avatar-border-radius (get-border-radius size)
inner-icon-size (get-inner-icon-sizes size)]
[rn/view

71
src/quo2/components/settings/accounts/style.cljs Normal file
View File

@ -0,0 +1,71 @@
(ns quo2.components.settings.accounts.style
(:require [quo2.foundations.colors :as colors]))
(def card
{:position :relative
:padding 8
:border-radius 16
:height 160
:width 160})
(defn background-top
[custom-color]
{:position :absolute
:top 0
:border-top-left-radius 16
:border-top-right-radius 16
:width 160
:height 64
:background-color (-> colors/customization
(get-in [custom-color 50])
(colors/alpha 0.2))})
(defn background-bottom
[]
{:position :absolute
:top 40
:border-radius 16
:width 160
:height 120
:background-color (colors/theme-colors
colors/white
colors/neutral-90)})
(defn avatar-border
[]
{:margin 2
:justify-content :center
:align-items :center
:width 52
:height 52
:border-radius 14
:border-width 2
:border-color (colors/theme-colors
colors/white
colors/neutral-90)})
(def menu-button-container
{:justify-content :center
:align-items :center
:align-self :flex-start})
(defn menu-button-color
[]
{:background-color (colors/theme-colors
colors/white-opa-40
colors/neutral-80-opa-40)})
(defn address-text
[]
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)})
(def card-top
{:flex-direction :row
:align-items :center
:justify-content :space-between})
(def card-bottom
{:flex 1
:margin-horizontal 4
:margin-top 4})

46
src/quo2/components/settings/accounts/view.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns quo2.components.settings.accounts.view
(:require [quo2.components.avatars.account-avatar :as account-avatar]
[quo2.components.buttons.button :as button]
[quo2.components.markdown.text :as text]
[quo2.components.settings.accounts.style :as style]
[react-native.core :as rn]))
(defn card-background
[{:keys [custom-color]}]
[:<>
[rn/view {:style (style/background-top custom-color)}]
[rn/view {:style (style/background-bottom)}]])
(defn avatar
[avatar-props]
[rn/view {:style (style/avatar-border)}
[account-avatar/account-avatar (assoc avatar-props :size 48)]])
(defn menu-button
[{:keys [on-press]}]
[rn/view {:style style/menu-button-container}
[button/button
{:style (style/menu-button-color)
:type :gray
:icon true
:size 24
:on-press on-press}
:i/more]])
(defn account
[{:keys [account-name account-address avatar-icon custom-color on-press-menu]}]
[rn/view {:style style/card}
[card-background {:custom-color custom-color}]
[rn/view {:style style/card-top}
[avatar
{:color custom-color
:icon avatar-icon}]
[menu-button {:on-press on-press-menu}]]
[rn/view {:style style/card-bottom}
[text/text {:size :paragraph-1 :weight :semi-bold}
account-name]
[text/text
{:style (style/address-text)
:size :paragraph-2
:weight :medium}
account-address]]])

2
src/quo2/core.cljs
View File

@ -46,6 +46,7 @@
quo2.components.selectors.filter.view
quo2.components.selectors.selectors
quo2.components.separator
quo2.components.settings.accounts.view
quo2.components.settings.privacy-option
quo2.components.tabs.account-selector
quo2.components.tabs.tabs
@ -128,3 +129,4 @@
;;;; SETTINGS
(def privacy-option quo2.components.settings.privacy-option/card)
(def account quo2.components.settings.accounts.view/account)

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -63,6 +63,7 @@
[status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
[status-im2.contexts.quo-preview.settings.accounts :as accounts]
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]))
(def screens-categories
@ -194,7 +195,10 @@
:component selectors/preview-selectors}]
:settings [{:name :privacy-option
:insets {:top false}
:component privacy-option/preview-options}]
:component privacy-option/preview-options}
{:name :accounts
:insets {:top false}
:component accounts/preview-accounts}]
:tabs [{:name :segmented
:insets {:top false}
:component segmented/preview-segmented}

51
src/status_im2/contexts/quo_preview/settings/accounts.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns status-im2.contexts.quo-preview.settings.accounts
(:require [clojure.string :as string]
[quo2.components.settings.accounts.view :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Custom color"
:key :custom-color
:type :select
:options (map (fn [[k _]]
{:key k :value (string/capitalize (name k))})
colors/customization)}
{:label "Account name"
:key :account-name
:type :text}
{:label "Account address"
:key :account-address
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:custom-color :blue
:account-name "Booze for Dubai"
:account-address "0x21a ... 49e"
:avatar-icon :i/placeholder
:on-press-menu (fn []
(js/alert "Menu button pressed"))})]
(fn []
[rn/view
{:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 100
:align-items :center
:background-color (colors/theme-colors
colors/neutral-30
colors/neutral-95)}
[quo/account @state]]])))
(defn preview-accounts
[]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])