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

Implement wallet user avatar to match designs (#17703)

This commit is contained in:
Alex Tumanov 2023-11-02 19:29:09 +00:00 committed by GitHub
parent 9a5ed62e1f
commit 0eef5204c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 116 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/quo/components/avatars/wallet_user_avatar.cljs
View File

@ -1,68 +0,0 @@
(ns quo.components.avatars.wallet-user-avatar
(:require
[clojure.string :as string]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
(def circle-sizes
{:small 20
:medium 32
:large 48
:size-64 64
:x-large 80})
(def font-sizes
{:small :label
:medium :paragraph-2
:large :paragraph-1
:size-64 :heading-1
:x-large :heading-1})
(def font-weights
{:small :medium
:medium :semi-bold
:large :semi-bold
:size-64 :medium
:x-large :medium})
(defn- view-internal
"params, first name, last name, customization-color, size
and if it's dark or not!"
[{:keys [f-name l-name customization-color size theme monospace? uppercase?]
:or {f-name "John"
l-name "Doe"
size :x-large
uppercase? true}}]
(let [circle-size (size circle-sizes)
small? (= size :small)
f-name-initial (-> f-name
(#(if uppercase? (string/upper-case %) %))
(subs 0 1))
l-name-initial (-> l-name
(#(if uppercase? (string/upper-case %) %))
(subs 0 1))
circle-color (if customization-color
(colors/resolve-color customization-color theme 20)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
text-color (if customization-color
(colors/resolve-color customization-color theme)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
[rn/view
{:style {:width circle-size
:height circle-size
:border-radius circle-size
:text-align :center
:justify-content :center
:align-items :center
:background-color circle-color}}
[text/text
{:size (size font-sizes)
:weight (if monospace? :monospace (size font-weights))
:style {:color text-color}}
(if small?
(str f-name-initial)
(str f-name-initial l-name-initial))]]))
(def wallet-user-avatar (quo.theme/with-theme view-internal))

16
src/quo/components/avatars/wallet_user_avatar/component_spec.cljs Normal file
View File

@ -0,0 +1,16 @@
(ns quo.components.avatars.wallet-user-avatar.component-spec
(:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
[test-helpers.component :as h]))
(h/describe "wallet user avatar"
(h/describe "View internal"
(h/test "Renders by default even with no input parameters"
(h/render
[wallet-user-avatar/wallet-user-avatar {}])
(h/is-truthy (h/query-by-label-text :wallet-user-avatar)))
(h/test "Renders user’s initials when full name is provided"
(h/render
[wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}])
(h/is-truthy (h/get-by-text "JS")))))

27
src/quo/components/avatars/wallet_user_avatar/style.cljs Normal file
View File

@ -0,0 +1,27 @@
(ns quo.components.avatars.wallet-user-avatar.style
(:require [quo.foundations.colors :as colors]))
(defn- circle-color
[customization-color]
(colors/custom-color customization-color 50 20))
(defn- text-color
[customization-color theme]
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(defn container
[circle-size customization-color]
{:width circle-size
:height circle-size
:border-radius circle-size
:text-align :center
:justify-content :center
:align-items :center
:background-color (circle-color customization-color)})
(defn text
[customization-color theme]
{:color (text-color customization-color theme)})

57
src/quo/components/avatars/wallet_user_avatar/view.cljs Normal file
View File

@ -0,0 +1,57 @@
(ns quo.components.avatars.wallet-user-avatar.view
(:require [quo.components.avatars.wallet-user-avatar.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as quo.theme]
[react-native.core :as rn]
utils.string))
(def properties
{:size-20 {:size 20
:font-size :label
:font-weight :medium}
:size-24 {:size 24
:font-size :label
:font-weight :semi-bold}
:size-32 {:size 32
:font-size :paragraph-2
:font-weight :semi-bold}
:size-48 {:size 48
:font-size :paragraph-1
:font-weight :semi-bold}
:size-64 {:size 64
:font-size :paragraph-1
:font-weight :medium}
:size-80 {:size 80
:font-size :heading-1
:font-weight :medium}})
(def smallest-possible (first (keys properties)))
(def second-smallest-possible (second (keys properties)))
(defn check-if-size-small
[size]
(or (= size smallest-possible)
(= size second-smallest-possible)))
(def biggest-possible (last (keys properties)))
(defn- view-internal
"Options:
:full-name - string (default: nil) - used to generate initials
:customization-color - keyword (default: nil) - color of the avatar
:size - keyword (default: last element of properties object) - size of the
avatar
:monospace? - boolean (default: false) - use monospace font"
[{:keys [full-name customization-color size theme monospace?]
:or {size biggest-possible}}]
(let [circle-size (:size (size properties))
small? (check-if-size-small size)]
[rn/view
{:style (style/container circle-size customization-color)}
[text/text
{:accessibility-label :wallet-user-avatar
:size (:font-size (size properties))
:weight (if monospace? :monospace (:font-weight (size properties)))
:style (style/text customization-color theme)}
(utils.string/get-initials full-name (if small? 1 2))]]))
(def wallet-user-avatar (quo.theme/with-theme view-internal))

2
src/quo/components/list_items/address/view.cljs
View File

@ -1,7 +1,7 @@
(ns quo.components.list-items.address.view
(:require
[clojure.string :as string]
[quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
[quo.components.list-items.address.style :as style]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]

2
src/quo/components/list_items/saved_address/view.cljs
View File

@ -1,7 +1,7 @@
(ns quo.components.list-items.saved-address.view
(:require
[clojure.string :as string]
[quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
[quo.components.icon :as icon]
[quo.components.list-items.saved-address.style :as style]
[quo.components.markdown.text :as text]

2
src/quo/components/share/qr_code/view.cljs
View File

@ -3,7 +3,7 @@
[quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.avatars.channel-avatar.view :as channel-avatar]
[quo.components.avatars.user-avatar.view :as user-avatar]
[quo.components.avatars.wallet-user-avatar :as wallet-avatar]
[quo.components.avatars.wallet-user-avatar.view :as wallet-avatar]
[quo.components.share.qr-code.style :as style]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))

4
src/quo/core.cljs
View File

@ -7,7 +7,7 @@
quo.components.avatars.group-avatar.view
quo.components.avatars.icon-avatar
quo.components.avatars.user-avatar.view
quo.components.avatars.wallet-user-avatar
quo.components.avatars.wallet-user-avatar.view
quo.components.banners.banner.view
quo.components.browser.browser-input.view
quo.components.buttons.button.view
@ -159,7 +159,7 @@
(def group-avatar quo.components.avatars.group-avatar.view/view)
(def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
(def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar)
(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
;;;; Banner
(def banner quo.components.banners.banner.view/view)

27
src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
View File

@ -5,28 +5,23 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "First name"
:key :f-name
:type :text}
{:label "Last name"
:key :l-name
:type :text}
[{:key :full-name
:type :text}
{:key :size
:type :select
:options [{:key :small}
{:key :medium}
{:key :large}
:options [{:key :size-20}
{:key :size-24}
{:key :size-32}
{:key :size-48}
{:key :size-64}
{:key :x-large
:value "X Large"}]}
(preview/customization-color-option {:key :customization-color})])
{:key :size-80}]}
(preview/customization-color-option)])
(defn view
[]
(let [state (reagent/atom {:first-name "empty"
:last-name "name"
:size :x-large
:customization-color :indigo})]
(let [state (reagent/atom {:full-name "empty name"
:size :size-80
:customization-color :blue})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/wallet-user-avatar @state]])))