feat: contact CustomizationColor (#19087)
This commit is contained in:
parent
b0d2e6e5d7
commit
b0964eff64
|
@ -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
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 "")
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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}]]))
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)))
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"))))
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
|
||||
"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"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue