From 6ba89d0c6e964687bdb600d503c3be783fde9855 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Fri, 12 Apr 2024 01:18:21 +0200 Subject: [PATCH] Community channel avatar is missing on Channel screen (#19459) --- .../avatars/group_avatar/style.cljs | 8 + .../components/avatars/group_avatar/view.cljs | 29 +++- .../chat/messenger/messages/list/style.cljs | 12 +- .../chat/messenger/messages/list/view.cljs | 143 ++++++++++-------- .../messenger/messages/navigation/view.cljs | 44 +++--- src/status_im/subs/chats.cljs | 4 +- 6 files changed, 150 insertions(+), 90 deletions(-) diff --git a/src/quo/components/avatars/group_avatar/style.cljs b/src/quo/components/avatars/group_avatar/style.cljs index 99c8875653..cb7f7f1e82 100644 --- a/src/quo/components/avatars/group_avatar/style.cljs +++ b/src/quo/components/avatars/group_avatar/style.cljs @@ -13,3 +13,11 @@ :background-color (colors/theme-colors (colors/custom-color customization-color 50) (colors/custom-color customization-color 60) theme)}) + +(defn avatar-identifier + [theme] + {:text-align :center + :font-size 36 + :color (colors/theme-colors colors/black + colors/white + theme)}) diff --git a/src/quo/components/avatars/group_avatar/view.cljs b/src/quo/components/avatars/group_avatar/view.cljs index f3a585123d..b9440dc64c 100644 --- a/src/quo/components/avatars/group_avatar/view.cljs +++ b/src/quo/components/avatars/group_avatar/view.cljs @@ -1,7 +1,9 @@ (ns quo.components.avatars.group-avatar.view (:require + [clojure.string :as string] [quo.components.avatars.group-avatar.style :as style] [quo.components.icon :as icon] + [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] @@ -21,7 +23,7 @@ (defn- view-internal [_] - (fn [{:keys [size theme customization-color picture icon-name] + (fn [{:keys [size theme customization-color picture icon-name emoji chat-name] :or {size :size-20 customization-color :blue picture nil @@ -38,8 +40,27 @@ {:source picture :style {:width container-size :height container-size}}] - [icon/icon icon-name - {:size icon-size - :color colors/white-opa-70}])]))) + (cond + emoji + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + emoji] + [text/text + {:size :paragraph-1 + :style (dissoc (style/avatar-identifier theme) :font-size)} + emoji]) + chat-name + (if (= size :size-80) + [rn/text + {:style (style/avatar-identifier theme)} + ((comp first string/upper-case) chat-name)] + [text/text + {:size :paragraph-1} + ((comp first string/upper-case) chat-name)]) + :else + [icon/icon icon-name + {:size icon-size + :color colors/white-opa-70}]))]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index 513d3a7bef..c8cf9fb1ed 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -1,6 +1,8 @@ (ns status-im.contexts.chat.messenger.messages.list.style (:require [quo.foundations.colors :as colors] + [quo.foundations.shadows :as shadows] + [quo.theme :as quo.theme] [react-native.reanimated :as reanimated] [status-im.contexts.chat.messenger.messages.constants :as messages.constants])) @@ -23,10 +25,12 @@ [bottom theme top-margin] (reanimated/apply-animations-to-style {:bottom bottom} - {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) - :padding-horizontal 20 - :border-radius 20 - :margin-top top-margin})) + (merge + (shadows/get 2 (quo.theme/get-theme) :inverted) + {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) + :padding-horizontal 20 + :border-radius 20 + :margin-top top-margin}))) (defn header-image [scale top left theme] 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 4b282b9b81..1e6b9bbda9 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.messages.list.view (:require + [clojure.string :as string] [legacy.status-im.ui.screens.chat.group :as chat.group] [oops.core :as oops] [quo.core :as quo] @@ -112,19 +113,24 @@ [rn/view {:style {:height height}}])) (defn list-footer-avatar - [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color]}] - (let [scale (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] - [1 0.4] - messages.constants/default-extrapolation-option) - top (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] - [-44 -12] - messages.constants/default-extrapolation-option) - left (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] - [16 -8] - messages.constants/default-extrapolation-option)] + [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color + emoji chat-type chat-name last-message]}] + (let [scale (reanimated/interpolate + distance-from-list-top + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [1 0.4] + messages.constants/default-extrapolation-option) + top (reanimated/interpolate + distance-from-list-top + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [-44 -12] + messages.constants/default-extrapolation-option) + left (reanimated/interpolate + distance-from-list-top + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [16 -8] + messages.constants/default-extrapolation-option) + community-channel? (= chat-type constants/community-chat-type)] [reanimated/view {:style (style/header-image scale top left theme)} (if group-chat @@ -132,7 +138,10 @@ {:customization-color color :size :size-80 :picture profile-picture - :override-theme :dark}] + :emoji (when (and (not (string/blank? emoji)) + community-channel?) + (string/trim emoji)) + :chat-name chat-name}] [quo/user-avatar {:full-name display-name :online? online? @@ -140,15 +149,17 @@ :size :big}])])) (defn chat-display-name - [{:keys [distance-from-list-top display-name contact theme]}] - (let [top (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] - [0 -35] - messages.constants/default-extrapolation-option) - left (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] - [0 40] - messages.constants/default-extrapolation-option)] + [{:keys [distance-from-list-top display-name contact theme last-message]}] + (let [top (reanimated/interpolate + distance-from-list-top + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 -35] + messages.constants/default-extrapolation-option) + left (reanimated/interpolate + distance-from-list-top + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 40] + messages.constants/default-extrapolation-option)] [reanimated/view {:style (style/user-name-container top left)} [rn/view @@ -195,54 +206,55 @@ muted?)))}]}])) (defn bio-and-actions - [{:keys [distance-from-list-top bio chat-id customization-color]}] - (let [has-bio (seq bio) + [{:keys [distance-from-list-top bio chat-id customization-color last-message description]}] + (let [has-bio (seq (or bio description)) top (reanimated/interpolate distance-from-list-top - [0 messages.constants/header-container-top-margin] + [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] [(if has-bio 8 16) (if has-bio -28 -20)] messages.constants/default-extrapolation-option)] [reanimated/view {:style (style/bio-and-actions top)} (when has-bio - [quo/text bio]) + [quo/text (or bio description)]) [actions chat-id customization-color]])) (defn footer-component [{:keys [chat distance-from-list-top theme customization-color]}] (let [{:keys [chat-id chat-name emoji chat-type - group-chat color]} chat - display-name (cond - (= chat-type constants/one-to-one-chat-type) - (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) - (= chat-type constants/community-chat-type) - (str (when emoji (str emoji " ")) "# " chat-name) - :else (str emoji chat-name)) - {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) - online? (rf/sub [:visibility-status-updates/online? chat-id]) - contact (when-not group-chat - (rf/sub [:contacts/contact-by-address chat-id])) - photo-path (rf/sub [:chats/photo-path chat-id]) - top-margin (+ (safe-area/get-top) - messages.constants/top-bar-height - messages.constants/header-container-top-margin - 32) - background-color (colors/theme-colors - (colors/resolve-color customization-color theme 20) - (colors/resolve-color customization-color theme 40) - theme) - bottom (reanimated/interpolate - distance-from-list-top - [0 messages.constants/header-container-top-margin] - [32 -4] - messages.constants/default-extrapolation-option) - background-opacity (reanimated/interpolate - distance-from-list-top - [messages.constants/header-container-top-margin - (+ messages.constants/header-animation-distance - messages.constants/header-container-top-margin)] - [1 0] - messages.constants/default-extrapolation-option)] + group-chat color description + last-message]} chat + display-name (cond + (= chat-type constants/one-to-one-chat-type) + (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) + (= chat-type constants/community-chat-type) + (str "# " chat-name) + :else (str emoji chat-name)) + {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) + online? (rf/sub [:visibility-status-updates/online? chat-id]) + contact (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id])) + photo-path (rf/sub [:chats/photo-path chat-id]) + top-margin (+ (safe-area/get-top) + messages.constants/top-bar-height + messages.constants/header-container-top-margin + 32) + background-color (colors/theme-colors + (colors/resolve-color customization-color theme 20) + (colors/resolve-color customization-color theme 40) + theme) + bottom (reanimated/interpolate + distance-from-list-top + [0 messages.constants/header-container-top-margin] + [32 -4] + messages.constants/default-extrapolation-option) + background-opacity (reanimated/interpolate + distance-from-list-top + [messages.constants/header-container-top-margin + (+ messages.constants/header-animation-distance + messages.constants/header-container-top-margin)] + [1 0] + messages.constants/default-extrapolation-option)] [:<> [reanimated/view {:style (style/background-container background-color background-opacity top-margin)}] @@ -254,18 +266,25 @@ :theme theme :profile-picture photo-path :group-chat group-chat - :color color}] + :color color + :emoji emoji + :chat-type chat-type + :chat-name chat-name + :last-message last-message}] [chat-display-name {:distance-from-list-top distance-from-list-top :display-name display-name :theme theme :contact contact - :group-chat group-chat}] + :group-chat group-chat + :last-message last-message}] [bio-and-actions {:distance-from-list-top distance-from-list-top :bio bio :chat-id chat-id - :customization-color customization-color}]]])) + :customization-color customization-color + :description description + :last-message last-message}]]])) (defn list-footer [props] diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 4a6623a218..060a480333 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.chat.messenger.messages.navigation.view (:require + [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] [re-frame.db] @@ -28,7 +29,7 @@ [:contacts/contact-two-names-by-identity chat-id])) (= chat-type constants/community-chat-type) - (str (when emoji (str emoji " ")) "# " chat-name) + (str "# " chat-name) :else (str emoji chat-name)) online? (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id])) photo-path (when-not group-chat (rf/sub [:chats/photo-path chat-id])) @@ -53,7 +54,10 @@ {:customization-color color :size :size-32 :picture photo-path - :override-theme :dark}] + :override-theme :dark + :emoji (when-not (string/blank? emoji) + (string/trim emoji)) + :chat-name chat-name}] [quo/user-avatar {:full-name display-name :online? online? @@ -111,27 +115,29 @@ (defn view [{:keys [distance-from-list-top chat-screen-layout-calculations-complete?]}] - (let [{:keys [chat-id chat-type] :as chat} (rf/sub [:chats/current-chat-chat-view]) - all-loaded? (reanimated/use-shared-value false) - all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) - top-insets (safe-area/get-top) - top-bar-height messages.constants/top-bar-height - navigation-view-height (+ top-bar-height top-insets) - navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity - chat-screen-layout-calculations-complete?) - reached-threshold? (messages.worklets/use-messages-scrolled-to-threshold - distance-from-list-top - top-bar-height) - button-background (if reached-threshold? :photo :blur)] + (let [{:keys [chat-id chat-type last-message] + :as chat} (rf/sub [:chats/current-chat-chat-view]) + all-loaded? (reanimated/use-shared-value false) + all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) + top-insets (safe-area/get-top) + top-bar-height messages.constants/top-bar-height + navigation-view-height (+ top-bar-height top-insets) + navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity + chat-screen-layout-calculations-complete?) + reached-threshold? (messages.worklets/use-messages-scrolled-to-threshold + distance-from-list-top + top-bar-height) + button-background (if reached-threshold? :photo :blur)] (rn/use-effect (fn [] (reanimated/set-shared-value all-loaded? all-loaded-sub)) [all-loaded-sub]) [rn/view {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)} - [animated-background-and-pinned-banner - {:chat-id chat-id - :navigation-view-height navigation-view-height - :distance-from-list-top distance-from-list-top - :all-loaded? all-loaded?}] + (when (seq last-message) + [animated-background-and-pinned-banner + {:chat-id chat-id + :navigation-view-height navigation-view-height + :distance-from-list-top distance-from-list-top + :all-loaded? all-loaded?}]) [rn/view {:style (style/header-container top-insets top-bar-height)} [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)} [quo/button diff --git a/src/status_im/subs/chats.cljs b/src/status_im/subs/chats.cljs index 18ab6b86f1..b9d91f5559 100644 --- a/src/status_im/subs/chats.cljs +++ b/src/status_im/subs/chats.cljs @@ -183,7 +183,9 @@ :synced-to :synced-from :community-id - :emoji]))) + :emoji + :description + :last-message]))) (re-frame/reg-sub :chats/community-channel-ui-details-by-id