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

fix: avatar alignment (#19073) 

Co-authored-by: balogunofafrica <balogunakanbi.k@gmail.com>
This commit is contained in:
John Ngei 2024-03-28 12:13:23 +01:00 committed by GitHub
parent 98deaa4459
commit 6c07fac28b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 191 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/32x32/group@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
resources/images/icons2/32x32/group@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

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

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

@ -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)}
(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}]]))
: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,9 +170,9 @@
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
{:actions [{:accessibility-label :action-button-pinned
:big? true
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
:customization-color cover-bg-color
@ -167,10 +194,24 @@
chat-type
muted?)))}]}]))
(defn f-list-footer
(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
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]))
@ -184,15 +225,16 @@
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)
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)
border-radius (reanimated/interpolate
bottom (reanimated/interpolate
distance-from-list-top
[0 messages.constants/header-container-top-margin]
[20 0]
[32 -4]
messages.constants/default-extrapolation-option)
background-opacity (reanimated/interpolate
distance-from-list-top
@ -204,28 +246,26 @@
[:<>
[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
[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}])
[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]]]))
: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)

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

@ -18,10 +18,10 @@
[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
emoji color]} chat
display-name (cond
(= chat-type constants/one-to-one-chat-type)
(first (rf/sub
@ -48,7 +48,12 @@
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?

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

@ -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?]]))

2
src/status_im/contexts/chat/messenger/placeholder/view.cljs
View File

@ -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?)