parent
110debc4c4
commit
5493d059b9
|
@ -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]
|
||||
[{:keys [size icon color]
|
||||
:or {size 80
|
||||
icon :main-icons/placeholder}}]
|
||||
(let [icon-color (if (theme/dark?)
|
||||
(:dark icon-color-value)
|
||||
(:light icon-color-value))
|
||||
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
|
||||
|
|
|
@ -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})
|
|
@ -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]]])
|
|
@ -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)
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}]])
|
Loading…
Reference in New Issue