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

[#17220] - New 64 avatars size (#17283) 

* Add 64 size for user-avatar

* Add 64 size for channel-avatar

* Add 64 size for account-avatar

* Add 64 size for wallet-avatar
This commit is contained in:
Ulises Manuel 2023-09-29 03:48:02 -06:00 committed by GitHub
parent 1c31127a6f
commit af1942dff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 125 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/quo2/components/avatars/account_avatar/style.cljs
View File

@ -6,16 +6,20 @@
(def default-padding 16)
(def default-emoji-size 36)
(def ^:private container-size
{:size-64 64})
(defn get-border-radius
[size]
(case size
80 16
48 12
32 10
28 8
24 8
20 6
16 4
80 16
:size-64 16
48 12
32 10
28 8
24 8
20 6
16 4
default-border-radius))
(defn get-padding
@ -33,29 +37,32 @@
(defn get-emoji-size
[size]
(case size
80 36
48 24
32 15
28 12
24 11
20 11
16 11
80 36
:size-64 30
48 24
32 15
28 12
24 11
20 11
16 11
default-emoji-size))
(defn get-border-width
[size]
(case size
16 0.8 ;; 0.8 px is for only size 16
;; Rest of the size will have 1 px
1))
(if (= size 16)
0.8 ;; 0.8 px is for only size 16
1)) ;; Rest of the size will have 1 px
(defn root-container
[{:keys [type size theme customization-color]
:or {size default-size
customization-color :blue}}]
(let [watch-only? (= type :watch-only)]
(cond-> {:width size
:height size
(let [watch-only? (= type :watch-only)
width (cond-> size
(keyword? size) (container-size size))]
(cond-> {:width width
:height width
:background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
:border-radius (get-border-radius size)
:border-color (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)

4
src/quo2/components/avatars/channel_avatar/component_spec.cljs
View File

@ -11,7 +11,7 @@
(h/test "with emoji, no lock set, large size"
(let [emoji "🍓"]
(h/render [component/view {:emoji emoji :size :size/l}])
(h/render [component/view {:emoji emoji :size :size-32}])
(h/is-null (h/query-by-label-text :initials))
(h/is-truthy (h/query-by-text emoji))
(h/is-null (h/query-by-label-text :lock))))
@ -31,5 +31,5 @@
(h/test "no emoji, large size"
(h/render [component/view
{:full-name "Status Mobile"
:size :size/l}])
:size :size-32}])
(h/is-truthy (h/query-by-text "SM"))))

20
src/quo2/components/avatars/channel_avatar/style.cljs
View File

@ -5,17 +5,27 @@
(defn outer-container
[{:keys [size color]}]
(let [size (if (= size :size/l) 32 24)]
{:width size
:height size
:border-radius size
(let [container-size (case size
:size-64 64
:size-32 32
24)]
{:width container-size
:height container-size
:border-radius container-size
:justify-content :center
:align-items :center
:background-color (colors/theme-alpha color 0.1 0.1)}))
(defn emoji-size
[size]
{:font-size (case size
:size-64 24
:size-32 15
11)})
(defn lock-container
[size]
(let [distance (if (= size :size/l) 20 12)]
(let [distance (if (= size :size-32) 20 12)]
{:position :absolute
:left distance
:top distance

20
src/quo2/components/avatars/channel_avatar/view.cljs
View File

@ -5,17 +5,19 @@
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
utils.string))
[utils.string]))
(defn- initials
[full-name size color]
(let [amount-initials (if (= size :size/l) 2 1)
(let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
channel-name (string/replace full-name "#" "")]
[text/text
{:accessibility-label :initials
:size :paragraph-2
:weight :semi-bold
:style {:color color}}
(cond-> {:accessibility-label :initials
:style {:color color}
:size :paragraph-2
:weight :semi-bold}
(= size :size-64) (assoc :size :heading-1
:weight :medium))
(utils.string/get-initials channel-name amount-initials)]))
(defn- lock
@ -54,8 +56,8 @@
:style (style/outer-container {:size size :color customization-color})}
(if (string/blank? emoji)
[initials full-name size customization-color]
[text/text
{:accessibility-label :emoji
:size (if (= size :size/l) :paragraph-1 :label)}
[rn/text
{:style (style/emoji-size size)
:accessibility-label :emoji}
(string/trim emoji)])
[lock locked? size]])

90
src/quo2/components/avatars/user_avatar/style.cljs
View File

@ -2,48 +2,54 @@
(:require [quo2.foundations.colors :as colors]))
(def sizes
{:big {:dimensions 80
:status-indicator 12
:status-indicator-border 4
:status-indicator-center-to-edge 12
:font-size :heading-1
:ring-width 4}
:medium {:dimensions 48
:status-indicator 8
:status-indicator-border 2
:status-indicator-center-to-edge 6
:font-size :heading-2
:ring-width 2}
:small {:dimensions 32
:status-indicator 8
:status-indicator-border 2
:status-indicator-center-to-edge 4
:font-size :paragraph-2
:ring-width 2}
28 {:dimensions 28
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :paragraph-2
:ring-width 0}
:xs {:dimensions 24
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :paragraph-2
:ring-width 2}
:xxs {:dimensions 20
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :label
:ring-width 2}
:xxxs {:dimensions 16
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :label
:ring-width 2}})
{:big {:dimensions 80
:status-indicator 12
:status-indicator-border 4
:status-indicator-center-to-edge 12
:font-size :heading-1
:ring-width 4}
:size-64 {:dimensions 64
:status-indicator 8
:status-indicator-border 2
:status-indicator-center-to-edge 6
:font-size :heading-1
:ring-width 2}
:medium {:dimensions 48
:status-indicator 8
:status-indicator-border 2
:status-indicator-center-to-edge 6
:font-size :heading-2
:ring-width 2}
:small {:dimensions 32
:status-indicator 8
:status-indicator-border 2
:status-indicator-center-to-edge 4
:font-size :paragraph-2
:ring-width 2}
28 {:dimensions 28
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :paragraph-2
:ring-width 0}
:xs {:dimensions 24
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :paragraph-2
:ring-width 2}
:xxs {:dimensions 20
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :label
:ring-width 2}
:xxxs {:dimensions 16
:status-indicator 0
:status-indicator-border 0
:status-indicator-center-to-edge 0
:font-size :label
:ring-width 2}})
(defn initials-avatar
[size customization-color theme]

3
src/quo2/components/avatars/wallet_user_avatar.cljs
View File

@ -8,18 +8,21 @@
{: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 wallet-user-avatar

2
src/quo2/components/list_items/channel/view.cljs
View File

@ -38,7 +38,7 @@
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)}
[channel-avatar/view
{:size :size/l
{:size :size-32
:locked? locked?
:full-name name
:customization-color customization-color

28
src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs
View File

@ -11,21 +11,16 @@
{:key :watch-only}]}
{:key :size
:type :select
:options [{:key 16
:value "16"}
{:key 20
:value "20"}
{:key 24
:value "24"}
{:key 28
:value "28"}
{:key 32
:value "32"}
{:key 48
:value "48"}
{:key 80
:value "80"}]}
{:key :emoji :type :text}
:options [{:key 16}
{:key 20}
{:key 24}
{:key 28}
{:key 32}
{:key 48}
{:key :size-64}
{:key 80}]}
{:key "Emoji"
:type :text}
(preview/customization-color-option)])
(defn view
@ -40,7 +35,8 @@
:descriptor descriptor
:component-container-style {:align-items :center
:justify-content :center}}
[quo/account-avatar @state]
[quo/account-avatar @state
]
[quo/button
{:type :grey
:container-style {:margin-top 30}

5
src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
View File

@ -7,7 +7,8 @@
(def descriptor
[{:key :size
:type :select
:options [{:key :size/l :value "Large"}
:options [{:key :size-64}
{:key :size-32}
{:key :default}]}
{:key :emoji
:type :text}
@ -22,7 +23,7 @@
(defn view
[]
(let [state (reagent/atom {:size :size/l
(let [state (reagent/atom {:size :size-32
:locked-state :not-set
:emoji "🍑"
:full-name "Some channel"

1
src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs
View File

@ -8,6 +8,7 @@
[{:key :size
:type :select
:options [{:key :big}
{:key :size-64}
{:key :medium}
{:key :small}
{:key :xs}

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

@ -15,6 +15,7 @@
:options [{:key :small}
{:key :medium}
{:key :large}
{:key :size-64}
{:key :x-large
:value "X Large"}]}
(preview/customization-color-option {:key :color})])