feat: contact CustomizationColor (#19087)

This commit is contained in:
yqrashawn 2024-04-03 23:15:26 +08:00 committed by GitHub
parent b0d2e6e5d7
commit b0964eff64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 121 additions and 107 deletions

View File

@ -10,7 +10,7 @@
[{:keys [db]}] [{:keys [db]}]
(let [{:keys [name preferred-name display-name address]} (:profile/profile db)] (let [{:keys [name preferred-name display-name address]} (:profile/profile db)]
{:json-rpc/call [{:method "wakuext_sendContactUpdates" {:json-rpc/call [{:method "wakuext_sendContactUpdates"
:params [(or preferred-name display-name name) ""] :params [(or preferred-name display-name name) "" ""]
:on-success #(log/debug "sent contact update")}]})) :on-success #(log/debug "sent contact update")}]}))
(rf/defn update-multiaccount-account-name (rf/defn update-multiaccount-account-name

View File

@ -11,7 +11,8 @@
utils.string)) utils.string))
(defn initials-avatar (defn initials-avatar
[{:keys [full-name size customization-color theme]}] [{:keys [full-name size customization-color theme]
:or {customization-color :blue}}]
(let [font-size (get-in style/sizes [size :font-size]) (let [font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
[rn/view [rn/view
@ -30,13 +31,12 @@
When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn` When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn`
may have an `:override-ring?` value. If it does then the `:ring?` value will not be used. may have an `:override-ring?` value. If it does then the `:ring?` value will not be used.
For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated." For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated."
[{:keys [full-name size profile-picture customization-color static? [{:keys [full-name size profile-picture static?
status-indicator? online? ring? theme] status-indicator? online? ring? theme]
:or {size :big :or {size :big
status-indicator? true status-indicator? true
online? true online? true
ring? true ring? true}
customization-color :blue}
:as props}] :as props}]
(let [full-name (or full-name "Your Name") (let [full-name (or full-name "Your Name")
;; image generated with `profile-picture-fn` is round cropped ;; image generated with `profile-picture-fn` is round cropped
@ -75,7 +75,6 @@
(:status-indicator-center-to-edge sizes)) (:status-indicator-center-to-edge sizes))
:indicator-color indicator-color :indicator-color indicator-color
:override-theme theme :override-theme 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?

View File

@ -54,12 +54,11 @@
[rn/view [rn/view
{:style style/card-header} {:style style/card-header}
[user-avatar/user-avatar [user-avatar/user-avatar
{:full-name name {:full-name name
:profile-picture profile-picture :profile-picture profile-picture
:size :medium :size :medium
:status-indicator? false :status-indicator? false
:customization-color customization-color :static? true}]
:static? true}]
[rn/view {:flex-direction :row} [rn/view {:flex-direction :row}
(when show-logged-in? (when show-logged-in?
[tag/tag [tag/tag

View File

@ -1,5 +1,6 @@
(ns schema.quo (ns schema.quo
(:require (:require
[quo.foundations.colors :as colors]
[schema.registry :as registry])) [schema.registry :as registry]))
(def ^:private ?profile-picture-fn-params (def ^:private ?profile-picture-fn-params
@ -23,6 +24,9 @@
[:map [:map
[:fn [:=> [:cat ?profile-picture-fn-params] :string]]]]) [:fn [:=> [:cat ?profile-picture-fn-params] :string]]]])
(def ^:private ?customization-color (into [:enum] colors/account-colors))
(defn register-schemas (defn register-schemas
[] []
(registry/register ::profile-picture-source ?profile-picture-source)) (registry/register ::profile-picture-source ?profile-picture-source)
(registry/register ::customization-color ?customization-color))

View File

@ -27,7 +27,12 @@
:has-added-us? (oops/oget js-contact "hasAddedUs") :has-added-us? (oops/oget js-contact "hasAddedUs")
:mutual? (oops/oget js-contact "mutual") :mutual? (oops/oget js-contact "mutual")
:emoji-hash (oops/oget js-contact "emojiHash") :emoji-hash (oops/oget js-contact "emojiHash")
:bio (oops/oget js-contact "bio")}) :bio (oops/oget js-contact "bio")
:customization-color (-> js-contact
(oops/oget "customizationColor")
keyword
;; newly created accounts
(or :blue))})
(defn prepare-events-for-contact (defn prepare-events-for-contact
[db chats-js] [db chats-js]

View File

@ -328,19 +328,24 @@
(defn messages-list-content (defn messages-list-content
[{:keys [insets distance-from-list-top content-height layout-height distance-atom [{:keys [insets distance-from-list-top content-height layout-height distance-atom
chat-screen-layout-calculations-complete? chat-list-scroll-y]}] chat-screen-layout-calculations-complete? chat-list-scroll-y]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme-value)
chat (rf/sub [:chats/current-chat-chat-view]) {:keys [chat-type chat-id] :as chat} (rf/sub [:chats/current-chat-chat-view])
community-channel? (= constants/community-chat-type (:chat-type chat)) one-to-one-chat? (= chat-type constants/one-to-one-chat-type)
customization-color (if community-channel? community-channel? (= constants/community-chat-type chat-type)
(or (:color chat) {contact-customization-color
(rf/sub [:communities/community-color (:community-id chat)])) :customization-color} (when one-to-one-chat?
:turquoise) (rf/sub [:contacts/contact-by-identity chat-id]))
{:keys [keyboard-shown]} (hooks/use-keyboard) customization-color (cond community-channel?
{window-height :height} (rn/get-window) (or (:color chat)
context (rf/sub [:chats/current-chat-message-list-view-context]) (rf/sub [:communities/community-color
messages (rf/sub [:chats/raw-chat-messages-stream (:community-id chat)]))
(:chat-id chat)]) one-to-one-chat? contact-customization-color
recording? (rf/sub [:chats/recording?])] :else (or (:color chat) :turquoise))
{:keys [keyboard-shown]} (hooks/use-keyboard)
{window-height :height} (rn/get-window)
context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream chat-id])
recording? (rf/sub [:chats/recording?])]
[rn/view {:style {:flex 3}} ;; Pushes composer to bottom [rn/view {:style {:flex 3}} ;; Pushes composer to bottom
[rn/view {:style {:flex-shrink 1}} ;; Keeps flat list on top [rn/view {:style {:flex-shrink 1}} ;; Keeps flat list on top
[reanimated/flat-list [reanimated/flat-list

View File

@ -14,9 +14,7 @@
[] []
(let [{:keys [public-key primary-name nickname customization-color] (let [{:keys [public-key primary-name nickname customization-color]
:as profile} (rf/sub [:contacts/current-contact]) :as profile} (rf/sub [:contacts/current-contact])
;; TODO(@mohsen): remove default color, customization-color customization-color
;; https://github.com/status-im/status-mobile/issues/18733
customization-color (or customization-color constants/profile-default-color)
full-name (profile.utils/displayed-name profile) full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile) profile-picture (profile.utils/photo profile)
[unsaved-nickname set-unsaved-nickname] (rn/use-state nickname) [unsaved-nickname set-unsaved-nickname] (rn/use-state nickname)

View File

@ -13,9 +13,7 @@
[] []
(let [{:keys [customization-color contact-request-state public-key] (let [{:keys [customization-color contact-request-state public-key]
:as contact} (rf/sub [:contacts/current-contact]) :as contact} (rf/sub [:contacts/current-contact])
;; TODO(@mohsen): remove default color, customization-color customization-color
;; https://github.com/status-im/status-mobile/issues/18733
customization-color (or customization-color constants/profile-default-color)
full-name (profile.utils/displayed-name contact) full-name (profile.utils/displayed-name contact)
profile-picture (profile.utils/photo contact) profile-picture (profile.utils/photo contact)
on-block-press (rn/use-callback on-block-press (rn/use-callback

View File

@ -12,8 +12,7 @@
[] []
(let [{:keys [public-key customization-color] (let [{:keys [public-key customization-color]
:as profile} (rf/sub [:contacts/current-contact]) :as profile} (rf/sub [:contacts/current-contact])
;; TODO: remove default color when #18733 merged. customization-color customization-color
customization-color (or customization-color constants/profile-default-color)
full-name (profile.utils/displayed-name profile) full-name (profile.utils/displayed-name profile)
profile-picture (profile.utils/photo profile) profile-picture (profile.utils/photo profile)
[message set-message] (rn/use-state "") [message set-message] (rn/use-state "")

View File

@ -29,8 +29,6 @@
(let [{:keys [public-key customization-color ens-name nickname secondary-name (let [{:keys [public-key customization-color ens-name nickname secondary-name
emoji-hash bio blocked? contact-request-state] emoji-hash bio blocked? contact-request-state]
:as contact} (rf/sub [:contacts/current-contact]) :as contact} (rf/sub [:contacts/current-contact])
;; TODO(@mohsen): remove default color,
;; https://github.com/status-im/status-mobile/issues/18733
customization-color (or customization-color constants/profile-default-color) customization-color (or customization-color constants/profile-default-color)
full-name (profile.utils/displayed-name contact) full-name (profile.utils/displayed-name contact)
profile-picture (profile.utils/photo contact) profile-picture (profile.utils/photo contact)

View File

@ -4,7 +4,6 @@
[quo.theme] [quo.theme]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im.common.scroll-page.view :as scroll-page] [status-im.common.scroll-page.view :as scroll-page]
[status-im.constants :as constants]
[status-im.contexts.profile.contact.actions.view :as actions] [status-im.contexts.profile.contact.actions.view :as actions]
[status-im.contexts.profile.contact.header.view :as contact-header] [status-im.contexts.profile.contact.header.view :as contact-header]
[status-im.contexts.shell.jump-to.constants :as jump-to.constants] [status-im.contexts.shell.jump-to.constants :as jump-to.constants]
@ -25,6 +24,7 @@
(defn view (defn view
[] []
(let [{:keys [customization-color]} (rf/sub [:contacts/current-contact]) (let [{:keys [customization-color]} (rf/sub [:contacts/current-contact])
profile-customization-color (rf/sub [:profile/customization-color])
scroll-y (reanimated/use-shared-value 0) scroll-y (reanimated/use-shared-value 0)
theme (quo.theme/use-theme-value)] theme (quo.theme/use-theme-value)]
[:<> [:<>
@ -32,9 +32,7 @@
{:navigate-back? true {:navigate-back? true
:height 148 :height 148
:on-scroll #(reanimated/set-shared-value scroll-y %) :on-scroll #(reanimated/set-shared-value scroll-y %)
;; TODO(@mohsen): remove default color, :cover-color (colors/resolve-color customization-color
;; https://github.com/status-im/status-mobile/issues/18733
:cover-color (colors/resolve-color (or customization-color constants/profile-default-color)
theme theme
20) 20)
:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
@ -45,7 +43,7 @@
[quo/floating-shell-button [quo/floating-shell-button
{:jump-to {:jump-to
{:on-press on-jump-to {:on-press on-jump-to
:customization-color customization-color :customization-color profile-customization-color
:label (i18n/label :t/jump-to)}} :label (i18n/label :t/jump-to)}}
{:position :absolute {:position :absolute
:bottom jump-to.constants/floating-shell-button-height}]])) :bottom jump-to.constants/floating-shell-button-height}]]))

View File

@ -16,7 +16,8 @@
unsaved-custom-color (reagent/atom customization-color constants/profile-default-color) unsaved-custom-color (reagent/atom customization-color constants/profile-default-color)
on-change #(reset! unsaved-custom-color %)] on-change #(reset! unsaved-custom-color %)]
(fn [{:keys [customization-color]}] (fn [{:keys [customization-color]}]
(let [profile (rf/sub [:profile/profile-with-image]) (let [profile (rf/sub [:profile/profile-with-image
{:customization-color @unsaved-custom-color}])
profile-picture (profile.utils/photo profile) profile-picture (profile.utils/photo profile)
display-name (profile.utils/displayed-name profile)] display-name (profile.utils/displayed-name profile)]
(rn/use-effect (rn/use-effect

View File

@ -29,7 +29,7 @@
(let [{:keys [name preferred-name display-name]} (:profile/profile db)] (let [{:keys [name preferred-name display-name]} (:profile/profile db)]
[:json-rpc/call [:json-rpc/call
[{:method "wakuext_sendContactUpdates" [{:method "wakuext_sendContactUpdates"
:params [(or preferred-name display-name name) ""] :params [(or preferred-name display-name name) "" ""]
:on-success #(log/debug "sent contact update")}]]))]})) :on-success #(log/debug "sent contact update")}]]))]}))
(rf/reg-event-fx :profile.settings/change-webview-debug (rf/reg-event-fx :profile.settings/change-webview-debug

View File

@ -35,7 +35,7 @@
(defn- replace-contact-image-uri (defn- replace-contact-image-uri
[contact port public-key font-file] [contact port public-key font-file]
(let [theme (theme/get-theme) (let [theme (theme/get-theme)
{:keys [images ens-name]} contact {:keys [images ens-name customization-color]} contact
images images
(reduce (fn [acc image] (reduce (fn [acc image]
(let [image-name (:type image) (let [image-name (:type image)
@ -63,13 +63,14 @@
images images
{:thumbnail {:thumbnail
{:fn (image-server/get-initials-avatar-uri-fn {:fn (image-server/get-initials-avatar-uri-fn
{:port port {:port port
:ratio pixel-ratio/ratio :ratio pixel-ratio/ratio
:public-key public-key :public-key public-key
:override-ring? (when ens-name false) :override-ring? (when ens-name false)
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:theme theme :customization-color customization-color
:font-file font-file})}})] :theme theme
:font-file font-file})}})]
(assoc contact :images images))) (assoc contact :images images)))

View File

@ -61,9 +61,9 @@
:<- [:mediaserver/port] :<- [:mediaserver/port]
:<- [:initials-avatar-font-file] :<- [:initials-avatar-font-file]
(fn [[profiles port font-file] [_ target-key-uid]] (fn [[profiles port font-file] [_ target-key-uid]]
(let [{:keys [images ens-name?] :as profile} (get profiles target-key-uid) (let [{:keys [images ens-name? customization-color] :as profile} (get profiles target-key-uid)
image-name (-> images first :type) image-name (-> images first :type)
override-ring? (when ens-name? false)] override-ring? (when ens-name? false)]
(when profile (when profile
{:fn {:fn
(if image-name (if image-name
@ -74,13 +74,14 @@
:theme (theme/get-theme) :theme (theme/get-theme)
:override-ring? override-ring?}) :override-ring? override-ring?})
(image-server/get-initials-avatar-uri-fn (image-server/get-initials-avatar-uri-fn
{:port port {:port port
:ratio pixel-ratio/ratio :ratio pixel-ratio/ratio
:key-uid target-key-uid :key-uid target-key-uid
:theme (theme/get-theme) :theme (theme/get-theme)
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:override-ring? override-ring? :customization-color customization-color
:font-file font-file}))})))) :override-ring? override-ring?
:font-file font-file}))}))))
;; DEPRECATED ;; DEPRECATED
;; use `:profile/public-key` instead ;; use `:profile/public-key` instead
@ -319,33 +320,35 @@
(defn- replace-multiaccount-image-uri (defn- replace-multiaccount-image-uri
[profile ens-names port font-file avatar-opts] [profile ens-names port font-file avatar-opts]
(let [{:keys [key-uid ens-name? images]} profile (let [{:keys [key-uid ens-name? images
ens-name? (or ens-name? (seq ens-names)) customization-color]} profile
theme (theme/get-theme) ens-name? (or ens-name? (seq ens-names))
avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false)) theme (theme/get-theme)
images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}] avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false))
(let [uri-fn (image-server/get-account-image-uri-fn images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}]
(merge (let [uri-fn (image-server/get-account-image-uri-fn
{:port port (merge
:ratio pixel-ratio/ratio {:port port
:image-name image-name :ratio pixel-ratio/ratio
:key-uid key-uid :image-name image-name
:theme theme} :key-uid key-uid
avatar-opts))] :theme theme}
(assoc image :fn uri-fn))) avatar-opts))]
images) (assoc image :fn uri-fn)))
new-images (if (seq images-with-uri) images)
images-with-uri new-images (if (seq images-with-uri)
[{:fn (image-server/get-initials-avatar-uri-fn images-with-uri
(merge {:port port [{:fn (image-server/get-initials-avatar-uri-fn
:ratio pixel-ratio/ratio (merge {:port port
:uppercase-ratio :ratio pixel-ratio/ratio
(:uppercase-ratio :uppercase-ratio
constants/initials-avatar-font-conf) (:uppercase-ratio
:key-uid key-uid constants/initials-avatar-font-conf)
:theme theme :key-uid key-uid
:font-file font-file} :customization-color customization-color
avatar-opts))}])] :theme theme
:font-file font-file}
avatar-opts))}])]
(assoc profile :images new-images))) (assoc profile :images new-images)))
(re-frame/reg-sub (re-frame/reg-sub

View File

@ -1,5 +1,6 @@
(ns utils.image-server (ns utils.image-server
(:require (:require
[quo.foundations.colors :as colors]
[react-native.fs :as utils.fs] [react-native.fs :as utils.fs]
[react-native.platform :as platform] [react-native.platform :as platform]
[schema.core :as schema] [schema.core :as schema]
@ -139,9 +140,10 @@
check `get-font-file-ready` for `font-file` check `get-font-file-ready` for `font-file`
`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 customization-color
font-size font-file uppercase-ratio indicator-size indicator-border color font-size font-file uppercase-ratio indicator-size
indicator-center-to-edge indicator-color full-name ring-width ratio]}] indicator-border indicator-center-to-edge indicator-color full-name
ring-width ratio]}]
(str (str
image-server-uri-prefix image-server-uri-prefix
port port
@ -155,7 +157,7 @@
"&size=" "&size="
(Math/round (* size ratio)) (Math/round (* size ratio))
"&bgColor=" "&bgColor="
(js/encodeURIComponent background-color) (js/encodeURIComponent (colors/resolve-color customization-color theme))
"&color=" "&color="
(js/encodeURIComponent color) (js/encodeURIComponent color)
"&fontSize=" "&fontSize="
@ -188,10 +190,11 @@
[:cat [:cat
[:map [:map
[:color string?] [:color string?]
[:background-color string?] [:theme :schema.common/theme]
[:size number?] [:size number?]
[:ratio float?] [:ratio float?]
[:uppercase-ratio number?] [:uppercase-ratio number?]
[:customization-color :schema.quo/customization-color]
[:font-size number?] [:font-size number?]
[:font-file string?]]] [:font-file string?]]]
[:string]]) [:string]])
@ -204,10 +207,11 @@
check `get-font-file-ready` for `font-file` check `get-font-file-ready` for `font-file`
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 ratio uppercase-ratio]}] [{:keys [port public-key key-uid theme override-ring? font-file ratio
(fn [{:keys [full-name length size background-color font-size color uppercase-ratio customization-color]}]
indicator-size indicator-border indicator-color indicator-center-to-edge (fn [{:keys [full-name length size font-size color indicator-size indicator-border
ring? ring-width override-theme]}] indicator-color indicator-center-to-edge ring? ring-width
override-theme]}]
(get-initials-avatar-uri (get-initials-avatar-uri
{:port port {:port port
:public-key public-key :public-key public-key
@ -216,7 +220,7 @@
:full-name full-name :full-name full-name
:length length :length length
:size size :size size
:background-color background-color :customization-color customization-color
:theme (if (nil? override-theme) theme override-theme) :theme (if (nil? override-theme) theme override-theme)
:ring? (if (nil? override-ring?) ring? override-ring?) :ring? (if (nil? override-ring?) ring? override-ring?)
:ring-width ring-width :ring-width ring-width

View File

@ -1,6 +1,7 @@
(ns utils.image-server-test (ns utils.image-server-test
(:require (:require
[cljs.test :as t] [cljs.test :as t]
[quo.foundations.colors :as colors]
[utils.image-server :as sut])) [utils.image-server :as sut]))
(t/deftest get-account-image-uri (t/deftest get-account-image-uri
@ -25,6 +26,7 @@
(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
colors/resolve-color str
sut/timestamp (constantly "timestamp")] sut/timestamp (constantly "timestamp")]
(t/is (t/is
(= (=
@ -38,7 +40,7 @@
:size 48 :size 48
:theme :light :theme :light
:ring? "ring?" :ring? "ring?"
:background-color "background-color" :customization-color :blue
:color "#0E162000" :color "#0E162000"
:font-size 12 :font-size 12
:font-file "/font/Inter Medium.otf" :font-file "/font/Inter Medium.otf"
@ -47,4 +49,4 @@
:indicator-center-to-edge 6 :indicator-center-to-edge 6
:indicator-color "#0E1620" :indicator-color "#0E1620"
:ring-width 4}) :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=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8")))) "https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=%3Ablue%3Alight&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))

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.178.0", "version": "v0.179.0",
"commit-sha1": "eb13459fa0ef9404f71b239a50f8e8c03ef8d0e6", "commit-sha1": "0db27a8be6b482c3d4687909e156e38654911f88",
"src-sha256": "0zgpr2pzcjgivn9fmm8z4krhm9fslvbfvmwv9k788x1lj6q10fd0" "src-sha256": "0qcdf90sz0y0486dsgjindanavilkh9czzijlk8r0zz867n5b896"
} }