status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Community channel avatar is missing on Channel screen (#19459)

This commit is contained in:
Ibrahem Khalil 2024-04-12 01:18:21 +02:00 committed by GitHub
parent 2614131426
commit 6ba89d0c6e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 150 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quo/components/avatars/group_avatar/style.cljs
View File

@ -13,3 +13,11 @@
:background-color (colors/theme-colors (colors/custom-color customization-color 50) :background-color (colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60) (colors/custom-color customization-color 60)
theme)}) theme)})
(defn avatar-identifier
[theme]
{:text-align :center
:font-size 36
:color (colors/theme-colors colors/black
colors/white
theme)})

25
src/quo/components/avatars/group_avatar/view.cljs
View File

@ -1,7 +1,9 @@
(ns quo.components.avatars.group-avatar.view (ns quo.components.avatars.group-avatar.view
(:require (:require
[clojure.string :as string]
[quo.components.avatars.group-avatar.style :as style] [quo.components.avatars.group-avatar.style :as style]
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
@ -21,7 +23,7 @@
(defn- view-internal (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 :or {size :size-20
customization-color :blue customization-color :blue
picture nil picture nil
@ -38,8 +40,27 @@
{:source picture {:source picture
:style {:width container-size :style {:width container-size
:height container-size}}] :height container-size}}]
(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 [icon/icon icon-name
{:size icon-size {:size icon-size
:color colors/white-opa-70}])]))) :color colors/white-opa-70}]))])))
(def view (quo.theme/with-theme view-internal)) (def view (quo.theme/with-theme view-internal))

6
src/status_im/contexts/chat/messenger/messages/list/style.cljs
View File

@ -1,6 +1,8 @@
(ns status-im.contexts.chat.messenger.messages.list.style (ns status-im.contexts.chat.messenger.messages.list.style
(:require (:require
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.foundations.shadows :as shadows]
[quo.theme :as quo.theme]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im.contexts.chat.messenger.messages.constants :as messages.constants])) [status-im.contexts.chat.messenger.messages.constants :as messages.constants]))
@ -23,10 +25,12 @@
[bottom theme top-margin] [bottom theme top-margin]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:bottom bottom} {:bottom bottom}
(merge
(shadows/get 2 (quo.theme/get-theme) :inverted)
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme) {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:padding-horizontal 20 :padding-horizontal 20
:border-radius 20 :border-radius 20
:margin-top top-margin})) :margin-top top-margin})))
(defn header-image (defn header-image
[scale top left theme] [scale top left theme]

65
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.contexts.chat.messenger.messages.list.view (ns status-im.contexts.chat.messenger.messages.list.view
(:require (:require
[clojure.string :as string]
[legacy.status-im.ui.screens.chat.group :as chat.group] [legacy.status-im.ui.screens.chat.group :as chat.group]
[oops.core :as oops] [oops.core :as oops]
[quo.core :as quo] [quo.core :as quo]
@ -112,19 +113,24 @@
[rn/view {:style {:height height}}])) [rn/view {:style {:height height}}]))
(defn list-footer-avatar (defn list-footer-avatar
[{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color]}] [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color
(let [scale (reanimated/interpolate distance-from-list-top emoji chat-type chat-name last-message]}]
[0 messages.constants/header-container-top-margin] (let [scale (reanimated/interpolate
distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[1 0.4] [1 0.4]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
top (reanimated/interpolate distance-from-list-top top (reanimated/interpolate
[0 messages.constants/header-container-top-margin] distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[-44 -12] [-44 -12]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
left (reanimated/interpolate distance-from-list-top left (reanimated/interpolate
[0 messages.constants/header-container-top-margin] distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[16 -8] [16 -8]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)
community-channel? (= chat-type constants/community-chat-type)]
[reanimated/view [reanimated/view
{:style (style/header-image scale top left theme)} {:style (style/header-image scale top left theme)}
(if group-chat (if group-chat
@ -132,7 +138,10 @@
{:customization-color color {:customization-color color
:size :size-80 :size :size-80
:picture profile-picture :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 [quo/user-avatar
{:full-name display-name {:full-name display-name
:online? online? :online? online?
@ -140,13 +149,15 @@
:size :big}])])) :size :big}])]))
(defn chat-display-name (defn chat-display-name
[{:keys [distance-from-list-top display-name contact theme]}] [{:keys [distance-from-list-top display-name contact theme last-message]}]
(let [top (reanimated/interpolate distance-from-list-top (let [top (reanimated/interpolate
[0 messages.constants/header-container-top-margin] distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[0 -35] [0 -35]
messages.constants/default-extrapolation-option) messages.constants/default-extrapolation-option)
left (reanimated/interpolate distance-from-list-top left (reanimated/interpolate
[0 messages.constants/header-container-top-margin] distance-from-list-top
[0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[0 40] [0 40]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)]
[reanimated/view [reanimated/view
@ -195,28 +206,29 @@
muted?)))}]}])) muted?)))}]}]))
(defn bio-and-actions (defn bio-and-actions
[{:keys [distance-from-list-top bio chat-id customization-color]}] [{:keys [distance-from-list-top bio chat-id customization-color last-message description]}]
(let [has-bio (seq bio) (let [has-bio (seq (or bio description))
top (reanimated/interpolate top (reanimated/interpolate
distance-from-list-top 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)] [(if has-bio 8 16) (if has-bio -28 -20)]
messages.constants/default-extrapolation-option)] messages.constants/default-extrapolation-option)]
[reanimated/view [reanimated/view
{:style (style/bio-and-actions top)} {:style (style/bio-and-actions top)}
(when has-bio (when has-bio
[quo/text bio]) [quo/text (or bio description)])
[actions chat-id customization-color]])) [actions chat-id customization-color]]))
(defn footer-component (defn footer-component
[{:keys [chat distance-from-list-top theme customization-color]}] [{:keys [chat distance-from-list-top theme customization-color]}]
(let [{:keys [chat-id chat-name emoji chat-type (let [{:keys [chat-id chat-name emoji chat-type
group-chat color]} chat group-chat color description
last-message]} chat
display-name (cond display-name (cond
(= chat-type constants/one-to-one-chat-type) (= chat-type constants/one-to-one-chat-type)
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
(= chat-type constants/community-chat-type) (= chat-type constants/community-chat-type)
(str (when emoji (str emoji " ")) "# " chat-name) (str "# " chat-name)
:else (str emoji chat-name)) :else (str emoji chat-name))
{:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id])
online? (rf/sub [:visibility-status-updates/online? chat-id]) online? (rf/sub [:visibility-status-updates/online? chat-id])
@ -254,18 +266,25 @@
:theme theme :theme theme
:profile-picture photo-path :profile-picture photo-path
:group-chat group-chat :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 [chat-display-name
{:distance-from-list-top distance-from-list-top {:distance-from-list-top distance-from-list-top
:display-name display-name :display-name display-name
:theme theme :theme theme
:contact contact :contact contact
:group-chat group-chat}] :group-chat group-chat
:last-message last-message}]
[bio-and-actions [bio-and-actions
{:distance-from-list-top distance-from-list-top {:distance-from-list-top distance-from-list-top
:bio bio :bio bio
:chat-id chat-id :chat-id chat-id
:customization-color customization-color}]]])) :customization-color customization-color
:description description
:last-message last-message}]]]))
(defn list-footer (defn list-footer
[props] [props]

14
src/status_im/contexts/chat/messenger/messages/navigation/view.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.contexts.chat.messenger.messages.navigation.view (ns status-im.contexts.chat.messenger.messages.navigation.view
(:require (:require
[clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[re-frame.db] [re-frame.db]
@ -28,7 +29,7 @@
[:contacts/contact-two-names-by-identity [:contacts/contact-two-names-by-identity
chat-id])) chat-id]))
(= chat-type constants/community-chat-type) (= chat-type constants/community-chat-type)
(str (when emoji (str emoji " ")) "# " chat-name) (str "# " chat-name)
:else (str emoji chat-name)) :else (str emoji chat-name))
online? (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id])) 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])) photo-path (when-not group-chat (rf/sub [:chats/photo-path chat-id]))
@ -53,7 +54,10 @@
{:customization-color color {:customization-color color
:size :size-32 :size :size-32
:picture photo-path :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 [quo/user-avatar
{:full-name display-name {:full-name display-name
:online? online? :online? online?
@ -111,7 +115,8 @@
(defn view (defn view
[{:keys [distance-from-list-top chat-screen-layout-calculations-complete?]}] [{: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]) (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? (reanimated/use-shared-value false)
all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) all-loaded-sub (rf/sub [:chats/all-loaded? chat-id])
top-insets (safe-area/get-top) top-insets (safe-area/get-top)
@ -127,11 +132,12 @@
[all-loaded-sub]) [all-loaded-sub])
[rn/view [rn/view
{:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)} {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)}
(when (seq last-message)
[animated-background-and-pinned-banner [animated-background-and-pinned-banner
{:chat-id chat-id {:chat-id chat-id
:navigation-view-height navigation-view-height :navigation-view-height navigation-view-height
:distance-from-list-top distance-from-list-top :distance-from-list-top distance-from-list-top
:all-loaded? all-loaded?}] :all-loaded? all-loaded?}])
[rn/view {:style (style/header-container top-insets top-bar-height)} [rn/view {:style (style/header-container top-insets top-bar-height)}
[reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)} [reanimated/view {:style (style/button-animation-container navigation-buttons-opacity)}
[quo/button [quo/button

4
src/status_im/subs/chats.cljs
View File

@ -183,7 +183,9 @@
:synced-to :synced-to
:synced-from :synced-from
:community-id :community-id
:emoji]))) :emoji
:description
:last-message])))
(re-frame/reg-sub (re-frame/reg-sub
:chats/community-channel-ui-details-by-id :chats/community-channel-ui-details-by-id