Skip to content

Commit f87590c

Browse files
ulisesmaculisesmac
committed
Fix scalable avatar issues
- On Android, the border was inconsistent depending on the theme. - Fix animation, simplify the calculation, and now it matches designs
1 parent 074f19f commit f87590c

File tree

7 files changed

+57
-93
lines changed

7 files changed

+57
-93
lines changed

‎src/status_im/common/scalable_avatar/style.cljs

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
(ns status-im.common.scalable-avatar.style)
22

33
(defn wrapper
4-
[{:keys [scale margin-top margin border-color]}]
5-
[{:transform [{:scale scale}]
6-
:margin-top margin-top
7-
:margin-left margin
8-
:margin-bottom margin}
9-
{:border-width 4
10-
:border-color border-color
11-
:border-radius 100}])
4+
[border-color scale]
5+
[{:transform-origin "bottom left"
6+
:border-width 4
7+
:border-color border-color
8+
:border-radius 100
9+
:transform [{:scale 1} {:translate-y 4}]}
10+
{:transform [{:scale scale} {:translate-y 4}]}])

‎src/status_im/common/scalable_avatar/view.cljs

+6-26
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,14 @@
22
(:require [quo.core :as quo]
33
[react-native.reanimated :as reanimated]
44
[status-im.common.scalable-avatar.style :as style]))
5-
(def scroll-animation-input-range [0 50])
6-
(def header-extrapolation-option
7-
{:extrapolateLeft "clamp"
8-
:extrapolateRight "clamp"})
95

10-
(defn f-avatar
6+
(def scroll-range #js [0 48])
7+
(def scale-range #js [1 0.4])
8+
9+
(defn view
1110
[{:keys [scroll-y full-name online? profile-picture customization-color border-color]}]
12-
(let [image-scale-animation (reanimated/interpolate scroll-y
13-
scroll-animation-input-range
14-
[1 0.4]
15-
header-extrapolation-option)
16-
image-top-margin-animation (reanimated/interpolate scroll-y
17-
scroll-animation-input-range
18-
[0 20]
19-
header-extrapolation-option)
20-
image-side-margin-animation (reanimated/interpolate scroll-y
21-
scroll-animation-input-range
22-
[-4 -20]
23-
header-extrapolation-option)]
24-
[reanimated/view
25-
{:style (style/wrapper {:scale image-scale-animation
26-
:margin-top image-top-margin-animation
27-
:margin image-side-margin-animation
28-
:border-color border-color})}
11+
(let [image-scale (reanimated/interpolate scroll-y scroll-range scale-range :clamp)]
12+
[reanimated/view {:style (style/wrapper border-color image-scale)}
2913
[quo/user-avatar
3014
{:full-name full-name
3115
:online? online?
@@ -34,7 +18,3 @@
3418
:ring? true
3519
:customization-color customization-color
3620
:size :big}]]))
37-
38-
(defn view
39-
[props]
40-
[:f> f-avatar props])

‎src/status_im/contexts/chat/home/view.cljs

+5-6
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
:on-end-reached #(re-frame/dispatch [:chat/show-more-chats])
6363
:keyboard-should-persist-taps :always
6464
:data items
65-
:render-fn (fn [item]
66-
(chat-list-item/chat-list-item item theme))
65+
:render-data {:theme theme}
66+
:render-fn chat-list-item/chat-list-item
6767
:scroll-event-throttle 8
6868
:content-container-style {:padding-bottom
6969
shell.constants/floating-shell-button-height
@@ -94,8 +94,7 @@
9494
{:selected-tab :tab/contacts
9595
:tab->content (empty-state-content theme)}]
9696
[rn/section-list
97-
{:ref (when (not-empty items)
98-
set-scroll-ref)
97+
{:ref (when (seq items) set-scroll-ref)
9998
:key-fn :public-key
10099
:get-item-layout get-item-layout
101100
:content-inset-adjustment-behavior :never
@@ -108,8 +107,8 @@
108107
:sticky-section-headers-enabled false
109108
:render-section-header-fn contact-list/contacts-section-header
110109
:render-section-footer-fn contact-list/contacts-section-footer
111-
:render-fn (fn [data]
112-
(contact-item-render data theme))
110+
:render-data {:theme theme}
111+
:render-fn contact-item-render
113112
:scroll-event-throttle 8
114113
:on-scroll #(common.banner/set-scroll-shared-value
115114
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")

‎src/status_im/contexts/profile/settings/header/header_shape.cljs

+1-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{:d "M20 20V0H0C11 0 20 9 20 20Z"
2020
:fill background-color}]])
2121

22-
(defn f-view
22+
(defn view
2323
[{:keys [scroll-y customization-color theme]}]
2424
(let [background-color (colors/resolve-color customization-color theme 40)
2525
opacity-animation (reanimated/interpolate scroll-y
@@ -30,7 +30,3 @@
3030
[reanimated/view {:style (style/radius-container opacity-animation)}
3131
[left-radius background-color]
3232
[right-radius background-color]]]))
33-
34-
(defn view
35-
[props]
36-
[:f> f-view props])

‎src/status_im/contexts/profile/settings/header/style.cljs

+9-15
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
(ns status-im.contexts.profile.settings.header.style
2-
(:require [quo.foundations.colors :as colors]))
2+
(:require [quo.foundations.colors :as colors]
3+
[react-native.platform :as platform]))
34

45
(def avatar-row-wrapper
5-
{:display :flex
6-
:padding-left 20
6+
{:padding-left 20
77
:padding-right 12
8-
:margin-top -60
9-
:margin-bottom -4
8+
:margin-top -65
109
:align-items :flex-end
1110
:justify-content :space-between
1211
:flex-direction :row})
@@ -23,13 +22,8 @@
2322
:flex-direction :row
2423
:justify-content :space-between})
2524

26-
(defn avatar-container
27-
[theme scale-animation top-margin-animation side-margin-animation]
28-
[{:transform [{:scale scale-animation}]
29-
:margin-top top-margin-animation
30-
:margin-left side-margin-animation
31-
:margin-bottom side-margin-animation}
32-
{:align-items :flex-start
33-
:border-width 4
34-
:border-color (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
35-
:border-radius 100}])
25+
(defn avatar-border-color
26+
[theme]
27+
(if platform/android?
28+
colors/neutral-80-opa-80 ;; Fix is not needed because Android doesn't use blur
29+
(colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)))

‎src/status_im/contexts/profile/settings/header/view.cljs

+28-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
(ns status-im.contexts.profile.settings.header.view
22
(:require [quo.core :as quo]
3-
[quo.foundations.colors :as colors]
43
[quo.theme]
54
[react-native.core :as rn]
65
[status-im.common.scalable-avatar.view :as avatar]
@@ -11,49 +10,46 @@
1110
[status-im.contexts.profile.utils :as profile.utils]
1211
[utils.re-frame :as rf]))
1312

13+
(defn- on-state-dropdown-press
14+
[]
15+
(rf/dispatch [:show-bottom-sheet
16+
{:shell? true
17+
:theme :dark
18+
:content visibility-sheet/view}]))
19+
1420
(defn view
1521
[{:keys [scroll-y]}]
16-
(let [theme (quo.theme/use-theme)
17-
app-theme (rf/sub [:theme])
18-
{:keys [public-key emoji-hash bio] :as profile} (rf/sub [:profile/profile-with-image])
19-
online? (rf/sub [:visibility-status-updates/online?
20-
public-key])
21-
status (rf/sub
22-
[:visibility-status-updates/visibility-status-update
23-
public-key])
24-
customization-color (rf/sub [:profile/customization-color])
25-
full-name (profile.utils/displayed-name profile)
26-
profile-picture (profile.utils/photo profile)
27-
{:keys [status-title status-icon]} (header.utils/visibility-status-type-data status)
28-
border-theme app-theme]
22+
(let [app-theme (rf/sub [:theme])
23+
{:keys [public-key emoji-hash bio]
24+
:as profile} (rf/sub [:profile/profile-with-image])
25+
online? (rf/sub [:visibility-status-updates/online? public-key])
26+
status (rf/sub [:visibility-status-updates/visibility-status-update public-key])
27+
customization-color (rf/sub [:profile/customization-color])
28+
full-name (profile.utils/displayed-name profile)
29+
profile-picture (profile.utils/photo profile)
30+
{:keys [status-title
31+
status-icon]} (header.utils/visibility-status-type-data status)]
2932
[:<>
3033
[header.shape/view
3134
{:scroll-y scroll-y
32-
:customization-color customization-color
33-
:theme theme}]
35+
:customization-color customization-color}]
3436
[rn/view {:style style/avatar-row-wrapper}
3537
[avatar/view
3638
{:scroll-y scroll-y
3739
:full-name full-name
3840
:online? online?
39-
:border-color (colors/theme-colors colors/border-avatar-light
40-
colors/neutral-80-opa-80
41-
border-theme)
41+
:border-color (style/avatar-border-color app-theme)
4242
:customization-color customization-color
4343
:profile-picture profile-picture}]
44-
[rn/view {:style {:margin-bottom 4}}
45-
[quo/dropdown
46-
{:background :blur
47-
:size :size-32
48-
:type :outline
49-
:icon? true
50-
:no-icon-color? true
51-
:icon-name status-icon
52-
:on-press #(rf/dispatch [:show-bottom-sheet
53-
{:shell? true
54-
:theme :dark
55-
:content (fn [] [visibility-sheet/view])}])}
56-
status-title]]]
44+
[quo/dropdown
45+
{:background :blur
46+
:size :size-32
47+
:type :outline
48+
:icon? true
49+
:no-icon-color? true
50+
:icon-name status-icon
51+
:on-press on-state-dropdown-press}
52+
status-title]]
5753
[quo/page-top
5854
{:title-accessibility-label :username
5955
:emoji-dash emoji-hash

‎src/status_im/contexts/profile/settings/view.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(ns status-im.contexts.profile.settings.view
22
(:require [oops.core :as oops]
33
[quo.core :as quo]
4-
[quo.theme :as quo.theme]
4+
[quo.theme]
55
[react-native.core :as rn]
66
[react-native.reanimated :as reanimated]
77
[react-native.safe-area :as safe-area]

0 commit comments

Comments
 (0)