Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: contact CustomizationColor #19087

Merged
merged 5 commits into from
Apr 3, 2024
Merged

feat: contact CustomizationColor #19087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f488941
feat: contact CustomizationColor
yqrashawn Mar 4, 2024
1a78028
feat: customization-color for initial avatar
yqrashawn Mar 5, 2024
9c50468
fix: contacts profile page jump to button color
yqrashawn Apr 3, 2024
b339e11
feat: chat list customization color
yqrashawn Apr 3, 2024
1040e15
fix: avatar change while editing profile color
yqrashawn Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/legacy/status_im/multiaccounts/update/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) "" ""]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the meaning of passing this empty string?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it just means do not update profile customization color
profile color is handled by wakuext_setCustomizationColor

:on-success #(log/debug "sent contact update")}]}))

(rf/defn update-multiaccount-account-name
Expand Down
15 changes: 7 additions & 8 deletions src/quo/components/avatars/user_avatar/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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?
Expand Down
11 changes: 5 additions & 6 deletions src/quo/components/profile/profile_card/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion src/schema/quo.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
(ns schema.quo
(:require
[quo.foundations.colors :as colors]
[schema.registry :as registry]))

(def ^:private ?profile-picture-fn-params
Expand All @@ -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))
7 changes: 6 additions & 1 deletion src/status_im/contexts/chat/contacts/events.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
31 changes: 18 additions & 13 deletions src/status_im/contexts/chat/messenger/messages/list/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 1 addition & 3 deletions src/status_im/contexts/profile/contact/add_nickname/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 1 addition & 3 deletions src/status_im/contexts/profile/contact/block_contact/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 1 addition & 2 deletions src/status_im/contexts/profile/contact/contact_request/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 "")
Expand Down
2 changes: 0 additions & 2 deletions src/status_im/contexts/profile/contact/header/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 3 additions & 5 deletions src/status_im/contexts/profile/contact/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -25,16 +24,15 @@
(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)]
[:<>
[scroll-page/scroll-page
{: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)
Expand All @@ -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}]]))
3 changes: 2 additions & 1 deletion src/status_im/contexts/profile/edit/accent_colour/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/contexts/profile/settings/events.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 9 additions & 8 deletions src/status_im/subs/contact.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)))

Expand Down
77 changes: 40 additions & 37 deletions src/status_im/subs/profile.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
Loading