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

Fix: User-avatar indicator size/position (#17110) 

### Commit Summary
Figma https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=107-5264&mode=design&t=3IlYad4D0crAiVcf-4

Affected all avatars with status indicator
32x32

Signed-off-by: yqrashawn <namy.19@gmail.com>
Co-authored-by: Flavio Fraschetti <flavio@status.im>
This commit is contained in:
yqrashawn 2023-09-08 00:45:23 +08:00 committed by GitHub
parent cd1bd1c211
commit a05156c645
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 173 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

32
src/quo2/components/avatars/user_avatar/view.cljs
View File

@ -83,21 +83,23 @@
:source :source
(cond profile-picture-fn (cond profile-picture-fn
{:uri (profile-picture-fn {:uri (profile-picture-fn
{:length amount-initials {:length amount-initials
:full-name full-name :full-name full-name
:font-size (:font-size (text/text-style {:size :font-size (:font-size (text/text-style {:size
font-size})) font-size}))
:indicator-size (when status-indicator? :indicator-size (when status-indicator?
(:status-indicator sizes)) (:status-indicator sizes))
:indicator-border (when status-indicator? :indicator-border (when status-indicator?
(:status-indicator-border sizes)) (:status-indicator-border sizes))
:indicator-color indicator-color :indicator-center-to-edge (when status-indicator?
:override-theme theme (:status-indicator-center-to-edge sizes))
:background-color (style/customization-color customization-color theme) :indicator-color indicator-color
:color (:color style/initials-avatar-text) :override-theme theme
:size (:width outer-styles) :background-color (style/customization-color customization-color theme)
:ring? ring? :color (:color style/initials-avatar-text)
:ring-width (:ring-width sizes)})} :size (:width outer-styles)
:ring? ring?
:ring-width (:ring-width sizes)})}
(:uri profile-picture) (:uri profile-picture)
profile-picture profile-picture

152
src/utils/image_server.cljs
View File

@ -71,7 +71,8 @@
`indicator-size` is outer indicator radius `indicator-size` is outer indicator radius
`indicator-size` - `indicator-border` is inner indicator radius" `indicator-size` - `indicator-border` is inner indicator radius"
[{:keys [port public-key image-name key-uid size theme indicator-size [{:keys [port public-key image-name key-uid size theme indicator-size
indicator-border indicator-color ring? ring-width]}] indicator-border indicator-center-to-edge indicator-color ring?
ring-width]}]
(str (str
image-server-uri-prefix image-server-uri-prefix
port port
@ -94,6 +95,8 @@
(* indicator-size status-im2.common.pixel-ratio/ratio) (* indicator-size status-im2.common.pixel-ratio/ratio)
"&indicatorBorder=" "&indicatorBorder="
(* indicator-border status-im2.common.pixel-ratio/ratio) (* indicator-border status-im2.common.pixel-ratio/ratio)
"&indicatorCenterToEdge="
(* indicator-center-to-edge status-im2.common.pixel-ratio/ratio)
"&addRing=" "&addRing="
(if ring? 1 0) (if ring? 1 0)
"&ringWidth=" "&ringWidth="
@ -111,20 +114,21 @@
check `get-account-image-uri` for color formats" check `get-account-image-uri` for color formats"
[{:keys [port public-key key-uid image-name theme override-ring?]}] [{:keys [port public-key key-uid image-name theme override-ring?]}]
(fn [{:keys [size indicator-size indicator-border indicator-color ring? (fn [{:keys [size indicator-size indicator-border indicator-center-to-edge
ring-width override-theme]}] indicator-color ring? ring-width override-theme]}]
(get-account-image-uri (get-account-image-uri
{:port port {:port port
:image-name image-name :image-name image-name
:size size :size size
:public-key public-key :public-key public-key
:key-uid key-uid :key-uid key-uid
:theme (if (nil? override-theme) theme override-theme) :theme (if (nil? override-theme) theme override-theme)
:indicator-size indicator-size :indicator-size indicator-size
:indicator-border indicator-border :indicator-border indicator-border
:indicator-color indicator-color :indicator-center-to-edge indicator-center-to-edge
:ring? (if (nil? override-ring?) ring? override-ring?) :indicator-color indicator-color
:ring-width ring-width}))) :ring? (if (nil? override-ring?) ring? override-ring?)
:ring-width ring-width})))
(defn get-initials-avatar-uri (defn get-initials-avatar-uri
"fn to get the avatar uri when account/contact/placeholder has no custom pic set "fn to get the avatar uri when account/contact/placeholder has no custom pic set
@ -139,7 +143,7 @@
`uppercase-ratio` is the uppercase-height/line-height for `font-file`" `uppercase-ratio` is the uppercase-height/line-height for `font-file`"
[{:keys [port public-key key-uid theme ring? length size background-color color [{:keys [port public-key key-uid theme ring? length size background-color color
font-size font-file uppercase-ratio indicator-size indicator-border font-size font-file uppercase-ratio indicator-size indicator-border
indicator-color full-name ring-width]}] indicator-center-to-edge indicator-color full-name ring-width]}]
(str (str
image-server-uri-prefix image-server-uri-prefix
port port
@ -174,6 +178,8 @@
(* indicator-size status-im2.common.pixel-ratio/ratio) (* indicator-size status-im2.common.pixel-ratio/ratio)
"&indicatorBorder=" "&indicatorBorder="
(* indicator-border status-im2.common.pixel-ratio/ratio) (* indicator-border status-im2.common.pixel-ratio/ratio)
"&indicatorCenterToEdge="
(* indicator-center-to-edge status-im2.common.pixel-ratio/ratio)
"&addRing=" "&addRing="
(if ring? 1 0) (if ring? 1 0)
"&ringWidth=" "&ringWidth="
@ -189,68 +195,74 @@
check `get-account-image-uri-fn` for `override-ring?`" check `get-account-image-uri-fn` for `override-ring?`"
[{:keys [port public-key key-uid theme override-ring? font-file]}] [{:keys [port public-key key-uid theme override-ring? font-file]}]
(fn [{:keys [full-name length size background-color font-size color (fn [{:keys [full-name length size background-color font-size color
indicator-size indicator-border indicator-color ring? ring-width indicator-size indicator-border indicator-color indicator-center-to-edge
override-theme]}] ring? ring-width override-theme]}]
(get-initials-avatar-uri (get-initials-avatar-uri
{:port port {:port port
:public-key public-key :public-key public-key
:key-uid key-uid :key-uid key-uid
:full-name full-name :full-name full-name
:length length :length length
:size size :size size
:background-color background-color :background-color background-color
:theme (if (nil? override-theme) theme override-theme) :theme (if (nil? override-theme) theme override-theme)
:ring? (if (nil? override-ring?) ring? override-ring?) :ring? (if (nil? override-ring?) ring? override-ring?)
:ring-width ring-width :ring-width ring-width
:font-size font-size :font-size font-size
:color color :color color
:font-file font-file :font-file font-file
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:indicator-size indicator-size :indicator-size indicator-size
:indicator-border indicator-border :indicator-border indicator-border
:indicator-color indicator-color}))) :indicator-center-to-edge indicator-center-to-edge
:indicator-color indicator-color})))
(defn get-contact-image-uri (defn get-contact-image-uri
[{:keys [port public-key image-name clock theme indicator-size indicator-border [{:keys [port public-key image-name clock theme indicator-size indicator-border
indicator-color size ring? ring-width]}] indicator-center-to-edge indicator-color size ring? ring-width]}]
(str image-server-uri-prefix (str
port image-server-uri-prefix
contact-images-action port
"?publicKey=" contact-images-action
public-key "?publicKey="
"&imageName=" public-key
image-name "&imageName="
"&size=" image-name
(Math/round (* size status-im2.common.pixel-ratio/ratio)) "&size="
"&theme=" (Math/round (* size status-im2.common.pixel-ratio/ratio))
(current-theme-index theme) "&theme="
"&clock=" (current-theme-index theme)
clock "&clock="
"&indicatorColor=" clock
(js/encodeURIComponent indicator-color) "&indicatorColor="
"&indicatorSize=" (js/encodeURIComponent indicator-color)
(* indicator-size status-im2.common.pixel-ratio/ratio) "&indicatorSize="
"&indicatorBorder=" (* indicator-size status-im2.common.pixel-ratio/ratio)
(* indicator-border status-im2.common.pixel-ratio/ratio) "&indicatorBorder="
"&addRing=" (* indicator-border status-im2.common.pixel-ratio/ratio)
(if ring? 1 0) "&indicatorCenterToEdge="
"&ringWidth=" (* indicator-center-to-edge status-im2.common.pixel-ratio/ratio)
(* ring-width status-im2.common.pixel-ratio/ratio))) "&addRing="
(if ring? 1 0)
"&ringWidth="
(* ring-width status-im2.common.pixel-ratio/ratio)))
(defn get-contact-image-uri-fn (defn get-contact-image-uri-fn
[{:keys [port public-key image-name theme override-ring? clock]}] [{:keys [port public-key image-name theme override-ring? clock]}]
(fn [{:keys [size indicator-size indicator-border indicator-color ring? ring-width override-theme]}] (fn [{:keys [size indicator-size indicator-border indicator-center-to-edge
(get-contact-image-uri {:port port indicator-color ring? ring-width override-theme]}]
:image-name image-name (get-contact-image-uri {:port port
:public-key public-key :image-name image-name
:size size :public-key public-key
:theme (if (nil? override-theme) theme override-theme) :size size
:clock clock :theme (if (nil? override-theme) theme override-theme)
:indicator-size indicator-size :clock clock
:indicator-border indicator-border :indicator-size indicator-size
:indicator-color indicator-color :indicator-border indicator-border
:ring? (if (nil? override-ring?) ring? override-ring?) :indicator-center-to-edge indicator-center-to-edge
:ring-width ring-width}))) :indicator-color indicator-color
:ring? (if (nil? override-ring?) ring? override-ring?)
:ring-width ring-width})))
(defn get-account-qr-image-uri (defn get-account-qr-image-uri
[{:keys [key-uid public-key port qr-size]}] [{:keys [key-uid public-key port qr-size]}]

56
src/utils/image_server_test.cljs
View File

@ -10,16 +10,17 @@
sut/timestamp (constantly "timestamp")] sut/timestamp (constantly "timestamp")]
(t/is (t/is
(= (=
(sut/get-account-image-uri {:port "port" (sut/get-account-image-uri {:port "port"
:public-key "public-key" :public-key "public-key"
:image-name "image-name" :image-name "image-name"
:key-uid "key-uid" :key-uid "key-uid"
:theme :dark :theme :dark
:indicator-size 2 :indicator-size 2
:indicator-color "rgba(9,16,28,0.08)" :indicator-color "rgba(9,16,28,0.08)"
:ring? true :indicator-center-to-edge 6
:ring-width 2}) :ring? true
"https://localhost:port/accountImages?publicKey=public-key&keyUid=key-uid&imageName=image-name&size=0&theme=:dark&clock=timestamp&indicatorColor=rgba(9%2C16%2C28%2C0.08)&indicatorSize=4&indicatorBorder=0&addRing=1&ringWidth=4")))) :ring-width 2})
"https://localhost:port/accountImages?publicKey=public-key&keyUid=key-uid&imageName=image-name&size=0&theme=:dark&clock=timestamp&indicatorColor=rgba(9%2C16%2C28%2C0.08)&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=4"))))
(t/deftest get-account-initials-uri (t/deftest get-account-initials-uri
(with-redefs (with-redefs
@ -29,20 +30,21 @@
(t/is (t/is
(= (=
(sut/get-initials-avatar-uri (sut/get-initials-avatar-uri
{:port "port" {:port "port"
:public-key "public-key" :public-key "public-key"
:key-uid "key-uid" :key-uid "key-uid"
:full-name "full-name" :full-name "full-name"
:length "length" :length "length"
:size 48 :size 48
:theme :light :theme :light
:ring? "ring?" :ring? "ring?"
:background-color "background-color" :background-color "background-color"
:color "#0E162000" :color "#0E162000"
:font-size 12 :font-size 12
:font-file "/font/Inter Medium.otf" :font-file "/font/Inter Medium.otf"
:uppercase-ratio "uppercase-ratio" :uppercase-ratio "uppercase-ratio"
:indicator-size 2 :indicator-size 2
:indicator-color "#0E1620" :indicator-center-to-edge 6
:ring-width 4}) :indicator-color "#0E1620"
"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=uppercase-ratio&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&addRing=1&ringWidth=8")))) :ring-width 4})
"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=uppercase-ratio&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>", "_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im", "owner": "status-im",
"repo": "status-go", "repo": "status-go",
"version": "v0.166.6", "version": "fix/avatar-status-indicator-position",
"commit-sha1": "3e53eabe4ba7b3135ffc920ba135075c5e299154", "commit-sha1": "af14657fa199270d8e71685f348b5a450d5bfd24",
"src-sha256": "1fdjhq0r40wdx0klyqiaww584mbax70dqvhm81yc4yxc8spr18lw" "src-sha256": "1jx7q52wb5ci1xzhwyd8maxsdshwam9wn53d8i8gky814csnxqvw"
} }