Skip to content

Commit 6c07fac

Browse files
jo-mutBalogunofAfrica
jo-mut
and
BalogunofAfrica
authored
fix: avatar alignment (#19073)
 Co-authored-by: balogunofafrica <balogunakanbi.k@gmail.com>
1 parent 98deaa4 commit 6c07fac

File tree

7 files changed

+190
-138
lines changed

7 files changed

+190
-138
lines changed

‎resources/images/icons2/32x32/group@2x.png‎

1.16 KB
Loading

‎resources/images/icons2/32x32/group@3x.png‎

1.77 KB
Loading

‎src/status_im/contexts/chat/messenger/messages/list/style.cljs‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
{:flex 1
99
:z-index 2})
1010

11-
(def chat-actions-container
12-
{:margin-top 16
13-
:padding-bottom 20})
14-
1511
(defn background-container
1612
[background-color background-opacity top-margin]
1713
(reanimated/apply-animations-to-style
@@ -24,12 +20,12 @@
2420
:height (+ top-margin messages.constants/header-container-radius)}))
2521

2622
(defn header-bottom-part
27-
[border-radius theme top-margin]
23+
[bottom theme top-margin]
2824
(reanimated/apply-animations-to-style
29-
{:border-top-left-radius border-radius
30-
:border-top-right-radius border-radius}
25+
{:bottom bottom}
3126
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
3227
:padding-horizontal 20
28+
:border-radius 20
3329
:margin-top top-margin}))
3430

3531
(defn header-image
@@ -43,5 +39,20 @@
4339
:border-radius 50
4440
:border-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
4541

46-
(def bio
47-
{:margin-top 8})
42+
(defn user-name-container
43+
[top left]
44+
(reanimated/apply-animations-to-style
45+
{:top top
46+
:left left}
47+
{:z-index -1}))
48+
49+
(def user-name
50+
{:align-items :center
51+
:flex-direction :row
52+
:margin-top 52})
53+
54+
(defn bio-and-actions
55+
[top]
56+
(reanimated/apply-animations-to-style
57+
{:top top}
58+
{:row-gap 16}))

‎src/status_im/contexts/chat/messenger/messages/list/view.cljs‎

Lines changed: 129 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,7 @@
6464
[{:keys [ens-verified added?]} theme]
6565
(when (or ens-verified added?)
6666
[rn/view
67-
{:style {:margin-left 4
68-
:margin-top 8}}
67+
{:style {:margin-left 4}}
6968
(if ens-verified
7069
[quo/icon :i/verified
7170
{:no-color true
@@ -112,27 +111,55 @@
112111
(- 70 (:bottom insets)))]
113112
[rn/view {:style {:height height}}]))
114113

115-
(defn f-list-footer-avatar
116-
[{:keys [distance-from-list-top display-name online? profile-picture theme]}]
114+
(defn list-footer-avatar
115+
[{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color]}]
117116
(let [scale (reanimated/interpolate distance-from-list-top
118117
[0 messages.constants/header-container-top-margin]
119118
[1 0.4]
120119
messages.constants/default-extrapolation-option)
121120
top (reanimated/interpolate distance-from-list-top
122121
[0 messages.constants/header-container-top-margin]
123-
[-44 -8]
122+
[-44 -12]
124123
messages.constants/default-extrapolation-option)
125124
left (reanimated/interpolate distance-from-list-top
126125
[0 messages.constants/header-container-top-margin]
127-
[16 -4]
126+
[16 -8]
128127
messages.constants/default-extrapolation-option)]
129128
[reanimated/view
130129
{:style (style/header-image scale top left theme)}
131-
[quo/user-avatar
132-
{:full-name display-name
133-
:online? online?
134-
:profile-picture profile-picture
135-
:size :big}]]))
130+
(if group-chat
131+
[quo/group-avatar
132+
{:customization-color color
133+
:size :size-80
134+
:picture profile-picture
135+
:override-theme :dark}]
136+
[quo/user-avatar
137+
{:full-name display-name
138+
:online? online?
139+
:profile-picture profile-picture
140+
:size :big}])]))
141+
142+
(defn chat-display-name
143+
[{:keys [distance-from-list-top display-name contact theme]}]
144+
(let [top (reanimated/interpolate distance-from-list-top
145+
[0 messages.constants/header-container-top-margin]
146+
[0 -35]
147+
messages.constants/default-extrapolation-option)
148+
left (reanimated/interpolate distance-from-list-top
149+
[0 messages.constants/header-container-top-margin]
150+
[0 40]
151+
messages.constants/default-extrapolation-option)]
152+
[reanimated/view
153+
{:style (style/user-name-container top left)}
154+
[rn/view
155+
{:style style/user-name}
156+
[quo/text
157+
{:weight :semi-bold
158+
:size :heading-1
159+
:style {:flex-shrink 1}
160+
:number-of-lines 1}
161+
display-name]
162+
[contact-icon contact theme]]]))
136163

137164
(defn actions
138165
[chat-id cover-bg-color]
@@ -143,89 +170,102 @@
143170
muted? (and muted (some? muted-till))
144171
mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat)
145172
unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)]
173+
146174
[quo/channel-actions
147-
{:container-style style/chat-actions-container
148-
:actions [{:accessibility-label :action-button-pinned
149-
:big? true
150-
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
151-
:customization-color cover-bg-color
152-
:icon :i/pin
153-
:counter-value pins-count
154-
:on-press (fn []
155-
(rf/dispatch [:pin-message/show-pins-bottom-sheet
156-
chat-id]))}
157-
{:accessibility-label :action-button-mute
158-
:label (i18n/label (if muted
159-
unmute-chat-label
160-
mute-chat-label))
161-
:customization-color cover-bg-color
162-
:icon (if muted? :i/activity-center :i/muted)
163-
:on-press (fn []
164-
(if muted?
165-
(home.actions/unmute-chat-action chat-id)
166-
(home.actions/mute-chat-action chat-id
167-
chat-type
168-
muted?)))}]}]))
175+
{:actions [{:accessibility-label :action-button-pinned
176+
:big? true
177+
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
178+
:customization-color cover-bg-color
179+
:icon :i/pin
180+
:counter-value pins-count
181+
:on-press (fn []
182+
(rf/dispatch [:pin-message/show-pins-bottom-sheet
183+
chat-id]))}
184+
{:accessibility-label :action-button-mute
185+
:label (i18n/label (if muted
186+
unmute-chat-label
187+
mute-chat-label))
188+
:customization-color cover-bg-color
189+
:icon (if muted? :i/activity-center :i/muted)
190+
:on-press (fn []
191+
(if muted?
192+
(home.actions/unmute-chat-action chat-id)
193+
(home.actions/mute-chat-action chat-id
194+
chat-type
195+
muted?)))}]}]))
196+
197+
(defn bio-and-actions
198+
[{:keys [distance-from-list-top bio chat-id customization-color]}]
199+
(let [has-bio (seq bio)
200+
top (reanimated/interpolate
201+
distance-from-list-top
202+
[0 messages.constants/header-container-top-margin]
203+
[(if has-bio 8 16) (if has-bio -28 -20)]
204+
messages.constants/default-extrapolation-option)]
205+
[reanimated/view
206+
{:style (style/bio-and-actions top)}
207+
(when has-bio
208+
[quo/text bio])
209+
[actions chat-id customization-color]]))
169210

170-
(defn f-list-footer
211+
(defn footer-component
171212
[{:keys [chat distance-from-list-top theme customization-color]}]
172213
(let [{:keys [chat-id chat-name emoji chat-type
173-
group-chat]} chat
174-
display-name (cond
175-
(= chat-type constants/one-to-one-chat-type)
176-
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
177-
(= chat-type constants/community-chat-type)
178-
(str (when emoji (str emoji " ")) "# " chat-name)
179-
:else (str emoji chat-name))
180-
{:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id])
181-
online? (rf/sub [:visibility-status-updates/online? chat-id])
182-
contact (when-not group-chat
183-
(rf/sub [:contacts/contact-by-address chat-id]))
184-
photo-path (rf/sub [:chats/photo-path chat-id])
185-
top-margin (+ (safe-area/get-top)
186-
messages.constants/top-bar-height
187-
messages.constants/header-container-top-margin)
188-
background-color (colors/theme-colors
189-
(colors/resolve-color customization-color theme 20)
190-
(colors/resolve-color customization-color theme 40)
191-
theme)
192-
border-radius (reanimated/interpolate
193-
distance-from-list-top
194-
[0 messages.constants/header-container-top-margin]
195-
[20 0]
196-
messages.constants/default-extrapolation-option)
197-
background-opacity (reanimated/interpolate
198-
distance-from-list-top
199-
[messages.constants/header-container-top-margin
200-
(+ messages.constants/header-animation-distance
201-
messages.constants/header-container-top-margin)]
202-
[1 0]
203-
messages.constants/default-extrapolation-option)]
214+
group-chat color]} chat
215+
display-name (cond
216+
(= chat-type constants/one-to-one-chat-type)
217+
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
218+
(= chat-type constants/community-chat-type)
219+
(str (when emoji (str emoji " ")) "# " chat-name)
220+
:else (str emoji chat-name))
221+
{:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id])
222+
online? (rf/sub [:visibility-status-updates/online? chat-id])
223+
contact (when-not group-chat
224+
(rf/sub [:contacts/contact-by-address chat-id]))
225+
photo-path (rf/sub [:chats/photo-path chat-id])
226+
top-margin (+ (safe-area/get-top)
227+
messages.constants/top-bar-height
228+
messages.constants/header-container-top-margin
229+
32)
230+
background-color (colors/theme-colors
231+
(colors/resolve-color customization-color theme 20)
232+
(colors/resolve-color customization-color theme 40)
233+
theme)
234+
bottom (reanimated/interpolate
235+
distance-from-list-top
236+
[0 messages.constants/header-container-top-margin]
237+
[32 -4]
238+
messages.constants/default-extrapolation-option)
239+
background-opacity (reanimated/interpolate
240+
distance-from-list-top
241+
[messages.constants/header-container-top-margin
242+
(+ messages.constants/header-animation-distance
243+
messages.constants/header-container-top-margin)]
244+
[1 0]
245+
messages.constants/default-extrapolation-option)]
204246
[:<>
205247
[reanimated/view
206248
{:style (style/background-container background-color background-opacity top-margin)}]
207-
[reanimated/view {:style (style/header-bottom-part border-radius theme top-margin)}
208-
(when-not group-chat
209-
[:f> f-list-footer-avatar
210-
{:distance-from-list-top distance-from-list-top
211-
:display-name display-name
212-
:online? online?
213-
:theme theme
214-
:profile-picture photo-path}])
215-
[rn/view
216-
{:style {:flex-direction :row
217-
:margin-top (if group-chat 94 52)}}
218-
[quo/text
219-
{:weight :semi-bold
220-
:size :heading-1
221-
:style {:flex-shrink 1}
222-
:number-of-lines 1}
223-
display-name]
224-
[contact-icon contact theme]]
225-
(when (seq bio)
226-
[quo/text {:style style/bio}
227-
bio])
228-
[actions chat-id customization-color]]]))
249+
[reanimated/view {:style (style/header-bottom-part bottom theme top-margin)}
250+
[list-footer-avatar
251+
{:distance-from-list-top distance-from-list-top
252+
:display-name display-name
253+
:online? online?
254+
:theme theme
255+
:profile-picture photo-path
256+
:group-chat group-chat
257+
:color color}]
258+
[chat-display-name
259+
{:distance-from-list-top distance-from-list-top
260+
:display-name display-name
261+
:theme theme
262+
:contact contact
263+
:group-chat group-chat}]
264+
[bio-and-actions
265+
{:distance-from-list-top distance-from-list-top
266+
:bio bio
267+
:chat-id chat-id
268+
:customization-color customization-color}]]]))
229269

230270
(defn list-footer
231271
[props]
@@ -235,7 +275,7 @@
235275
[:<>
236276
(if (or loading-messages? (not all-loaded?))
237277
[loading-view chat-id props]
238-
[:f> f-list-footer props])]))
278+
[footer-component props])]))
239279

240280
(defn list-group-chat-header
241281
[{:keys [chat-id invitation-admin]}]
@@ -285,7 +325,7 @@
285325
(reset! layout-height-atom layout-height))
286326
(reset! distance-atom new-distance)))
287327

288-
(defn f-messages-list-content
328+
(defn messages-list-content
289329
[{:keys [insets distance-from-list-top content-height layout-height distance-atom
290330
chat-screen-layout-calculations-complete? chat-list-scroll-y]}]
291331
(let [theme (quo.theme/use-theme-value)

0 commit comments

Comments
 (0)