From 7d9709ee678de416151286be93a88f3afb1f4ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Wed, 1 Mar 2023 14:54:40 -0600 Subject: [PATCH] Improve chat Avatar (#15036) --- resources/images/mock/ring.png | Bin 0 -> 989 bytes src/quo2/components/avatars/user_avatar.cljs | 194 ++++++++---------- src/quo2/components/list_items/user_list.cljs | 3 +- .../components/profile/profile_card/view.cljs | 3 +- .../profile/select_profile/view.cljs | 44 ++-- src/status_im/react_native/resources.cljs | 3 +- src/status_im2/common/home/view.cljs | 8 +- .../chat/home/chat_list_item/view.cljs | 50 +++-- .../chat/messages/content/deleted/view.cljs | 1 - .../contexts/chat/messages/content/view.cljs | 3 +- .../contexts/chat/messages/view.cljs | 13 +- .../quo_preview/avatars/user_avatar.cljs | 12 +- src/status_im2/contexts/shell/cards/view.cljs | 3 +- 13 files changed, 164 insertions(+), 173 deletions(-) create mode 100644 resources/images/mock/ring.png diff --git a/resources/images/mock/ring.png b/resources/images/mock/ring.png new file mode 100644 index 0000000000000000000000000000000000000000..792a2f878262cd9cd27d7898e7903ff3f1230e04 GIT binary patch literal 989 zcmV<310wv1P)!`>_q_L=b3cY)2p2djhfxp? z%F&i$Ny&b`U6tZUDS>fEj+bbRswVAHRE6AG*E+Xz$Hccvjkg8t$%DTh;q7;C<`~WC z5gKuN)m2>s&vN#_#ri4UsTSvnPnrgI`)d;Xt(?(OLVEEU-D^qfu?bJ449K zbPH@OpiM{?o;M2SoQTnD$4}V$dA?NdQ>EMge_yO2b4gD!ChdL#T#ah_6GoqH00000 LNkvXXu0mjf full-name $ + (string/split $ " ") + (map (comp string/upper-case first) $) + (take amount-initials $) + (string/join $)) + font-size (get-in sizes [size :font-size])] + [rn/view {:style (initials-style inner-dimensions outer-dimensions)} + [text/text + {:style {:color colors/white-opa-70} + :weight :semi-bold + :size font-size} + initials]])) (defn user-avatar - [{:keys [ring? - online? - size - status-indicator? - profile-picture - full-name] - :or {full-name "empty name" - status-indicator? true + "If no `profile-picture` is given, draws the initials based on the `full-name` and + uses `ring-background` to display the ring behind the initials when given. Otherwise, + shows the profile picture which already comes with the ring drawn over it." + [{:keys [full-name status-indicator? online? size profile-picture ring-background] + :or {status-indicator? true online? true - size :big - ring? true}}] - (let [initials (if full-name - (reduce str (map first (split full-name " "))) - "") - first-initial-letter (if full-name - (or (first full-name) "") - "") - identicon? (contains? identicon-sizes size) - small? (contains? small-sizes size) - outer-dimensions (get-in sizes [size :outer]) - inner-dimensions (get-in sizes - [size - (if ring? - :inner - :outer)]) - font-size (get-in sizes [size :font-size]) - icon-text (if-not (or (blank? first-initial-letter) - (blank? initials)) - (if small? - first-initial-letter - initials) - "")] + size :big}}] + (let [full-name (or full-name "empty name") + draw-ring? (and ring-background (valid-ring-sizes size)) + outer-dimensions (get-in sizes [size :outer]) + inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])] [rn/view - {:accessibility-label :user-avatar - :style {:width outer-dimensions - :height outer-dimensions - :border-radius outer-dimensions}} - (when (and false (and ring? identicon?)) ;;TODO not implemented yet - [icons/icon :i/identicon-ring - {:size outer-dimensions - :no-color true}]) - (if profile-picture - ;; display image + {:style (outer-styles outer-dimensions) + :accessibility-label :user-avatar} + ;; The `profile-picture` already has the ring in it + (when-let [image (or profile-picture ring-background)] [fast-image/fast-image - {:source profile-picture - :style (container-styling inner-dimensions outer-dimensions)}] - ;; else display initials - [container inner-dimensions outer-dimensions - ^{:key :icon-text} - [text/text - {:weight :semi-bold - :size font-size - :style {:color colors/white-opa-70}} - (upper-case icon-text)]]) - [dot-indicator size status-indicator? online? ring? (dark?)]])) + {:style (outer-styles outer-dimensions) + :source image}]) + (when-not profile-picture + [initials-avatar + {:full-name full-name + :size size + :inner-dimensions inner-dimensions + :outer-dimensions outer-dimensions}]) + (when status-indicator? + [dot-indicator + {:size size + :online? online? + :ring? draw-ring? + :dark? (dark?)}])])) diff --git a/src/quo2/components/list_items/user_list.cljs b/src/quo2/components/list_items/user_list.cljs index 75bc40e645..c63dd1f5a6 100644 --- a/src/quo2/components/list_items/user_list.cljs +++ b/src/quo2/components/list_items/user_list.cljs @@ -49,8 +49,7 @@ :profile-picture photo-path :status-indicator? true :online? online? - :size :small - :ring? false}] + :size :small}] [rn/view {:style {:margin-left 8}} [author/author {:primary-name primary-name diff --git a/src/quo2/components/profile/profile_card/view.cljs b/src/quo2/components/profile/profile_card/view.cljs index 061717d967..5de809fbeb 100644 --- a/src/quo2/components/profile/profile_card/view.cljs +++ b/src/quo2/components/profile/profile_card/view.cljs @@ -25,8 +25,7 @@ :profile-picture profile-picture :override-theme :dark :size :medium - :status-indicator? false - :ring? true}] + :status-indicator? false}] [button/button {:size 32 :type :blur-bg diff --git a/src/quo2/components/profile/select_profile/view.cljs b/src/quo2/components/profile/select_profile/view.cljs index bdfb41932f..40ad56e10e 100644 --- a/src/quo2/components/profile/select_profile/view.cljs +++ b/src/quo2/components/profile/select_profile/view.cljs @@ -24,29 +24,31 @@ (let [internal-selected? (reagent/atom (or default-selected? false))] (fn [{:keys [selected? profile-picture + ring-background name customization-color on-change] :or {customization-color :turquoise}}] - (when (and (not (nil? selected?)) (not= @internal-selected? selected?)) - (reset! internal-selected? selected?)) - [rn/touchable-opacity - {:style (style/container customization-color @internal-selected?) - :on-press #(on-change-handler internal-selected? on-change) - :active-opacity 1 - :accessibility-label :select-profile} - [rn/view {:style style/header} - [user-avatar/user-avatar - {:full-name name - :profile-picture profile-picture - :status-indicator? false - :ring? true - :size :medium}] - [rn/view {:style (style/select-radio @internal-selected?)} - (when @internal-selected? [rn/view {:style style/select-radio-inner}])]] - [text/text - {:size :heading-2 - :weight :semi-bold - :style style/profile-name - } name]]))) + (let [avatar-image-key (if profile-picture :profile-picture :ring-background) + picture (or profile-picture ring-background)] + (when (and (not (nil? selected?)) (not= @internal-selected? selected?)) + (reset! internal-selected? selected?)) + [rn/touchable-opacity + {:style (style/container customization-color @internal-selected?) + :on-press #(on-change-handler internal-selected? on-change) + :active-opacity 1 + :accessibility-label :select-profile} + [rn/view {:style style/header} + [user-avatar/user-avatar + {:full-name name + :status-indicator? false + :size :medium + avatar-image-key picture}] + [rn/view {:style (style/select-radio @internal-selected?)} + (when @internal-selected? [rn/view {:style style/select-radio-inner}])]] + [text/text + {:size :heading-2 + :weight :semi-bold + :style style/profile-name} + name]])))) diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index 06d8202273..914cf2a748 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -69,7 +69,8 @@ :user-picture-male5 (js/require "../resources/images/mock/user_picture_male5.png") :coinbase (js/require "../resources/images/mock/coinbase.png") :small-opt-card-icon (js/require "../resources/images/mock/small_opt_card_icon.png") - :small-opt-card-main (js/require "../resources/images/mock/small_opt_card_main.png")}) + :small-opt-card-main (js/require "../resources/images/mock/small_opt_card_main.png") + :ring (js/require "../resources/images/mock/ring.png")}) (defn get-theme-image [k] diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs index 3e0b4b9536..618c8f558b 100644 --- a/src/status_im2/common/home/view.cljs +++ b/src/status_im2/common/home/view.cljs @@ -52,10 +52,7 @@ new-notifications? (pos? notif-count) notification-indicator :unread-dot counter-label "0"] - [rn/view - {:style (merge - {:height 56} - style)} + [rn/view {:style (assoc style :height 56)} ;; Left Section [rn/touchable-without-feedback {:on-press open-profile} [rn/view @@ -64,8 +61,7 @@ :top 12}} [quo/user-avatar (merge - {:ring? true - :status-indicator? true + {:status-indicator? true :size :small} avatar)]]] ;; Right Section diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs index 18e9b0a4af..b817cc7069 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs @@ -102,33 +102,39 @@ (datetime/to-short-str timestamp)]]) (defn avatar-view - [group-chat color display-name photo-path chat-id] - (if group-chat + [{:keys [contact chat-id full-name color]}] + (if contact ; `contact` is passed when it's not a group chat + (let [online? (rf/sub [:visibility-status-updates/online? chat-id]) + photo-path (rf/sub [:chats/photo-path chat-id]) + image-key (if (seq (:images contact)) :profile-picture :ring-background)] + [quo/user-avatar + {:full-name full-name + :size :small + :online? online? + image-key photo-path}]) [quo/group-avatar {:color color - :size :medium}] - (let [online? (rf/sub [:visibility-status-updates/online? chat-id])] - [quo/user-avatar - {:full-name display-name - :online? online? - :profile-picture photo-path - :size :small}]))) + :size :medium}])) (defn chat-list-item - [item] - (let [{:keys [chat-id color group-chat last-message timestamp name unviewed-mentions-count - unviewed-messages-count]} - item - display-name - (if group-chat name (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))) - contact (when-not group-chat (rf/sub [:contacts/contact-by-address chat-id])) - photo-path (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path chat-id]))] + [{:keys [chat-id group-chat color name unviewed-messages-count unviewed-mentions-count + timestamp last-message] + :as item}] + (let [display-name (if group-chat + name + (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))) + contact (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id]))] [rn/touchable-opacity - (merge {:style (style/container) - :on-press (open-chat chat-id) - :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (fn [] [actions/chat-actions item false])}])}) - [avatar-view group-chat color display-name photo-path chat-id] + {:style (style/container) + :on-press (open-chat chat-id) + :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] [actions/chat-actions item false])}])} + [avatar-view + {:contact contact + :chat-id chat-id + :full-name display-name + :color color}] [rn/view {:style {:margin-left 8}} [name-view display-name contact timestamp] (if (string/blank? (get-in last-message [:content :parsed-text])) diff --git a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs index b694028912..fff718cd3d 100644 --- a/src/status_im2/contexts/chat/messages/content/deleted/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/deleted/view.cljs @@ -17,7 +17,6 @@ {:full-name display-name :profile-picture profile-picture :status-indicator? false - :ring? false :size :xxxs}]] [quo/author {:primary-name display-name}] [quo/text diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index fc498bbe03..549e220f5d 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -39,8 +39,7 @@ :profile-picture photo-path :status-indicator? true :online? online? - :size :small - :ring? false}]]]) + :size :small}]]]) [rn/view {:padding-top 2 :width 32}])) (defn author diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index 00f119ab29..26790c945f 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -32,19 +32,22 @@ (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) (str emoji " " chat-name)) online? (rf/sub [:visibility-status-updates/online? chat-id]) - contact (when-not group-chat (rf/sub [:contacts/contact-by-address chat-id])) - photo-path (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path chat-id]))] + contact (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id])) + photo-path (rf/sub [:chats/photo-path chat-id]) + avatar-image-key (if (seq (:images contact)) + :profile-picture + :ring-background)] [quo/page-nav {:align-mid? true - :mid-section (if group-chat {:type :text-only :main-text display-name} {:type :user-avatar :avatar {:full-name display-name :online? online? - :profile-picture photo-path - :size :medium} + :size :medium + avatar-image-key photo-path} :main-text display-name :on-press #(debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)}) diff --git a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs index 1e5f5ac318..2ffde75cad 100644 --- a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs @@ -28,7 +28,7 @@ {:label "Status Indicator" :key :status-indicator? :type :boolean} - {:label "Identicon Ring" + {:label "Identicon Ring (applies only when there's no profile picture)" :key :ring? :type :boolean} {:label "Full name separated by space" @@ -49,8 +49,7 @@ (let [state (reagent/atom {:full-name "A Y" :status-indicator? true :online? true - :size :medium - :ring? true})] + :size :medium})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} @@ -60,7 +59,12 @@ {:padding-vertical 60 :flex-direction :row :justify-content :center} - [quo2/user-avatar @state]]]]))) + (let [{:keys [profile-picture ring?]} @state + ring-bg (resources/get-mock-image :ring) + params (cond-> @state + (and (not profile-picture) ring?) + (assoc :ring-background ring-bg))] + [quo2/user-avatar params])]]]))) (defn preview-user-avatar [] diff --git a/src/status_im2/contexts/shell/cards/view.cljs b/src/status_im2/contexts/shell/cards/view.cljs index 716dc2889b..c336f6e339 100644 --- a/src/status_im2/contexts/shell/cards/view.cljs +++ b/src/status_im2/contexts/shell/cards/view.cljs @@ -109,8 +109,7 @@ (case type shell.constants/one-to-one-chat-card [quo/user-avatar - (merge {:ring? false - :size :medium + (merge {:size :medium :status-indicator? false} avatar-params)]