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: support new design ident ring width (#17034)

This commit is contained in:
yqrashawn 2023-09-01 16:35:46 +08:00 committed by GitHub
parent d462810a57
commit 7e9ba0768a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 107 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,31 +5,38 @@
{:big {:dimensions 80 {:big {:dimensions 80
:status-indicator 20 :status-indicator 20
:status-indicator-border 4 :status-indicator-border 4
:font-size :heading-1} :font-size :heading-1
:ring-width 4}
:medium {:dimensions 48 :medium {:dimensions 48
:status-indicator 12 :status-indicator 12
:status-indicator-border 2 :status-indicator-border 2
:font-size :heading-2} :font-size :heading-2
:ring-width 2}
:small {:dimensions 32 :small {:dimensions 32
:status-indicator 12 :status-indicator 12
:status-indicator-border 2 :status-indicator-border 2
:font-size :paragraph-2} :font-size :paragraph-2
:ring-width 2}
28 {:dimensions 28 28 {:dimensions 28
:status-indicator 0 :status-indicator 0
:status-indicator-border 0 :status-indicator-border 0
:font-size :paragraph-2} :font-size :paragraph-2
:ring-width 0}
:xs {:dimensions 24 :xs {:dimensions 24
:status-indicator 0 :status-indicator 0
:status-indicator-border 0 :status-indicator-border 0
:font-size :paragraph-2} :font-size :paragraph-2
:ring-width 2}
:xxs {:dimensions 20 :xxs {:dimensions 20
:status-indicator 0 :status-indicator 0
:status-indicator-border 0 :status-indicator-border 0
:font-size :label} :font-size :label
:ring-width 2}
:xxxs {:dimensions 16 :xxxs {:dimensions 16
:status-indicator 0 :status-indicator 0
:status-indicator-border 0 :status-indicator-border 0
:font-size :label}}) :font-size :label
:ring-width 2}})
(defn initials-avatar (defn initials-avatar
[size customization-color theme] [size customization-color theme]

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

@ -96,7 +96,8 @@
:background-color (style/customization-color customization-color theme) :background-color (style/customization-color customization-color theme)
:color (:color style/initials-avatar-text) :color (:color style/initials-avatar-text)
:size (:width outer-styles) :size (:width outer-styles)
:ring? ring?})} :ring? ring?
:ring-width (:ring-width sizes)})}
(:uri profile-picture) (:uri profile-picture)
profile-picture profile-picture

3
src/quo2/components/tags/context_tag/view.cljs
View File

@ -92,7 +92,8 @@
{:full-name full-name {:full-name full-name
:profile-picture profile-picture :profile-picture profile-picture
:size (if (= size 24) :xxs 28) :size (if (= size 24) :xxs 28)
:status-indicator? false}]] :status-indicator? false
:ring? false}]]
:multiuser :multiuser
[preview-list/view {:type :user :size 20} [preview-list/view {:type :user :size 20}

6
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -77,7 +77,8 @@
:indicator-color "#000000" :indicator-color "#000000"
:color (get text-style :color) :color (get text-style :color)
:length 2 :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}] {:size size}]
[photos/photo photo-path {:size size}]) [photos/photo photo-path {:size size}])
(when-not community? (when-not community?
@ -219,7 +220,8 @@
:indicator-color "#000000" :indicator-color "#000000"
:color (get-in styles [:default-chat-icon-text :color]) :color (get-in styles [:default-chat-icon-text :color])
:length 2 :length 2
:ring? (not (ens/is-valid-eth-name? name))})} :ring? (not (ens/is-valid-eth-name? name))
:ring-width 2})}
photo-path)] photo-path)]
[rn/view (:container styles) [rn/view (:container styles)
(if (and photo-path (seq photo-path)) (if (and photo-path (seq photo-path))

2
src/status_im/utils/pixel_ratio.cljs → src/status_im2/common/pixel_ratio.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.utils.pixel-ratio (ns status-im2.common.pixel-ratio
(:require ["react-native" :as rn])) (:require ["react-native" :as rn]))
(def ratio (rn/PixelRatio.get)) (def ratio (rn/PixelRatio.get))

125
src/utils/image_server.cljs
View File

@ -2,7 +2,7 @@
(:require (:require
[react-native.fs :as utils.fs] [react-native.fs :as utils.fs]
[react-native.platform :as platform] [react-native.platform :as platform]
status-im.utils.pixel-ratio status-im2.common.pixel-ratio
[status-im2.constants :as constants] [status-im2.constants :as constants]
[utils.datetime :as datetime])) [utils.datetime :as datetime]))
@ -71,30 +71,33 @@
`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?]}] indicator-border indicator-color ring? ring-width]}]
(str image-server-uri-prefix (str
port image-server-uri-prefix
account-images-action port
"?publicKey=" account-images-action
public-key "?publicKey="
"&keyUid=" public-key
key-uid "&keyUid="
"&imageName=" key-uid
image-name "&imageName="
"&size=" image-name
(Math/round (* size status-im.utils.pixel-ratio/ratio)) "&size="
"&theme=" (Math/round (* size status-im2.common.pixel-ratio/ratio))
(current-theme-index theme) "&theme="
"&clock=" (current-theme-index theme)
(timestamp) "&clock="
"&indicatorColor=" (timestamp)
(js/encodeURIComponent indicator-color) "&indicatorColor="
"&indicatorSize=" (js/encodeURIComponent indicator-color)
(* indicator-size status-im.utils.pixel-ratio/ratio) "&indicatorSize="
"&indicatorBorder=" (* indicator-size status-im2.common.pixel-ratio/ratio)
(* indicator-border status-im.utils.pixel-ratio/ratio) "&indicatorBorder="
"&addRing=" (* indicator-border status-im2.common.pixel-ratio/ratio)
(if ring? 1 0))) "&addRing="
(if ring? 1 0)
"&ringWidth="
(* ring-width status-im2.common.pixel-ratio/ratio)))
(defn get-account-image-uri-fn (defn get-account-image-uri-fn
"pass the result fn to user-avatar component as `:profile-picture` "pass the result fn to user-avatar component as `:profile-picture`
@ -109,7 +112,7 @@
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-color ring?
override-theme]}] ring-width override-theme]}]
(get-account-image-uri (get-account-image-uri
{:port port {:port port
:image-name image-name :image-name image-name
@ -120,7 +123,8 @@
:indicator-size indicator-size :indicator-size indicator-size
:indicator-border indicator-border :indicator-border indicator-border
:indicator-color indicator-color :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 (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
@ -135,7 +139,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]}] indicator-color full-name ring-width]}]
(str (str
image-server-uri-prefix image-server-uri-prefix
port port
@ -147,13 +151,13 @@
"&length=" "&length="
length length
"&size=" "&size="
(Math/round (* size status-im.utils.pixel-ratio/ratio)) (Math/round (* size status-im2.common.pixel-ratio/ratio))
"&bgColor=" "&bgColor="
(js/encodeURIComponent background-color) (js/encodeURIComponent background-color)
"&color=" "&color="
(js/encodeURIComponent color) (js/encodeURIComponent color)
"&fontSize=" "&fontSize="
(* font-size status-im.utils.pixel-ratio/ratio) (* font-size status-im2.common.pixel-ratio/ratio)
"&fontFile=" "&fontFile="
(js/encodeURIComponent font-file) (js/encodeURIComponent font-file)
"&uppercaseRatio=" "&uppercaseRatio="
@ -167,11 +171,13 @@
"&indicatorColor=" "&indicatorColor="
(js/encodeURIComponent indicator-color) (js/encodeURIComponent indicator-color)
"&indicatorSize=" "&indicatorSize="
(* indicator-size status-im.utils.pixel-ratio/ratio) (* indicator-size status-im2.common.pixel-ratio/ratio)
"&indicatorBorder=" "&indicatorBorder="
(* indicator-border status-im.utils.pixel-ratio/ratio) (* indicator-border status-im2.common.pixel-ratio/ratio)
"&addRing=" "&addRing="
(if ring? 1 0))) (if ring? 1 0)
"&ringWidth="
(* ring-width status-im2.common.pixel-ratio/ratio)))
(defn get-initials-avatar-uri-fn (defn get-initials-avatar-uri-fn
"return a fn that calls `get-account-initials-uri` "return a fn that calls `get-account-initials-uri`
@ -183,28 +189,30 @@
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? indicator-size indicator-border indicator-color ring? ring-width
override-theme]}] override-theme]}]
(get-initials-avatar-uri {:port port (get-initials-avatar-uri
:public-key public-key {:port port
:key-uid key-uid :public-key public-key
:full-name full-name :key-uid key-uid
:length length :full-name full-name
:size size :length length
:background-color background-color :size size
:theme (if (nil? override-theme) theme override-theme) :background-color background-color
:ring? (if (nil? override-ring?) ring? override-ring?) :theme (if (nil? override-theme) theme override-theme)
:font-size font-size :ring? (if (nil? override-ring?) ring? override-ring?)
:color color :ring-width ring-width
:font-file font-file :font-size font-size
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :color color
:indicator-size indicator-size :font-file font-file
:indicator-border indicator-border :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:indicator-color indicator-color}))) :indicator-size indicator-size
:indicator-border indicator-border
: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?]}] indicator-color size ring? ring-width]}]
(str image-server-uri-prefix (str image-server-uri-prefix
port port
contact-images-action contact-images-action
@ -213,7 +221,7 @@
"&imageName=" "&imageName="
image-name image-name
"&size=" "&size="
(Math/round (* size status-im.utils.pixel-ratio/ratio)) (Math/round (* size status-im2.common.pixel-ratio/ratio))
"&theme=" "&theme="
(current-theme-index theme) (current-theme-index theme)
"&clock=" "&clock="
@ -221,15 +229,17 @@
"&indicatorColor=" "&indicatorColor="
(js/encodeURIComponent indicator-color) (js/encodeURIComponent indicator-color)
"&indicatorSize=" "&indicatorSize="
(* indicator-size status-im.utils.pixel-ratio/ratio) (* indicator-size status-im2.common.pixel-ratio/ratio)
"&indicatorBorder=" "&indicatorBorder="
(* indicator-border status-im.utils.pixel-ratio/ratio) (* indicator-border status-im2.common.pixel-ratio/ratio)
"&addRing=" "&addRing="
(if ring? 1 0))) (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? override-theme]}] (fn [{:keys [size indicator-size indicator-border indicator-color ring? ring-width override-theme]}]
(get-contact-image-uri {:port port (get-contact-image-uri {:port port
:image-name image-name :image-name image-name
:public-key public-key :public-key public-key
@ -239,7 +249,8 @@
:indicator-size indicator-size :indicator-size indicator-size
:indicator-border indicator-border :indicator-border indicator-border
:indicator-color indicator-color :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 (defn get-account-qr-image-uri
[{:keys [key-uid public-key port qr-size]}] [{:keys [key-uid public-key port qr-size]}]

24
src/utils/image_server_test.cljs
View File

@ -1,13 +1,13 @@
(ns utils.image-server-test (ns utils.image-server-test
(:require [cljs.test :as t] (:require [cljs.test :as t]
status-im.utils.pixel-ratio status-im2.common.pixel-ratio
[utils.image-server :as sut])) [utils.image-server :as sut]))
(t/deftest get-account-image-uri (t/deftest get-account-image-uri
(with-redefs (with-redefs
[sut/current-theme-index identity [sut/current-theme-index identity
status-im.utils.pixel-ratio/ratio 2 status-im2.common.pixel-ratio/ratio 2
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"
@ -17,14 +17,15 @@
: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}) :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-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 (t/deftest get-account-initials-uri
(with-redefs (with-redefs
[sut/current-theme-index identity [sut/current-theme-index identity
status-im.utils.pixel-ratio/ratio 2 status-im2.common.pixel-ratio/ratio 2
sut/timestamp (constantly "timestamp")] sut/timestamp (constantly "timestamp")]
(t/is (t/is
(= (=
(sut/get-initials-avatar-uri (sut/get-initials-avatar-uri
@ -42,5 +43,6 @@
: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-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")))) :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"))))

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.5", "version": "v0.166.6",
"commit-sha1": "22ec4ac5861cd3c907c980469a73f685b43dbda0", "commit-sha1": "99f7e3f5f6b04b0e1ef386af3bfd20051623155a",
"src-sha256": "0z9j9hrgab3qrc84nj12b97mkjqpas83ln5a9k6367d23jiqwmj6" "src-sha256": "1sqslfk8jgxlm9hrrsgv9f2c8j7msy8x907lb4dk70shkv336v4k"
} }