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
GitHub
parent
cd1bd1c211
commit
a05156c645
|
|
@ -2,41 +2,48 @@
|
|||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def sizes
|
||||
{:big {:dimensions 80
|
||||
:status-indicator 20
|
||||
:status-indicator-border 4
|
||||
:font-size :heading-1
|
||||
:ring-width 4}
|
||||
:medium {:dimensions 48
|
||||
:status-indicator 12
|
||||
:status-indicator-border 2
|
||||
:font-size :heading-2
|
||||
:ring-width 2}
|
||||
:small {:dimensions 32
|
||||
:status-indicator 12
|
||||
:status-indicator-border 2
|
||||
:font-size :paragraph-2
|
||||
:ring-width 2}
|
||||
28 {:dimensions 28
|
||||
:status-indicator 0
|
||||
:status-indicator-border 0
|
||||
:font-size :paragraph-2
|
||||
:ring-width 0}
|
||||
:xs {:dimensions 24
|
||||
:status-indicator 0
|
||||
:status-indicator-border 0
|
||||
:font-size :paragraph-2
|
||||
:ring-width 2}
|
||||
:xxs {:dimensions 20
|
||||
:status-indicator 0
|
||||
:status-indicator-border 0
|
||||
:font-size :label
|
||||
:ring-width 2}
|
||||
:xxxs {:dimensions 16
|
||||
:status-indicator 0
|
||||
:status-indicator-border 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}
|
||||
: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]
|
||||
|
|
|
|||
|
|
@ -83,21 +83,23 @@
|
|||
:source
|
||||
(cond profile-picture-fn
|
||||
{:uri (profile-picture-fn
|
||||
{:length amount-initials
|
||||
:full-name full-name
|
||||
:font-size (:font-size (text/text-style {:size
|
||||
font-size}))
|
||||
:indicator-size (when status-indicator?
|
||||
(:status-indicator sizes))
|
||||
:indicator-border (when status-indicator?
|
||||
(:status-indicator-border sizes))
|
||||
:indicator-color indicator-color
|
||||
:override-theme theme
|
||||
:background-color (style/customization-color customization-color theme)
|
||||
:color (:color style/initials-avatar-text)
|
||||
:size (:width outer-styles)
|
||||
:ring? ring?
|
||||
:ring-width (:ring-width sizes)})}
|
||||
{:length amount-initials
|
||||
:full-name full-name
|
||||
:font-size (:font-size (text/text-style {:size
|
||||
font-size}))
|
||||
:indicator-size (when status-indicator?
|
||||
(:status-indicator sizes))
|
||||
:indicator-border (when status-indicator?
|
||||
(:status-indicator-border sizes))
|
||||
:indicator-center-to-edge (when status-indicator?
|
||||
(:status-indicator-center-to-edge sizes))
|
||||
:indicator-color indicator-color
|
||||
:override-theme theme
|
||||
:background-color (style/customization-color customization-color theme)
|
||||
:color (:color style/initials-avatar-text)
|
||||
:size (:width outer-styles)
|
||||
:ring? ring?
|
||||
:ring-width (:ring-width sizes)})}
|
||||
(:uri profile-picture)
|
||||
profile-picture
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@
|
|||
`indicator-size` is outer indicator radius
|
||||
`indicator-size` - `indicator-border` is inner indicator radius"
|
||||
[{: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
|
||||
image-server-uri-prefix
|
||||
port
|
||||
|
|
@ -94,6 +95,8 @@
|
|||
(* indicator-size status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorBorder="
|
||||
(* indicator-border status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorCenterToEdge="
|
||||
(* indicator-center-to-edge status-im2.common.pixel-ratio/ratio)
|
||||
"&addRing="
|
||||
(if ring? 1 0)
|
||||
"&ringWidth="
|
||||
|
|
@ -111,20 +114,21 @@
|
|||
|
||||
check `get-account-image-uri` for color formats"
|
||||
[{:keys [port public-key key-uid image-name theme override-ring?]}]
|
||||
(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
|
||||
indicator-color ring? ring-width override-theme]}]
|
||||
(get-account-image-uri
|
||||
{:port port
|
||||
:image-name image-name
|
||||
:size size
|
||||
:public-key public-key
|
||||
:key-uid key-uid
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-color indicator-color
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width})))
|
||||
{:port port
|
||||
:image-name image-name
|
||||
:size size
|
||||
:public-key public-key
|
||||
:key-uid key-uid
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-center-to-edge indicator-center-to-edge
|
||||
:indicator-color indicator-color
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width})))
|
||||
|
||||
(defn get-initials-avatar-uri
|
||||
"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`"
|
||||
[{:keys [port public-key key-uid theme ring? length size background-color color
|
||||
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
|
||||
image-server-uri-prefix
|
||||
port
|
||||
|
|
@ -174,6 +178,8 @@
|
|||
(* indicator-size status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorBorder="
|
||||
(* indicator-border status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorCenterToEdge="
|
||||
(* indicator-center-to-edge status-im2.common.pixel-ratio/ratio)
|
||||
"&addRing="
|
||||
(if ring? 1 0)
|
||||
"&ringWidth="
|
||||
|
|
@ -189,68 +195,74 @@
|
|||
check `get-account-image-uri-fn` for `override-ring?`"
|
||||
[{:keys [port public-key key-uid theme override-ring? font-file]}]
|
||||
(fn [{:keys [full-name length size background-color font-size color
|
||||
indicator-size indicator-border indicator-color ring? ring-width
|
||||
override-theme]}]
|
||||
indicator-size indicator-border indicator-color indicator-center-to-edge
|
||||
ring? ring-width override-theme]}]
|
||||
(get-initials-avatar-uri
|
||||
{:port port
|
||||
:public-key public-key
|
||||
:key-uid key-uid
|
||||
:full-name full-name
|
||||
:length length
|
||||
:size size
|
||||
:background-color background-color
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width
|
||||
:font-size font-size
|
||||
:color color
|
||||
:font-file font-file
|
||||
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-color indicator-color})))
|
||||
{:port port
|
||||
:public-key public-key
|
||||
:key-uid key-uid
|
||||
:full-name full-name
|
||||
:length length
|
||||
:size size
|
||||
:background-color background-color
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width
|
||||
:font-size font-size
|
||||
:color color
|
||||
:font-file font-file
|
||||
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-center-to-edge indicator-center-to-edge
|
||||
:indicator-color indicator-color})))
|
||||
|
||||
(defn get-contact-image-uri
|
||||
[{:keys [port public-key image-name clock theme indicator-size indicator-border
|
||||
indicator-color size ring? ring-width]}]
|
||||
(str image-server-uri-prefix
|
||||
port
|
||||
contact-images-action
|
||||
"?publicKey="
|
||||
public-key
|
||||
"&imageName="
|
||||
image-name
|
||||
"&size="
|
||||
(Math/round (* size status-im2.common.pixel-ratio/ratio))
|
||||
"&theme="
|
||||
(current-theme-index theme)
|
||||
"&clock="
|
||||
clock
|
||||
"&indicatorColor="
|
||||
(js/encodeURIComponent indicator-color)
|
||||
"&indicatorSize="
|
||||
(* indicator-size status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorBorder="
|
||||
(* indicator-border status-im2.common.pixel-ratio/ratio)
|
||||
"&addRing="
|
||||
(if ring? 1 0)
|
||||
"&ringWidth="
|
||||
(* ring-width status-im2.common.pixel-ratio/ratio)))
|
||||
indicator-center-to-edge indicator-color size ring? ring-width]}]
|
||||
(str
|
||||
image-server-uri-prefix
|
||||
port
|
||||
contact-images-action
|
||||
"?publicKey="
|
||||
public-key
|
||||
"&imageName="
|
||||
image-name
|
||||
"&size="
|
||||
(Math/round (* size status-im2.common.pixel-ratio/ratio))
|
||||
"&theme="
|
||||
(current-theme-index theme)
|
||||
"&clock="
|
||||
clock
|
||||
"&indicatorColor="
|
||||
(js/encodeURIComponent indicator-color)
|
||||
"&indicatorSize="
|
||||
(* indicator-size status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorBorder="
|
||||
(* indicator-border status-im2.common.pixel-ratio/ratio)
|
||||
"&indicatorCenterToEdge="
|
||||
(* indicator-center-to-edge 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
|
||||
[{:keys [port public-key image-name theme override-ring? clock]}]
|
||||
(fn [{:keys [size indicator-size indicator-border indicator-color ring? ring-width override-theme]}]
|
||||
(get-contact-image-uri {:port port
|
||||
:image-name image-name
|
||||
:public-key public-key
|
||||
:size size
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:clock clock
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-color indicator-color
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width})))
|
||||
(fn [{:keys [size indicator-size indicator-border indicator-center-to-edge
|
||||
indicator-color ring? ring-width override-theme]}]
|
||||
(get-contact-image-uri {:port port
|
||||
:image-name image-name
|
||||
:public-key public-key
|
||||
:size size
|
||||
:theme (if (nil? override-theme) theme override-theme)
|
||||
:clock clock
|
||||
:indicator-size indicator-size
|
||||
:indicator-border indicator-border
|
||||
:indicator-center-to-edge indicator-center-to-edge
|
||||
:indicator-color indicator-color
|
||||
:ring? (if (nil? override-ring?) ring? override-ring?)
|
||||
:ring-width ring-width})))
|
||||
|
||||
(defn get-account-qr-image-uri
|
||||
[{:keys [key-uid public-key port qr-size]}]
|
||||
|
|
|
|||
|
|
@ -10,16 +10,17 @@
|
|||
sut/timestamp (constantly "timestamp")]
|
||||
(t/is
|
||||
(=
|
||||
(sut/get-account-image-uri {:port "port"
|
||||
:public-key "public-key"
|
||||
:image-name "image-name"
|
||||
:key-uid "key-uid"
|
||||
:theme :dark
|
||||
:indicator-size 2
|
||||
:indicator-color "rgba(9,16,28,0.08)"
|
||||
:ring? true
|
||||
: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&addRing=1&ringWidth=4"))))
|
||||
(sut/get-account-image-uri {:port "port"
|
||||
:public-key "public-key"
|
||||
:image-name "image-name"
|
||||
:key-uid "key-uid"
|
||||
:theme :dark
|
||||
:indicator-size 2
|
||||
:indicator-color "rgba(9,16,28,0.08)"
|
||||
:indicator-center-to-edge 6
|
||||
:ring? true
|
||||
: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
|
||||
(with-redefs
|
||||
|
|
@ -29,20 +30,21 @@
|
|||
(t/is
|
||||
(=
|
||||
(sut/get-initials-avatar-uri
|
||||
{:port "port"
|
||||
:public-key "public-key"
|
||||
:key-uid "key-uid"
|
||||
:full-name "full-name"
|
||||
:length "length"
|
||||
:size 48
|
||||
:theme :light
|
||||
:ring? "ring?"
|
||||
:background-color "background-color"
|
||||
:color "#0E162000"
|
||||
:font-size 12
|
||||
:font-file "/font/Inter Medium.otf"
|
||||
:uppercase-ratio "uppercase-ratio"
|
||||
:indicator-size 2
|
||||
:indicator-color "#0E1620"
|
||||
: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&addRing=1&ringWidth=8"))))
|
||||
{:port "port"
|
||||
:public-key "public-key"
|
||||
:key-uid "key-uid"
|
||||
:full-name "full-name"
|
||||
:length "length"
|
||||
:size 48
|
||||
:theme :light
|
||||
:ring? "ring?"
|
||||
:background-color "background-color"
|
||||
:color "#0E162000"
|
||||
:font-size 12
|
||||
:font-file "/font/Inter Medium.otf"
|
||||
:uppercase-ratio "uppercase-ratio"
|
||||
:indicator-size 2
|
||||
:indicator-center-to-edge 6
|
||||
:indicator-color "#0E1620"
|
||||
: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"))))
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
|
||||
"owner": "status-im",
|
||||
"repo": "status-go",
|
||||
"version": "v0.166.6",
|
||||
"commit-sha1": "3e53eabe4ba7b3135ffc920ba135075c5e299154",
|
||||
"src-sha256": "1fdjhq0r40wdx0klyqiaww584mbax70dqvhm81yc4yxc8spr18lw"
|
||||
"version": "fix/avatar-status-indicator-position",
|
||||
"commit-sha1": "af14657fa199270d8e71685f348b5a450d5bfd24",
|
||||
"src-sha256": "1jx7q52wb5ci1xzhwyd8maxsdshwam9wn53d8i8gky814csnxqvw"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue