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
: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]

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

@ -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

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

@ -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}

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

@ -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))

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]))
(def ratio (rn/PixelRatio.get))

59
src/utils/image_server.cljs
View File

@ -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,8 +71,9 @@
`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
indicator-border indicator-color ring? ring-width]}]
(str
image-server-uri-prefix
port
account-images-action
"?publicKey="
@ -82,7 +83,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="
@ -90,11 +91,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-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,9 +189,10 @@
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
(get-initials-avatar-uri
{:port port
:public-key public-key
:key-uid key-uid
:full-name full-name
@ -194,6 +201,7 @@
: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
@ -204,7 +212,7 @@
(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]}]

16
src/utils/image_server_test.cljs
View File

@ -1,12 +1,12 @@
(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
status-im2.common.pixel-ratio/ratio 2
sut/timestamp (constantly "timestamp")]
(t/is
(=
@ -17,13 +17,14 @@
: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
status-im2.common.pixel-ratio/ratio 2
sut/timestamp (constantly "timestamp")]
(t/is
(=
@ -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"))))

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
"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"
}