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
|
|
@ -3,38 +3,45 @@
|
|||
|
||||
(def sizes
|
||||
{:big {:dimensions 80
|
||||
:status-indicator 20
|
||||
: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 12
|
||||
: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 12
|
||||
: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}})
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,8 @@
|
|||
(: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)
|
||||
|
|
|
|||
|
|
@ -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,8 +114,8 @@
|
|||
|
||||
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
|
||||
|
|
@ -122,6 +125,7 @@
|
|||
: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})))
|
||||
|
|
@ -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,8 +195,8 @@
|
|||
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
|
||||
|
|
@ -208,12 +214,14 @@
|
|||
: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
|
||||
indicator-center-to-edge indicator-color size ring? ring-width]}]
|
||||
(str
|
||||
image-server-uri-prefix
|
||||
port
|
||||
contact-images-action
|
||||
"?publicKey="
|
||||
|
|
@ -232,6 +240,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="
|
||||
|
|
@ -239,7 +249,8 @@
|
|||
|
||||
(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]}]
|
||||
(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
|
||||
|
|
@ -248,6 +259,7 @@
|
|||
: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})))
|
||||
|
|
|
|||
|
|
@ -17,9 +17,10 @@
|
|||
: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&addRing=1&ringWidth=4"))))
|
||||
"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
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
: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&addRing=1&ringWidth=8"))))
|
||||
"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