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

[#16846] fix: resolve glow issue in communities home (#17097)

This commit is contained in:
Mohsen Ghafouri 2023-08-24 15:05:31 +03:00 committed by GitHub
parent 4d7b1baace
commit 26eeb43569
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/status_im2/common/home/banner/style.cljs
View File

@ -17,6 +17,10 @@
[scroll-shared-value]
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp))
(defn- animated-card-translation-y-reverse
[scroll-shared-value]
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
(defn banner-card-blur-layer
[scroll-shared-value]
(reanimated/apply-animations-to-style
@ -30,13 +34,15 @@
:height (+ (safe-area/get-top) 244)}))
(defn banner-card-hiding-layer
[]
{:z-index 2
:position :absolute
:top 0
:right 0
:left 0
:padding-top (safe-area/get-top)})
[scroll-shared-value]
(reanimated/apply-animations-to-style
{:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
{:z-index 2
:position :absolute
:top 0
:right 0
:left 0
:padding-top (safe-area/get-top)}))
(def animated-banner-card-container {:overflow :hidden})

11
src/status_im2/common/home/banner/view.cljs
View File

@ -24,7 +24,7 @@
(oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
(defn- banner-card-blur-layer
[scroll-shared-value]
[scroll-shared-value child]
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
[blur/view
@ -33,12 +33,13 @@
:blur-type (theme/theme-value (if platform/ios? :light :xlight) :dark)
:overlay-color (if open-sheet?
(colors/theme-colors colors/white colors/neutral-95-opa-70)
(theme/theme-value nil colors/neutral-95-opa-70))}]]))
(theme/theme-value nil colors/neutral-95-opa-70))}
child]]))
(defn- banner-card-hiding-layer
[{:keys [title-props card-props scroll-shared-value]}]
(let [customization-color (rf/sub [:profile/customization-color])]
[rn/view {:style (style/banner-card-hiding-layer)}
[reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
[common.home/top-nav {:type :grey}]
[common.home/title-column (assoc title-props :customization-color customization-color)]
[rn/view {:style style/animated-banner-card-container}
@ -65,8 +66,8 @@
(defn animated-banner
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
[:<>
[:f> banner-card-blur-layer scroll-shared-value]
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
[:f> banner-card-blur-layer scroll-shared-value
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
[:f> banner-card-tabs-layer
{:scroll-shared-value scroll-shared-value
:selected-tab selected-tab