Account avatar component (#13700)

This commit is contained in:
Ibrahem Khalil 2022-10-17 13:58:52 +02:00 committed by GitHub
parent 62c6a0ea72
commit 094a7421c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 1 deletions

View File

@ -0,0 +1,45 @@
(ns quo2.components.avatars.account-avatar
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons]
[quo.theme :as theme]))
(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
80 16
48 12
32 10
24 8
20 6))
(defn get-inner-icon-sizes [size]
(case size
80 36
48 24
32 15
24 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))
avatar-border-radius (get-border-radius size)
inner-icon-size (get-inner-icon-sizes size)]
[rn/view {:style {:width size
:background-color icon-color
:height size
:border-radius avatar-border-radius
:justify-content :center
:align-items :center}}
[icons/icon icon
{:no-color true
:container-style {:width inner-icon-size
:height inner-icon-size}}]]))

View File

@ -0,0 +1,48 @@
(ns quo2.screens.avatars.account-avatar
(:require [reagent.core :as reagent]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo.design-system.colors :as colors]
[quo2.components.avatars.account-avatar :as quo2]))
(def descriptor [{:label "Icon"
:key :icon
:type :select
:options [{:key :main-icons/wallet
:value "Wallet"}
{:key :main-icons/token
:value "Token"}
{:key :main-icons/status
:value "Status"}]}
{:label "Size"
:key :size
:type :select
:options [{:key 20
:value "Small"}
{:key 24
:value "Medium"}
{:key 32
:value "Big"}
{:key 48
:value "Very big"}
{:key 80
:value "Seriously Big!"}]}])
(defn cool-preview []
(let [state (reagent/atom {:size 80
:icon :main-icons/wallet})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/account-avatar @state]]])))
(defn preview-account-avatar []
[rn/view {:background-color (:preview-background @colors/theme)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

View File

@ -48,6 +48,7 @@
[quo2.screens.wallet.network-breakdown :as network-breakdown]
[quo2.screens.wallet.network-amount :as network-amount]
[quo2.screens.navigation.page-nav :as page-nav]
[quo2.screens.avatars.account-avatar :as account-avatar]
[re-frame.core :as re-frame]))
(def screens-categories
@ -65,7 +66,10 @@
:component wallet-user-avatar/preview-wallet-user-avatar}
{:name :channel-avatar
:insets {:top false}
:component channel-avatar/preview-channel-avatar}]
:component channel-avatar/preview-channel-avatar}
{:name :account-avatar
:insets {:top false}
:component account-avatar/preview-account-avatar}]
:buttons [{:name :button
:insets {:top false}
:component button/preview-button}