From a05156c6459b6db37f2d58f8a2e4ab30df5da851 Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Fri, 8 Sep 2023 00:45:23 +0800 Subject: [PATCH] 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 Co-authored-by: Flavio Fraschetti --- .../components/avatars/user_avatar/style.cljs | 77 +++++---- .../components/avatars/user_avatar/view.cljs | 32 ++-- src/utils/image_server.cljs | 152 ++++++++++-------- src/utils/image_server_test.cljs | 56 +++---- status-go-version.json | 6 +- 5 files changed, 173 insertions(+), 150 deletions(-) diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs index fca9e953f2..b25fb00142 100644 --- a/src/quo2/components/avatars/user_avatar/style.cljs +++ b/src/quo2/components/avatars/user_avatar/style.cljs @@ -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] diff --git a/src/quo2/components/avatars/user_avatar/view.cljs b/src/quo2/components/avatars/user_avatar/view.cljs index 314c3bdc3b..b8f4834bac 100644 --- a/src/quo2/components/avatars/user_avatar/view.cljs +++ b/src/quo2/components/avatars/user_avatar/view.cljs @@ -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 diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 690a4e20c3..46dffdc884 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -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]}] diff --git a/src/utils/image_server_test.cljs b/src/utils/image_server_test.cljs index fc5e5dbec0..efba817e52 100644 --- a/src/utils/image_server_test.cljs +++ b/src/utils/image_server_test.cljs @@ -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")))) diff --git a/status-go-version.json b/status-go-version.json index 84692336b6..10be9b949b 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "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" }