Skip to content

Commit 1574e3a

Browse files
yqrashawnyqrashawn
committed
feat: customization-color for initial avatar
status-im/status-go@00f50a4...96f0490 Signed-off-by: yqrashawn <[email protected]>
1 parent 978c9ae commit 1574e3a

File tree

7 files changed

+82
-67
lines changed

7 files changed

+82
-67
lines changed

‎src/quo/components/avatars/user_avatar/view.cljs

+7-8
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
utils.string))
1212

1313
(defn initials-avatar
14-
[{:keys [full-name size customization-color theme]}]
14+
[{:keys [full-name size customization-color theme]
15+
:or {customization-color :blue}}]
1516
(let [font-size (get-in style/sizes [size :font-size])
1617
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
1718
[rn/view
@@ -30,13 +31,12 @@
3031
When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn`
3132
may have an `:override-ring?` value. If it does then the `:ring?` value will not be used.
3233
For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated."
33-
[{:keys [full-name size profile-picture customization-color static?
34+
[{:keys [full-name size profile-picture static?
3435
status-indicator? online? ring? theme]
35-
:or {size :big
36-
status-indicator? true
37-
online? true
38-
ring? true
39-
customization-color :blue}
36+
:or {size :big
37+
status-indicator? true
38+
online? true
39+
ring? true}
4040
:as props}]
4141
(let [full-name (or full-name "Your Name")
4242
;; image generated with `profile-picture-fn` is round cropped
@@ -76,7 +76,6 @@
7676
(:status-indicator-center-to-edge sizes))
7777
:indicator-color indicator-color
7878
:override-theme theme
79-
:background-color (style/customization-color customization-color theme)
8079
:color (:color style/initials-avatar-text)
8180
:size (:width outer-styles)
8281
:ring? ring?

‎src/schema/quo.cljs

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(ns schema.quo
22
(:require
3+
[quo.foundations.colors :as colors]
34
[schema.registry :as registry]))
45

56
(def ^:private ?profile-picture-fn-params
@@ -23,6 +24,9 @@
2324
[:map
2425
[:fn [:=> [:cat ?profile-picture-fn-params] :string]]]])
2526

27+
(def ^:private ?customization-color (into [:enum] colors/account-colors))
28+
2629
(defn register-schemas
2730
[]
28-
(registry/register ::profile-picture-source ?profile-picture-source))
31+
(registry/register ::profile-picture-source ?profile-picture-source)
32+
(registry/register ::customization-color ?customization-color))

‎src/status_im/contexts/chat/contacts/events.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
:bio (oops/oget js-contact "bio")
3131
:customization-color (-> js-contact
3232
(oops/oget "customizationColor")
33-
keyword)})
33+
keyword
34+
;; newly created accounts
35+
(or :blue))})
3436

3537
(defn prepare-events-for-contact
3638
[db chats-js]

‎src/status_im/subs/contact.cljs

+9-8
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
(defn- replace-contact-image-uri
3636
[contact port public-key font-file]
3737
(let [theme (theme/get-theme)
38-
{:keys [images ens-name]} contact
38+
{:keys [images ens-name customization-color]} contact
3939
images
4040
(reduce (fn [acc image]
4141
(let [image-name (:type image)
@@ -63,13 +63,14 @@
6363
images
6464
{:thumbnail
6565
{:fn (image-server/get-initials-avatar-uri-fn
66-
{:port port
67-
:ratio pixel-ratio/ratio
68-
:public-key public-key
69-
:override-ring? (when ens-name false)
70-
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
71-
:theme theme
72-
:font-file font-file})}})]
66+
{:port port
67+
:ratio pixel-ratio/ratio
68+
:public-key public-key
69+
:override-ring? (when ens-name false)
70+
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
71+
:customization-color customization-color
72+
:theme theme
73+
:font-file font-file})}})]
7374

7475
(assoc contact :images images)))
7576

‎src/status_im/subs/profile.cljs

+40-37
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@
6161
:<- [:mediaserver/port]
6262
:<- [:initials-avatar-font-file]
6363
(fn [[profiles port font-file] [_ target-key-uid]]
64-
(let [{:keys [images ens-name?] :as profile} (get profiles target-key-uid)
65-
image-name (-> images first :type)
66-
override-ring? (when ens-name? false)]
64+
(let [{:keys [images ens-name? customization-color] :as profile} (get profiles target-key-uid)
65+
image-name (-> images first :type)
66+
override-ring? (when ens-name? false)]
6767
(when profile
6868
{:fn
6969
(if image-name
@@ -74,13 +74,14 @@
7474
:theme (theme/get-theme)
7575
:override-ring? override-ring?})
7676
(image-server/get-initials-avatar-uri-fn
77-
{:port port
78-
:ratio pixel-ratio/ratio
79-
:key-uid target-key-uid
80-
:theme (theme/get-theme)
81-
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
82-
:override-ring? override-ring?
83-
:font-file font-file}))}))))
77+
{:port port
78+
:ratio pixel-ratio/ratio
79+
:key-uid target-key-uid
80+
:theme (theme/get-theme)
81+
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
82+
:customization-color customization-color
83+
:override-ring? override-ring?
84+
:font-file font-file}))}))))
8485

8586
(re-frame/reg-sub
8687
:multiaccount/public-key
@@ -305,33 +306,35 @@
305306

306307
(defn- replace-multiaccount-image-uri
307308
[profile ens-names port font-file avatar-opts]
308-
(let [{:keys [key-uid ens-name? images]} profile
309-
ens-name? (or ens-name? (seq ens-names))
310-
theme (theme/get-theme)
311-
avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false))
312-
images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}]
313-
(let [uri-fn (image-server/get-account-image-uri-fn
314-
(merge
315-
{:port port
316-
:ratio pixel-ratio/ratio
317-
:image-name image-name
318-
:key-uid key-uid
319-
:theme theme}
320-
avatar-opts))]
321-
(assoc image :fn uri-fn)))
322-
images)
323-
new-images (if (seq images-with-uri)
324-
images-with-uri
325-
[{:fn (image-server/get-initials-avatar-uri-fn
326-
(merge {:port port
327-
:ratio pixel-ratio/ratio
328-
:uppercase-ratio
329-
(:uppercase-ratio
330-
constants/initials-avatar-font-conf)
331-
:key-uid key-uid
332-
:theme theme
333-
:font-file font-file}
334-
avatar-opts))}])]
309+
(let [{:keys [key-uid ens-name? images
310+
customization-color]} profile
311+
ens-name? (or ens-name? (seq ens-names))
312+
theme (theme/get-theme)
313+
avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false))
314+
images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}]
315+
(let [uri-fn (image-server/get-account-image-uri-fn
316+
(merge
317+
{:port port
318+
:ratio pixel-ratio/ratio
319+
:image-name image-name
320+
:key-uid key-uid
321+
:theme theme}
322+
avatar-opts))]
323+
(assoc image :fn uri-fn)))
324+
images)
325+
new-images (if (seq images-with-uri)
326+
images-with-uri
327+
[{:fn (image-server/get-initials-avatar-uri-fn
328+
(merge {:port port
329+
:ratio pixel-ratio/ratio
330+
:uppercase-ratio
331+
(:uppercase-ratio
332+
constants/initials-avatar-font-conf)
333+
:key-uid key-uid
334+
:customization-color customization-color
335+
:theme theme
336+
:font-file font-file}
337+
avatar-opts))}])]
335338
(assoc profile :images new-images)))
336339

337340
(re-frame/reg-sub

‎src/utils/image_server.cljs

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(ns utils.image-server
22
(:require
3+
[quo.foundations.colors :as colors]
34
[react-native.fs :as utils.fs]
45
[react-native.platform :as platform]
56
[schema.core :as schema]
@@ -139,9 +140,10 @@
139140
check `get-font-file-ready` for `font-file`
140141
141142
`uppercase-ratio` is the uppercase-height/line-height for `font-file`"
142-
[{:keys [port public-key key-uid theme ring? length size background-color color
143-
font-size font-file uppercase-ratio indicator-size indicator-border
144-
indicator-center-to-edge indicator-color full-name ring-width ratio]}]
143+
[{:keys [port public-key key-uid theme ring? length size customization-color
144+
color font-size font-file uppercase-ratio indicator-size
145+
indicator-border indicator-center-to-edge indicator-color full-name
146+
ring-width ratio]}]
145147
(str
146148
image-server-uri-prefix
147149
port
@@ -155,7 +157,7 @@
155157
"&size="
156158
(Math/round (* size ratio))
157159
"&bgColor="
158-
(js/encodeURIComponent background-color)
160+
(js/encodeURIComponent (colors/resolve-color customization-color theme))
159161
"&color="
160162
(js/encodeURIComponent color)
161163
"&fontSize="
@@ -188,10 +190,11 @@
188190
[:cat
189191
[:map
190192
[:color string?]
191-
[:background-color string?]
193+
[:theme :schema.common/theme]
192194
[:size number?]
193195
[:ratio float?]
194196
[:uppercase-ratio number?]
197+
[:customization-color :schema.quo/customization-color]
195198
[:font-size number?]
196199
[:font-file string?]]]
197200
[:string]])
@@ -204,10 +207,11 @@
204207
check `get-font-file-ready` for `font-file`
205208
206209
check `get-account-image-uri-fn` for `override-ring?`"
207-
[{:keys [port public-key key-uid theme override-ring? font-file ratio uppercase-ratio]}]
208-
(fn [{:keys [full-name length size background-color font-size color
209-
indicator-size indicator-border indicator-color indicator-center-to-edge
210-
ring? ring-width override-theme]}]
210+
[{:keys [port public-key key-uid theme override-ring? font-file ratio
211+
uppercase-ratio customization-color]}]
212+
(fn [{:keys [full-name length size font-size color indicator-size indicator-border
213+
indicator-color indicator-center-to-edge ring? ring-width
214+
override-theme]}]
211215
(get-initials-avatar-uri
212216
{:port port
213217
:public-key public-key
@@ -216,7 +220,7 @@
216220
:full-name full-name
217221
:length length
218222
:size size
219-
:background-color background-color
223+
:customization-color customization-color
220224
:theme (if (nil? override-theme) theme override-theme)
221225
:ring? (if (nil? override-ring?) ring? override-ring?)
222226
:ring-width ring-width

‎src/utils/image_server_test.cljs

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(ns utils.image-server-test
22
(:require
33
[cljs.test :as t]
4+
[quo.foundations.colors :as colors]
45
[utils.image-server :as sut]))
56

67
(t/deftest get-account-image-uri
@@ -25,6 +26,7 @@
2526
(t/deftest get-account-initials-uri
2627
(with-redefs
2728
[sut/current-theme-index identity
29+
colors/resolve-color str
2830
sut/timestamp (constantly "timestamp")]
2931
(t/is
3032
(=
@@ -38,7 +40,7 @@
3840
:size 48
3941
:theme :light
4042
:ring? "ring?"
41-
:background-color "background-color"
43+
:customization-color :blue
4244
:color "#0E162000"
4345
:font-size 12
4446
:font-file "/font/Inter Medium.otf"
@@ -47,4 +49,4 @@
4749
:indicator-center-to-edge 6
4850
:indicator-color "#0E1620"
4951
:ring-width 4})
50-
"https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=background-color&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))
52+
"https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=%3Ablue%3Alight&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))

0 commit comments

Comments
 (0)