From b0964eff64db9abea872a6e6cedf9cb1bd77fd4f Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Wed, 3 Apr 2024 23:15:26 +0800 Subject: [PATCH] feat: contact CustomizationColor (#19087) --- .../status_im/multiaccounts/update/core.cljs | 2 +- .../components/avatars/user_avatar/view.cljs | 15 ++-- .../components/profile/profile_card/view.cljs | 11 ++- src/schema/quo.cljs | 6 +- .../contexts/chat/contacts/events.cljs | 7 +- .../chat/messenger/messages/list/view.cljs | 31 ++++---- .../profile/contact/add_nickname/view.cljs | 4 +- .../profile/contact/block_contact/view.cljs | 4 +- .../profile/contact/contact_request/view.cljs | 3 +- .../contexts/profile/contact/header/view.cljs | 2 - .../contexts/profile/contact/view.cljs | 8 +- .../profile/edit/accent_colour/view.cljs | 3 +- .../contexts/profile/settings/events.cljs | 2 +- src/status_im/subs/contact.cljs | 17 ++-- src/status_im/subs/profile.cljs | 77 ++++++++++--------- src/utils/image_server.cljs | 24 +++--- src/utils/image_server_test.cljs | 6 +- status-go-version.json | 6 +- 18 files changed, 121 insertions(+), 107 deletions(-) diff --git a/src/legacy/status_im/multiaccounts/update/core.cljs b/src/legacy/status_im/multiaccounts/update/core.cljs index 9c94d8edf7..aba6e98035 100644 --- a/src/legacy/status_im/multiaccounts/update/core.cljs +++ b/src/legacy/status_im/multiaccounts/update/core.cljs @@ -10,7 +10,7 @@ [{:keys [db]}] (let [{:keys [name preferred-name display-name address]} (:profile/profile db)] {: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")}]})) (rf/defn update-multiaccount-account-name diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index f708696ab2..8f2cd48183 100644 --- a/src/quo/components/avatars/user_avatar/view.cljs +++ b/src/quo/components/avatars/user_avatar/view.cljs @@ -11,7 +11,8 @@ utils.string)) (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]) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] [rn/view @@ -30,13 +31,12 @@ 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. 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] - :or {size :big - status-indicator? true - online? true - ring? true - customization-color :blue} + :or {size :big + status-indicator? true + online? true + ring? true} :as props}] (let [full-name (or full-name "Your Name") ;; image generated with `profile-picture-fn` is round cropped @@ -75,7 +75,6 @@ (: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? diff --git a/src/quo/components/profile/profile_card/view.cljs b/src/quo/components/profile/profile_card/view.cljs index 070d435e35..90ded3c556 100644 --- a/src/quo/components/profile/profile_card/view.cljs +++ b/src/quo/components/profile/profile_card/view.cljs @@ -54,12 +54,11 @@ [rn/view {:style style/card-header} [user-avatar/user-avatar - {:full-name name - :profile-picture profile-picture - :size :medium - :status-indicator? false - :customization-color customization-color - :static? true}] + {:full-name name + :profile-picture profile-picture + :size :medium + :status-indicator? false + :static? true}] [rn/view {:flex-direction :row} (when show-logged-in? [tag/tag diff --git a/src/schema/quo.cljs b/src/schema/quo.cljs index d72993e61f..9a7b93ec25 100644 --- a/src/schema/quo.cljs +++ b/src/schema/quo.cljs @@ -1,5 +1,6 @@ (ns schema.quo (:require + [quo.foundations.colors :as colors] [schema.registry :as registry])) (def ^:private ?profile-picture-fn-params @@ -23,6 +24,9 @@ [:map [:fn [:=> [:cat ?profile-picture-fn-params] :string]]]]) +(def ^:private ?customization-color (into [:enum] colors/account-colors)) + (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)) diff --git a/src/status_im/contexts/chat/contacts/events.cljs b/src/status_im/contexts/chat/contacts/events.cljs index 5048db9a17..6f7c8f2414 100644 --- a/src/status_im/contexts/chat/contacts/events.cljs +++ b/src/status_im/contexts/chat/contacts/events.cljs @@ -27,7 +27,12 @@ :has-added-us? (oops/oget js-contact "hasAddedUs") :mutual? (oops/oget js-contact "mutual") :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 [db chats-js] diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 876f446bef..4b282b9b81 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -328,19 +328,24 @@ (defn messages-list-content [{:keys [insets distance-from-list-top content-height layout-height distance-atom chat-screen-layout-calculations-complete? chat-list-scroll-y]}] - (let [theme (quo.theme/use-theme-value) - chat (rf/sub [:chats/current-chat-chat-view]) - community-channel? (= constants/community-chat-type (:chat-type chat)) - customization-color (if community-channel? - (or (:color chat) - (rf/sub [:communities/community-color (:community-id 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 chat)]) - recording? (rf/sub [:chats/recording?])] + (let [theme (quo.theme/use-theme-value) + {:keys [chat-type chat-id] :as chat} (rf/sub [:chats/current-chat-chat-view]) + one-to-one-chat? (= chat-type constants/one-to-one-chat-type) + community-channel? (= constants/community-chat-type chat-type) + {contact-customization-color + :customization-color} (when one-to-one-chat? + (rf/sub [:contacts/contact-by-identity chat-id])) + customization-color (cond community-channel? + (or (:color chat) + (rf/sub [:communities/community-color + (:community-id chat)])) + one-to-one-chat? contact-customization-color + :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-shrink 1}} ;; Keeps flat list on top [reanimated/flat-list diff --git a/src/status_im/contexts/profile/contact/add_nickname/view.cljs b/src/status_im/contexts/profile/contact/add_nickname/view.cljs index df538c142b..a59d1dc846 100644 --- a/src/status_im/contexts/profile/contact/add_nickname/view.cljs +++ b/src/status_im/contexts/profile/contact/add_nickname/view.cljs @@ -14,9 +14,7 @@ [] (let [{:keys [public-key primary-name nickname customization-color] :as profile} (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 customization-color full-name (profile.utils/displayed-name profile) profile-picture (profile.utils/photo profile) [unsaved-nickname set-unsaved-nickname] (rn/use-state nickname) diff --git a/src/status_im/contexts/profile/contact/block_contact/view.cljs b/src/status_im/contexts/profile/contact/block_contact/view.cljs index 58b0782f22..d9fb9badb6 100644 --- a/src/status_im/contexts/profile/contact/block_contact/view.cljs +++ b/src/status_im/contexts/profile/contact/block_contact/view.cljs @@ -13,9 +13,7 @@ [] (let [{:keys [customization-color contact-request-state public-key] :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 customization-color full-name (profile.utils/displayed-name contact) profile-picture (profile.utils/photo contact) on-block-press (rn/use-callback diff --git a/src/status_im/contexts/profile/contact/contact_request/view.cljs b/src/status_im/contexts/profile/contact/contact_request/view.cljs index 17c5e3334f..bf7ef6914d 100644 --- a/src/status_im/contexts/profile/contact/contact_request/view.cljs +++ b/src/status_im/contexts/profile/contact/contact_request/view.cljs @@ -12,8 +12,7 @@ [] (let [{:keys [public-key customization-color] :as profile} (rf/sub [:contacts/current-contact]) - ;; TODO: remove default color when #18733 merged. - customization-color (or customization-color constants/profile-default-color) + customization-color customization-color full-name (profile.utils/displayed-name profile) profile-picture (profile.utils/photo profile) [message set-message] (rn/use-state "") diff --git a/src/status_im/contexts/profile/contact/header/view.cljs b/src/status_im/contexts/profile/contact/header/view.cljs index 23c03848c3..a8f89962f9 100644 --- a/src/status_im/contexts/profile/contact/header/view.cljs +++ b/src/status_im/contexts/profile/contact/header/view.cljs @@ -29,8 +29,6 @@ (let [{:keys [public-key customization-color ens-name nickname secondary-name emoji-hash bio blocked? contact-request-state] :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) full-name (profile.utils/displayed-name contact) profile-picture (profile.utils/photo contact) diff --git a/src/status_im/contexts/profile/contact/view.cljs b/src/status_im/contexts/profile/contact/view.cljs index 541aecf3c4..a3f31478a9 100644 --- a/src/status_im/contexts/profile/contact/view.cljs +++ b/src/status_im/contexts/profile/contact/view.cljs @@ -4,7 +4,6 @@ [quo.theme] [react-native.reanimated :as reanimated] [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.header.view :as contact-header] [status-im.contexts.shell.jump-to.constants :as jump-to.constants] @@ -25,6 +24,7 @@ (defn view [] (let [{:keys [customization-color]} (rf/sub [:contacts/current-contact]) + profile-customization-color (rf/sub [:profile/customization-color]) scroll-y (reanimated/use-shared-value 0) theme (quo.theme/use-theme-value)] [:<> @@ -32,9 +32,7 @@ {:navigate-back? true :height 148 :on-scroll #(reanimated/set-shared-value scroll-y %) - ;; TODO(@mohsen): remove default color, - ;; https://github.com/status-im/status-mobile/issues/18733 - :cover-color (colors/resolve-color (or customization-color constants/profile-default-color) + :cover-color (colors/resolve-color customization-color theme 20) :background-color (colors/theme-colors colors/white colors/neutral-95 theme) @@ -45,7 +43,7 @@ [quo/floating-shell-button {:jump-to {:on-press on-jump-to - :customization-color customization-color + :customization-color profile-customization-color :label (i18n/label :t/jump-to)}} {:position :absolute :bottom jump-to.constants/floating-shell-button-height}]])) diff --git a/src/status_im/contexts/profile/edit/accent_colour/view.cljs b/src/status_im/contexts/profile/edit/accent_colour/view.cljs index e0f8db4a0e..b64648c78f 100644 --- a/src/status_im/contexts/profile/edit/accent_colour/view.cljs +++ b/src/status_im/contexts/profile/edit/accent_colour/view.cljs @@ -16,7 +16,8 @@ unsaved-custom-color (reagent/atom customization-color constants/profile-default-color) on-change #(reset! unsaved-custom-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) display-name (profile.utils/displayed-name profile)] (rn/use-effect diff --git a/src/status_im/contexts/profile/settings/events.cljs b/src/status_im/contexts/profile/settings/events.cljs index d4714ca890..310e446296 100644 --- a/src/status_im/contexts/profile/settings/events.cljs +++ b/src/status_im/contexts/profile/settings/events.cljs @@ -29,7 +29,7 @@ (let [{:keys [name preferred-name display-name]} (:profile/profile db)] [: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")}]]))]})) (rf/reg-event-fx :profile.settings/change-webview-debug diff --git a/src/status_im/subs/contact.cljs b/src/status_im/subs/contact.cljs index 29a97fc5ec..b109cb1a8d 100644 --- a/src/status_im/subs/contact.cljs +++ b/src/status_im/subs/contact.cljs @@ -35,7 +35,7 @@ (defn- replace-contact-image-uri [contact port public-key font-file] (let [theme (theme/get-theme) - {:keys [images ens-name]} contact + {:keys [images ens-name customization-color]} contact images (reduce (fn [acc image] (let [image-name (:type image) @@ -63,13 +63,14 @@ images {:thumbnail {:fn (image-server/get-initials-avatar-uri-fn - {:port port - :ratio pixel-ratio/ratio - :public-key public-key - :override-ring? (when ens-name false) - :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) - :theme theme - :font-file font-file})}})] + {:port port + :ratio pixel-ratio/ratio + :public-key public-key + :override-ring? (when ens-name false) + :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) + :customization-color customization-color + :theme theme + :font-file font-file})}})] (assoc contact :images images))) diff --git a/src/status_im/subs/profile.cljs b/src/status_im/subs/profile.cljs index e40d800a9d..c0529e30b9 100644 --- a/src/status_im/subs/profile.cljs +++ b/src/status_im/subs/profile.cljs @@ -61,9 +61,9 @@ :<- [:mediaserver/port] :<- [:initials-avatar-font-file] (fn [[profiles port font-file] [_ target-key-uid]] - (let [{:keys [images ens-name?] :as profile} (get profiles target-key-uid) - image-name (-> images first :type) - override-ring? (when ens-name? false)] + (let [{:keys [images ens-name? customization-color] :as profile} (get profiles target-key-uid) + image-name (-> images first :type) + override-ring? (when ens-name? false)] (when profile {:fn (if image-name @@ -74,13 +74,14 @@ :theme (theme/get-theme) :override-ring? override-ring?}) (image-server/get-initials-avatar-uri-fn - {:port port - :ratio pixel-ratio/ratio - :key-uid target-key-uid - :theme (theme/get-theme) - :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) - :override-ring? override-ring? - :font-file font-file}))})))) + {:port port + :ratio pixel-ratio/ratio + :key-uid target-key-uid + :theme (theme/get-theme) + :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf) + :customization-color customization-color + :override-ring? override-ring? + :font-file font-file}))})))) ;; DEPRECATED ;; use `:profile/public-key` instead @@ -319,33 +320,35 @@ (defn- replace-multiaccount-image-uri [profile ens-names port font-file avatar-opts] - (let [{:keys [key-uid ens-name? images]} profile - ens-name? (or ens-name? (seq ens-names)) - theme (theme/get-theme) - avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false)) - images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}] - (let [uri-fn (image-server/get-account-image-uri-fn - (merge - {:port port - :ratio pixel-ratio/ratio - :image-name image-name - :key-uid key-uid - :theme theme} - avatar-opts))] - (assoc image :fn uri-fn))) - images) - new-images (if (seq images-with-uri) - images-with-uri - [{:fn (image-server/get-initials-avatar-uri-fn - (merge {:port port - :ratio pixel-ratio/ratio - :uppercase-ratio - (:uppercase-ratio - constants/initials-avatar-font-conf) - :key-uid key-uid - :theme theme - :font-file font-file} - avatar-opts))}])] + (let [{:keys [key-uid ens-name? images + customization-color]} profile + ens-name? (or ens-name? (seq ens-names)) + theme (theme/get-theme) + avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false)) + images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}] + (let [uri-fn (image-server/get-account-image-uri-fn + (merge + {:port port + :ratio pixel-ratio/ratio + :image-name image-name + :key-uid key-uid + :theme theme} + avatar-opts))] + (assoc image :fn uri-fn))) + images) + new-images (if (seq images-with-uri) + images-with-uri + [{:fn (image-server/get-initials-avatar-uri-fn + (merge {:port port + :ratio pixel-ratio/ratio + :uppercase-ratio + (:uppercase-ratio + constants/initials-avatar-font-conf) + :key-uid key-uid + :customization-color customization-color + :theme theme + :font-file font-file} + avatar-opts))}])] (assoc profile :images new-images))) (re-frame/reg-sub diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 33f44901ec..3b9f9b29f9 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -1,5 +1,6 @@ (ns utils.image-server (:require + [quo.foundations.colors :as colors] [react-native.fs :as utils.fs] [react-native.platform :as platform] [schema.core :as schema] @@ -139,9 +140,10 @@ check `get-font-file-ready` 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 - font-size font-file uppercase-ratio indicator-size indicator-border - indicator-center-to-edge indicator-color full-name ring-width ratio]}] + [{:keys [port public-key key-uid theme ring? length size customization-color + color font-size font-file uppercase-ratio indicator-size + indicator-border indicator-center-to-edge indicator-color full-name + ring-width ratio]}] (str image-server-uri-prefix port @@ -155,7 +157,7 @@ "&size=" (Math/round (* size ratio)) "&bgColor=" - (js/encodeURIComponent background-color) + (js/encodeURIComponent (colors/resolve-color customization-color theme)) "&color=" (js/encodeURIComponent color) "&fontSize=" @@ -188,10 +190,11 @@ [:cat [:map [:color string?] - [:background-color string?] + [:theme :schema.common/theme] [:size number?] [:ratio float?] [:uppercase-ratio number?] + [:customization-color :schema.quo/customization-color] [:font-size number?] [:font-file string?]]] [:string]]) @@ -204,10 +207,11 @@ check `get-font-file-ready` for `font-file` check `get-account-image-uri-fn` for `override-ring?`" - [{:keys [port public-key key-uid theme override-ring? font-file ratio uppercase-ratio]}] - (fn [{:keys [full-name length size background-color font-size color - indicator-size indicator-border indicator-color indicator-center-to-edge - ring? ring-width override-theme]}] + [{:keys [port public-key key-uid theme override-ring? font-file ratio + uppercase-ratio customization-color]}] + (fn [{:keys [full-name length size font-size color 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 @@ -216,7 +220,7 @@ :full-name full-name :length length :size size - :background-color background-color + :customization-color customization-color :theme (if (nil? override-theme) theme override-theme) :ring? (if (nil? override-ring?) ring? override-ring?) :ring-width ring-width diff --git a/src/utils/image_server_test.cljs b/src/utils/image_server_test.cljs index 272e5ca0a8..c0b663579a 100644 --- a/src/utils/image_server_test.cljs +++ b/src/utils/image_server_test.cljs @@ -1,6 +1,7 @@ (ns utils.image-server-test (:require [cljs.test :as t] + [quo.foundations.colors :as colors] [utils.image-server :as sut])) (t/deftest get-account-image-uri @@ -25,6 +26,7 @@ (t/deftest get-account-initials-uri (with-redefs [sut/current-theme-index identity + colors/resolve-color str sut/timestamp (constantly "timestamp")] (t/is (= @@ -38,7 +40,7 @@ :size 48 :theme :light :ring? "ring?" - :background-color "background-color" + :customization-color :blue :color "#0E162000" :font-size 12 :font-file "/font/Inter Medium.otf" @@ -47,4 +49,4 @@ :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=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")))) diff --git a/status-go-version.json b/status-go-version.json index ae408faa48..374cb3f824 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.178.0", - "commit-sha1": "eb13459fa0ef9404f71b239a50f8e8c03ef8d0e6", - "src-sha256": "0zgpr2pzcjgivn9fmm8z4krhm9fslvbfvmwv9k788x1lj6q10fd0" + "version": "v0.179.0", + "commit-sha1": "0db27a8be6b482c3d4687909e156e38654911f88", + "src-sha256": "0qcdf90sz0y0486dsgjindanavilkh9czzijlk8r0zz867n5b896" }