fix: avatar alignment (#19073)
Co-authored-by: balogunofafrica <balogunakanbi.k@gmail.com>
This commit is contained in:
John Ngei
GitHub
parent
98deaa4459
commit
6c07fac28b
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -8,10 +8,6 @@
|
|||
{:flex 1
|
||||
:z-index 2})
|
||||
|
||||
(def chat-actions-container
|
||||
{:margin-top 16
|
||||
:padding-bottom 20})
|
||||
|
||||
(defn background-container
|
||||
[background-color background-opacity top-margin]
|
||||
(reanimated/apply-animations-to-style
|
||||
|
|
@ -24,12 +20,12 @@
|
|||
:height (+ top-margin messages.constants/header-container-radius)}))
|
||||
|
||||
(defn header-bottom-part
|
||||
[border-radius theme top-margin]
|
||||
[bottom theme top-margin]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:border-top-left-radius border-radius
|
||||
:border-top-right-radius border-radius}
|
||||
{:bottom bottom}
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
|
||||
:padding-horizontal 20
|
||||
:border-radius 20
|
||||
:margin-top top-margin}))
|
||||
|
||||
(defn header-image
|
||||
|
|
@ -43,5 +39,20 @@
|
|||
:border-radius 50
|
||||
:border-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
|
||||
|
||||
(def bio
|
||||
{:margin-top 8})
|
||||
(defn user-name-container
|
||||
[top left]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:top top
|
||||
:left left}
|
||||
{:z-index -1}))
|
||||
|
||||
(def user-name
|
||||
{:align-items :center
|
||||
:flex-direction :row
|
||||
:margin-top 52})
|
||||
|
||||
(defn bio-and-actions
|
||||
[top]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:top top}
|
||||
{:row-gap 16}))
|
||||
|
|
|
|||
|
|
@ -64,8 +64,7 @@
|
|||
[{:keys [ens-verified added?]} theme]
|
||||
(when (or ens-verified added?)
|
||||
[rn/view
|
||||
{:style {:margin-left 4
|
||||
:margin-top 8}}
|
||||
{:style {:margin-left 4}}
|
||||
(if ens-verified
|
||||
[quo/icon :i/verified
|
||||
{:no-color true
|
||||
|
|
@ -112,27 +111,55 @@
|
|||
(- 70 (:bottom insets)))]
|
||||
[rn/view {:style {:height height}}]))
|
||||
|
||||
(defn f-list-footer-avatar
|
||||
[{:keys [distance-from-list-top display-name online? profile-picture theme]}]
|
||||
(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 -8]
|
||||
[-44 -12]
|
||||
messages.constants/default-extrapolation-option)
|
||||
left (reanimated/interpolate distance-from-list-top
|
||||
[0 messages.constants/header-container-top-margin]
|
||||
[16 -4]
|
||||
[16 -8]
|
||||
messages.constants/default-extrapolation-option)]
|
||||
[reanimated/view
|
||||
{:style (style/header-image scale top left theme)}
|
||||
[quo/user-avatar
|
||||
{:full-name display-name
|
||||
:online? online?
|
||||
:profile-picture profile-picture
|
||||
:size :big}]]))
|
||||
(if group-chat
|
||||
[quo/group-avatar
|
||||
{:customization-color color
|
||||
:size :size-80
|
||||
:picture profile-picture
|
||||
:override-theme :dark}]
|
||||
[quo/user-avatar
|
||||
{:full-name display-name
|
||||
:online? online?
|
||||
:profile-picture profile-picture
|
||||
: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)]
|
||||
[reanimated/view
|
||||
{:style (style/user-name-container top left)}
|
||||
[rn/view
|
||||
{:style style/user-name}
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:size :heading-1
|
||||
:style {:flex-shrink 1}
|
||||
:number-of-lines 1}
|
||||
display-name]
|
||||
[contact-icon contact theme]]]))
|
||||
|
||||
(defn actions
|
||||
[chat-id cover-bg-color]
|
||||
|
|
@ -143,89 +170,102 @@
|
|||
muted? (and muted (some? muted-till))
|
||||
mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat)
|
||||
unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)]
|
||||
[quo/channel-actions
|
||||
{:container-style style/chat-actions-container
|
||||
:actions [{:accessibility-label :action-button-pinned
|
||||
:big? true
|
||||
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
|
||||
:customization-color cover-bg-color
|
||||
:icon :i/pin
|
||||
:counter-value pins-count
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:pin-message/show-pins-bottom-sheet
|
||||
chat-id]))}
|
||||
{:accessibility-label :action-button-mute
|
||||
:label (i18n/label (if muted
|
||||
unmute-chat-label
|
||||
mute-chat-label))
|
||||
:customization-color cover-bg-color
|
||||
:icon (if muted? :i/activity-center :i/muted)
|
||||
:on-press (fn []
|
||||
(if muted?
|
||||
(home.actions/unmute-chat-action chat-id)
|
||||
(home.actions/mute-chat-action chat-id
|
||||
chat-type
|
||||
muted?)))}]}]))
|
||||
|
||||
(defn f-list-footer
|
||||
[quo/channel-actions
|
||||
{:actions [{:accessibility-label :action-button-pinned
|
||||
:big? true
|
||||
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
|
||||
:customization-color cover-bg-color
|
||||
:icon :i/pin
|
||||
:counter-value pins-count
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:pin-message/show-pins-bottom-sheet
|
||||
chat-id]))}
|
||||
{:accessibility-label :action-button-mute
|
||||
:label (i18n/label (if muted
|
||||
unmute-chat-label
|
||||
mute-chat-label))
|
||||
:customization-color cover-bg-color
|
||||
:icon (if muted? :i/activity-center :i/muted)
|
||||
:on-press (fn []
|
||||
(if muted?
|
||||
(home.actions/unmute-chat-action chat-id)
|
||||
(home.actions/mute-chat-action chat-id
|
||||
chat-type
|
||||
muted?)))}]}]))
|
||||
|
||||
(defn bio-and-actions
|
||||
[{:keys [distance-from-list-top bio chat-id customization-color]}]
|
||||
(let [has-bio (seq bio)
|
||||
top (reanimated/interpolate
|
||||
distance-from-list-top
|
||||
[0 messages.constants/header-container-top-margin]
|
||||
[(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])
|
||||
[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]} 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)
|
||||
background-color (colors/theme-colors
|
||||
(colors/resolve-color customization-color theme 20)
|
||||
(colors/resolve-color customization-color theme 40)
|
||||
theme)
|
||||
border-radius (reanimated/interpolate
|
||||
distance-from-list-top
|
||||
[0 messages.constants/header-container-top-margin]
|
||||
[20 0]
|
||||
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]} 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)]
|
||||
[:<>
|
||||
[reanimated/view
|
||||
{:style (style/background-container background-color background-opacity top-margin)}]
|
||||
[reanimated/view {:style (style/header-bottom-part border-radius theme top-margin)}
|
||||
(when-not group-chat
|
||||
[:f> f-list-footer-avatar
|
||||
{:distance-from-list-top distance-from-list-top
|
||||
:display-name display-name
|
||||
:online? online?
|
||||
:theme theme
|
||||
:profile-picture photo-path}])
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:margin-top (if group-chat 94 52)}}
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:size :heading-1
|
||||
:style {:flex-shrink 1}
|
||||
:number-of-lines 1}
|
||||
display-name]
|
||||
[contact-icon contact theme]]
|
||||
(when (seq bio)
|
||||
[quo/text {:style style/bio}
|
||||
bio])
|
||||
[actions chat-id customization-color]]]))
|
||||
[reanimated/view {:style (style/header-bottom-part bottom theme top-margin)}
|
||||
[list-footer-avatar
|
||||
{:distance-from-list-top distance-from-list-top
|
||||
:display-name display-name
|
||||
:online? online?
|
||||
:theme theme
|
||||
:profile-picture photo-path
|
||||
:group-chat group-chat
|
||||
:color color}]
|
||||
[chat-display-name
|
||||
{:distance-from-list-top distance-from-list-top
|
||||
:display-name display-name
|
||||
:theme theme
|
||||
:contact contact
|
||||
:group-chat group-chat}]
|
||||
[bio-and-actions
|
||||
{:distance-from-list-top distance-from-list-top
|
||||
:bio bio
|
||||
:chat-id chat-id
|
||||
:customization-color customization-color}]]]))
|
||||
|
||||
(defn list-footer
|
||||
[props]
|
||||
|
|
@ -235,7 +275,7 @@
|
|||
[:<>
|
||||
(if (or loading-messages? (not all-loaded?))
|
||||
[loading-view chat-id props]
|
||||
[:f> f-list-footer props])]))
|
||||
[footer-component props])]))
|
||||
|
||||
(defn list-group-chat-header
|
||||
[{:keys [chat-id invitation-admin]}]
|
||||
|
|
@ -285,7 +325,7 @@
|
|||
(reset! layout-height-atom layout-height))
|
||||
(reset! distance-atom new-distance)))
|
||||
|
||||
(defn f-messages-list-content
|
||||
(defn messages-list-content
|
||||
[{:keys [insets distance-from-list-top content-height layout-height distance-atom
|
||||
chat-screen-layout-calculations-complete? chat-list-scroll-y]}]
|
||||
(let [theme (quo.theme/use-theme-value)
|
||||
|
|
|
|||
|
|
@ -18,37 +18,42 @@
|
|||
[utils.worklets.chat.messenger.messages :as messages.worklets]
|
||||
[utils.worklets.chat.messenger.navigation :as worklets]))
|
||||
|
||||
(defn f-header-content-container
|
||||
(defn header-content-container
|
||||
[{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}]
|
||||
(let [{:keys [chat-id group-chat chat-type chat-name
|
||||
emoji]} 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))
|
||||
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]))
|
||||
header-opacity (worklets/navigation-header-opacity
|
||||
distance-from-list-top
|
||||
all-loaded?
|
||||
chat-screen-layout-calculations-complete?
|
||||
(if platform/ios?
|
||||
messages.constants/content-animation-start-position-ios
|
||||
messages.constants/content-animation-start-position-android))
|
||||
header-position (worklets/navigation-header-position
|
||||
distance-from-list-top
|
||||
all-loaded?
|
||||
messages.constants/top-bar-height
|
||||
(if platform/ios?
|
||||
messages.constants/content-animation-start-position-ios
|
||||
messages.constants/content-animation-start-position-android))]
|
||||
emoji 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))
|
||||
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]))
|
||||
header-opacity (worklets/navigation-header-opacity
|
||||
distance-from-list-top
|
||||
all-loaded?
|
||||
chat-screen-layout-calculations-complete?
|
||||
(if platform/ios?
|
||||
messages.constants/content-animation-start-position-ios
|
||||
messages.constants/content-animation-start-position-android))
|
||||
header-position (worklets/navigation-header-position
|
||||
distance-from-list-top
|
||||
all-loaded?
|
||||
messages.constants/top-bar-height
|
||||
(if platform/ios?
|
||||
messages.constants/content-animation-start-position-ios
|
||||
messages.constants/content-animation-start-position-android))]
|
||||
[reanimated/view
|
||||
{:style (style/header-content-container header-opacity header-position)}
|
||||
(when-not group-chat
|
||||
(if group-chat
|
||||
[quo/group-avatar
|
||||
{:customization-color color
|
||||
:size :size-32
|
||||
:picture photo-path
|
||||
:override-theme :dark}]
|
||||
[quo/user-avatar
|
||||
{:full-name display-name
|
||||
:online? online?
|
||||
|
|
@ -70,7 +75,7 @@
|
|||
(i18n/label
|
||||
(if online? :t/online :t/offline))])]]))
|
||||
|
||||
(defn f-animated-background-and-pinned-banner
|
||||
(defn animated-background-and-pinned-banner
|
||||
[{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}]
|
||||
(let [animation-distance messages.constants/header-animation-distance
|
||||
props {:distance-from-list-top distance-from-list-top
|
||||
|
|
@ -122,7 +127,7 @@
|
|||
[all-loaded-sub])
|
||||
[rn/view
|
||||
{:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)}
|
||||
[:f> f-animated-background-and-pinned-banner
|
||||
[animated-background-and-pinned-banner
|
||||
{:chat-id chat-id
|
||||
:navigation-view-height navigation-view-height
|
||||
:distance-from-list-top distance-from-list-top
|
||||
|
|
@ -137,7 +142,7 @@
|
|||
:accessibility-label :back-button
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
(if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]]
|
||||
[:f> f-header-content-container
|
||||
[header-content-container
|
||||
{:chat chat
|
||||
:distance-from-list-top distance-from-list-top
|
||||
:all-loaded? all-loaded?
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
;; NOTE(parvesh) - I am working on refactoring/optimization of the chat screen for performance
|
||||
;; improvement. Please avoid refactoring these files. Also if you are not already working on bug
|
||||
;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring
|
||||
(defn- f-chat-screen
|
||||
(defn- chat-screen
|
||||
[chat-screen-layout-calculations-complete?]
|
||||
(let [insets (safe-area/get-insets)
|
||||
content-height (atom 0)
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
[messages.navigation/view
|
||||
{:distance-from-list-top distance-from-list-top
|
||||
:chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}]
|
||||
[:f> list.view/f-messages-list-content
|
||||
[list.view/messages-list-content
|
||||
{:insets insets
|
||||
:layout-height layout-height
|
||||
:content-height content-height
|
||||
|
|
@ -46,15 +46,11 @@
|
|||
(when-not screen-loaded?
|
||||
(reanimated/set-shared-value chat-screen-layout-calculations-complete? false))
|
||||
(when screen-loaded?
|
||||
[:f> f-chat-screen chat-screen-layout-calculations-complete?])))
|
||||
[chat-screen chat-screen-layout-calculations-complete?])))
|
||||
|
||||
(defn- f-chat
|
||||
(defn chat
|
||||
[]
|
||||
(let [chat-screen-layout-calculations-complete? (reanimated/use-shared-value false)]
|
||||
[:<>
|
||||
[lazy-chat-screen chat-screen-layout-calculations-complete?]
|
||||
[:f> placeholder.view/f-view chat-screen-layout-calculations-complete?]]))
|
||||
|
||||
(defn chat
|
||||
[]
|
||||
[:f> f-chat])
|
||||
[placeholder.view/view chat-screen-layout-calculations-complete?]]))
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
:parent-height (:height (rn/get-window))
|
||||
:animated? false}])
|
||||
|
||||
(defn f-view
|
||||
(defn view
|
||||
[chat-screen-layout-calculations-complete?]
|
||||
(let [top (safe-area/get-top)
|
||||
opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?)
|
||||
|
|
|
|||
Loading…
Reference in New Issue