Community channel avatar is missing on Channel screen (#19459)
This commit is contained in:
parent
2614131426
commit
6ba89d0c6e
|
@ -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)})
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue