From 7e9ba0768a3cee1295bf695461e25863dce2b26b Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Fri, 1 Sep 2023 16:35:46 +0800 Subject: [PATCH] fix: support new design ident ring width (#17034) --- .../components/avatars/user_avatar/style.cljs | 21 ++- .../components/avatars/user_avatar/view.cljs | 3 +- .../components/tags/context_tag/view.cljs | 3 +- .../ui/components/chat_icon/screen.cljs | 6 +- .../common}/pixel_ratio.cljs | 2 +- src/utils/image_server.cljs | 125 ++++++++++-------- src/utils/image_server_test.cljs | 24 ++-- status-go-version.json | 6 +- 8 files changed, 107 insertions(+), 83 deletions(-) rename src/{status_im/utils => status_im2/common}/pixel_ratio.cljs (67%) diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs index 940b6d9ceb..fca9e953f2 100644 --- a/src/quo2/components/avatars/user_avatar/style.cljs +++ b/src/quo2/components/avatars/user_avatar/style.cljs @@ -5,31 +5,38 @@ {:big {:dimensions 80 :status-indicator 20 :status-indicator-border 4 - :font-size :heading-1} + :font-size :heading-1 + :ring-width 4} :medium {:dimensions 48 :status-indicator 12 :status-indicator-border 2 - :font-size :heading-2} + :font-size :heading-2 + :ring-width 2} :small {:dimensions 32 :status-indicator 12 :status-indicator-border 2 - :font-size :paragraph-2} + :font-size :paragraph-2 + :ring-width 2} 28 {:dimensions 28 :status-indicator 0 :status-indicator-border 0 - :font-size :paragraph-2} + :font-size :paragraph-2 + :ring-width 0} :xs {:dimensions 24 :status-indicator 0 :status-indicator-border 0 - :font-size :paragraph-2} + :font-size :paragraph-2 + :ring-width 2} :xxs {:dimensions 20 :status-indicator 0 :status-indicator-border 0 - :font-size :label} + :font-size :label + :ring-width 2} :xxxs {:dimensions 16 :status-indicator 0 :status-indicator-border 0 - :font-size :label}}) + :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 e928fff452..314c3bdc3b 100644 --- a/src/quo2/components/avatars/user_avatar/view.cljs +++ b/src/quo2/components/avatars/user_avatar/view.cljs @@ -96,7 +96,8 @@ :background-color (style/customization-color customization-color theme) :color (:color style/initials-avatar-text) :size (:width outer-styles) - :ring? ring?})} + :ring? ring? + :ring-width (:ring-width sizes)})} (:uri profile-picture) profile-picture diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 4e287b5277..2ea798d75f 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -92,7 +92,8 @@ {:full-name full-name :profile-picture profile-picture :size (if (= size 24) :xxs 28) - :status-indicator? false}]] + :status-indicator? false + :ring? false}]] :multiuser [preview-list/view {:type :user :size 20} diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index d3845a1795..3a5a318919 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -77,7 +77,8 @@ :indicator-color "#000000" :color (get text-style :color) :length 2 - :ring? (not (ens/is-valid-eth-name? full-name))})} + :ring? (not (ens/is-valid-eth-name? full-name)) + :ring-width 2})} {:size size}] [photos/photo photo-path {:size size}]) (when-not community? @@ -219,7 +220,8 @@ :indicator-color "#000000" :color (get-in styles [:default-chat-icon-text :color]) :length 2 - :ring? (not (ens/is-valid-eth-name? name))})} + :ring? (not (ens/is-valid-eth-name? name)) + :ring-width 2})} photo-path)] [rn/view (:container styles) (if (and photo-path (seq photo-path)) diff --git a/src/status_im/utils/pixel_ratio.cljs b/src/status_im2/common/pixel_ratio.cljs similarity index 67% rename from src/status_im/utils/pixel_ratio.cljs rename to src/status_im2/common/pixel_ratio.cljs index ccd2563aa0..7afd60aeb7 100644 --- a/src/status_im/utils/pixel_ratio.cljs +++ b/src/status_im2/common/pixel_ratio.cljs @@ -1,4 +1,4 @@ -(ns status-im.utils.pixel-ratio +(ns status-im2.common.pixel-ratio (:require ["react-native" :as rn])) (def ratio (rn/PixelRatio.get)) diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 7077f82386..c48ee290f3 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -2,7 +2,7 @@ (:require [react-native.fs :as utils.fs] [react-native.platform :as platform] - status-im.utils.pixel-ratio + status-im2.common.pixel-ratio [status-im2.constants :as constants] [utils.datetime :as datetime])) @@ -71,30 +71,33 @@ `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?]}] - (str image-server-uri-prefix - port - account-images-action - "?publicKey=" - public-key - "&keyUid=" - key-uid - "&imageName=" - image-name - "&size=" - (Math/round (* size status-im.utils.pixel-ratio/ratio)) - "&theme=" - (current-theme-index theme) - "&clock=" - (timestamp) - "&indicatorColor=" - (js/encodeURIComponent indicator-color) - "&indicatorSize=" - (* indicator-size status-im.utils.pixel-ratio/ratio) - "&indicatorBorder=" - (* indicator-border status-im.utils.pixel-ratio/ratio) - "&addRing=" - (if ring? 1 0))) + indicator-border indicator-color ring? ring-width]}] + (str + image-server-uri-prefix + port + account-images-action + "?publicKey=" + public-key + "&keyUid=" + key-uid + "&imageName=" + image-name + "&size=" + (Math/round (* size status-im2.common.pixel-ratio/ratio)) + "&theme=" + (current-theme-index theme) + "&clock=" + (timestamp) + "&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))) (defn get-account-image-uri-fn "pass the result fn to user-avatar component as `:profile-picture` @@ -109,7 +112,7 @@ 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? - override-theme]}] + ring-width override-theme]}] (get-account-image-uri {:port port :image-name image-name @@ -120,7 +123,8 @@ :indicator-size indicator-size :indicator-border indicator-border :indicator-color indicator-color - :ring? (if (nil? override-ring?) ring? override-ring?)}))) + :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 @@ -135,7 +139,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]}] + indicator-color full-name ring-width]}] (str image-server-uri-prefix port @@ -147,13 +151,13 @@ "&length=" length "&size=" - (Math/round (* size status-im.utils.pixel-ratio/ratio)) + (Math/round (* size status-im2.common.pixel-ratio/ratio)) "&bgColor=" (js/encodeURIComponent background-color) "&color=" (js/encodeURIComponent color) "&fontSize=" - (* font-size status-im.utils.pixel-ratio/ratio) + (* font-size status-im2.common.pixel-ratio/ratio) "&fontFile=" (js/encodeURIComponent font-file) "&uppercaseRatio=" @@ -167,11 +171,13 @@ "&indicatorColor=" (js/encodeURIComponent indicator-color) "&indicatorSize=" - (* indicator-size status-im.utils.pixel-ratio/ratio) + (* indicator-size status-im2.common.pixel-ratio/ratio) "&indicatorBorder=" - (* indicator-border status-im.utils.pixel-ratio/ratio) + (* indicator-border status-im2.common.pixel-ratio/ratio) "&addRing=" - (if ring? 1 0))) + (if ring? 1 0) + "&ringWidth=" + (* ring-width status-im2.common.pixel-ratio/ratio))) (defn get-initials-avatar-uri-fn "return a fn that calls `get-account-initials-uri` @@ -183,28 +189,30 @@ 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? + indicator-size indicator-border indicator-color 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?) - :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}))) + (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}))) (defn get-contact-image-uri [{:keys [port public-key image-name clock theme indicator-size indicator-border - indicator-color size ring?]}] + indicator-color size ring? ring-width]}] (str image-server-uri-prefix port contact-images-action @@ -213,7 +221,7 @@ "&imageName=" image-name "&size=" - (Math/round (* size status-im.utils.pixel-ratio/ratio)) + (Math/round (* size status-im2.common.pixel-ratio/ratio)) "&theme=" (current-theme-index theme) "&clock=" @@ -221,15 +229,17 @@ "&indicatorColor=" (js/encodeURIComponent indicator-color) "&indicatorSize=" - (* indicator-size status-im.utils.pixel-ratio/ratio) + (* indicator-size status-im2.common.pixel-ratio/ratio) "&indicatorBorder=" - (* indicator-border status-im.utils.pixel-ratio/ratio) + (* indicator-border status-im2.common.pixel-ratio/ratio) "&addRing=" - (if ring? 1 0))) + (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? override-theme]}] + (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 @@ -239,7 +249,8 @@ :indicator-size indicator-size :indicator-border indicator-border :indicator-color indicator-color - :ring? (if (nil? override-ring?) ring? override-ring?)}))) + :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 83cf1bb11e..fc5e5dbec0 100644 --- a/src/utils/image_server_test.cljs +++ b/src/utils/image_server_test.cljs @@ -1,13 +1,13 @@ (ns utils.image-server-test (:require [cljs.test :as t] - status-im.utils.pixel-ratio + status-im2.common.pixel-ratio [utils.image-server :as sut])) (t/deftest get-account-image-uri (with-redefs - [sut/current-theme-index identity - status-im.utils.pixel-ratio/ratio 2 - sut/timestamp (constantly "timestamp")] + [sut/current-theme-index identity + status-im2.common.pixel-ratio/ratio 2 + sut/timestamp (constantly "timestamp")] (t/is (= (sut/get-account-image-uri {:port "port" @@ -17,14 +17,15 @@ :theme :dark :indicator-size 2 :indicator-color "rgba(9,16,28,0.08)" - :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")))) + :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")))) (t/deftest get-account-initials-uri (with-redefs - [sut/current-theme-index identity - status-im.utils.pixel-ratio/ratio 2 - sut/timestamp (constantly "timestamp")] + [sut/current-theme-index identity + status-im2.common.pixel-ratio/ratio 2 + sut/timestamp (constantly "timestamp")] (t/is (= (sut/get-initials-avatar-uri @@ -42,5 +43,6 @@ :font-file "/font/Inter Medium.otf" :uppercase-ratio "uppercase-ratio" :indicator-size 2 - :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")))) + :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")))) diff --git a/status-go-version.json b/status-go-version.json index 419fc82abd..19d2d53c16 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.5", - "commit-sha1": "22ec4ac5861cd3c907c980469a73f685b43dbda0", - "src-sha256": "0z9j9hrgab3qrc84nj12b97mkjqpas83ln5a9k6367d23jiqwmj6" + "version": "v0.166.6", + "commit-sha1": "99f7e3f5f6b04b0e1ef386af3bfd20051623155a", + "src-sha256": "1sqslfk8jgxlm9hrrsgv9f2c8j7msy8x907lb4dk70shkv336v4k" }