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)})

29
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}}]
[icon/icon icon-name (cond
{:size icon-size emoji
:color colors/white-opa-70}])]))) (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)) (def view (quo.theme/with-theme view-internal))

12
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}
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme) (merge
:padding-horizontal 20 (shadows/get 2 (quo.theme/get-theme) :inverted)
:border-radius 20 {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:margin-top top-margin})) :padding-horizontal 20
:border-radius 20
:margin-top top-margin})))
(defn header-image (defn header-image
[scale top left theme] [scale top left theme]

143
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
[1 0.4] distance-from-list-top
messages.constants/default-extrapolation-option) [0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
top (reanimated/interpolate distance-from-list-top [1 0.4]
[0 messages.constants/header-container-top-margin] messages.constants/default-extrapolation-option)
[-44 -12] top (reanimated/interpolate
messages.constants/default-extrapolation-option) distance-from-list-top
left (reanimated/interpolate distance-from-list-top [0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[0 messages.constants/header-container-top-margin] [-44 -12]
[16 -8] messages.constants/default-extrapolation-option)
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 [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,15 +149,17 @@
: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 -35] [0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
messages.constants/default-extrapolation-option) [0 -35]
left (reanimated/interpolate distance-from-list-top messages.constants/default-extrapolation-option)
[0 messages.constants/header-container-top-margin] left (reanimated/interpolate
[0 40] distance-from-list-top
messages.constants/default-extrapolation-option)] [0 (if (seq last-message) messages.constants/header-container-top-margin 0)]
[0 40]
messages.constants/default-extrapolation-option)]
[reanimated/view [reanimated/view
{:style (style/user-name-container top left)} {:style (style/user-name-container top left)}
[rn/view [rn/view
@ -195,54 +206,55 @@
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
display-name (cond last-message]} chat
(= chat-type constants/one-to-one-chat-type) display-name (cond
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) (= chat-type constants/one-to-one-chat-type)
(= chat-type constants/community-chat-type) (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
(str (when emoji (str emoji " ")) "# " chat-name) (= chat-type constants/community-chat-type)
:else (str emoji chat-name)) (str "# " chat-name)
{:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) :else (str emoji chat-name))
online? (rf/sub [:visibility-status-updates/online? chat-id]) {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id])
contact (when-not group-chat online? (rf/sub [:visibility-status-updates/online? chat-id])
(rf/sub [:contacts/contact-by-address chat-id])) contact (when-not group-chat
photo-path (rf/sub [:chats/photo-path chat-id]) (rf/sub [:contacts/contact-by-address chat-id]))
top-margin (+ (safe-area/get-top) photo-path (rf/sub [:chats/photo-path chat-id])
messages.constants/top-bar-height top-margin (+ (safe-area/get-top)
messages.constants/header-container-top-margin messages.constants/top-bar-height
32) messages.constants/header-container-top-margin
background-color (colors/theme-colors 32)
(colors/resolve-color customization-color theme 20) background-color (colors/theme-colors
(colors/resolve-color customization-color theme 40) (colors/resolve-color customization-color theme 20)
theme) (colors/resolve-color customization-color theme 40)
bottom (reanimated/interpolate theme)
distance-from-list-top bottom (reanimated/interpolate
[0 messages.constants/header-container-top-margin] distance-from-list-top
[32 -4] [0 messages.constants/header-container-top-margin]
messages.constants/default-extrapolation-option) [32 -4]
background-opacity (reanimated/interpolate messages.constants/default-extrapolation-option)
distance-from-list-top background-opacity (reanimated/interpolate
[messages.constants/header-container-top-margin distance-from-list-top
(+ messages.constants/header-animation-distance [messages.constants/header-container-top-margin
messages.constants/header-container-top-margin)] (+ messages.constants/header-animation-distance
[1 0] messages.constants/header-container-top-margin)]
messages.constants/default-extrapolation-option)] [1 0]
messages.constants/default-extrapolation-option)]
[:<> [:<>
[reanimated/view [reanimated/view
{:style (style/background-container background-color background-opacity top-margin)}] {:style (style/background-container background-color background-opacity top-margin)}]
@ -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]

44
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,27 +115,29 @@
(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]
all-loaded? (reanimated/use-shared-value false) :as chat} (rf/sub [:chats/current-chat-chat-view])
all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) all-loaded? (reanimated/use-shared-value false)
top-insets (safe-area/get-top) all-loaded-sub (rf/sub [:chats/all-loaded? chat-id])
top-bar-height messages.constants/top-bar-height top-insets (safe-area/get-top)
navigation-view-height (+ top-bar-height top-insets) top-bar-height messages.constants/top-bar-height
navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity navigation-view-height (+ top-bar-height top-insets)
chat-screen-layout-calculations-complete?) navigation-buttons-opacity (worklets/navigation-buttons-complete-opacity
reached-threshold? (messages.worklets/use-messages-scrolled-to-threshold chat-screen-layout-calculations-complete?)
distance-from-list-top reached-threshold? (messages.worklets/use-messages-scrolled-to-threshold
top-bar-height) distance-from-list-top
button-background (if reached-threshold? :photo :blur)] top-bar-height)
button-background (if reached-threshold? :photo :blur)]
(rn/use-effect (fn [] (reanimated/set-shared-value all-loaded? all-loaded-sub)) (rn/use-effect (fn [] (reanimated/set-shared-value all-loaded? all-loaded-sub))
[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)}
[animated-background-and-pinned-banner (when (seq last-message)
{:chat-id chat-id [animated-background-and-pinned-banner
:navigation-view-height navigation-view-height {:chat-id chat-id
:distance-from-list-top distance-from-list-top :navigation-view-height navigation-view-height
:all-loaded? all-loaded?}] :distance-from-list-top distance-from-list-top
: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