status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-25 17:16:03 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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] [scroll-shared-value]
(reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp)) (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 (defn banner-card-blur-layer
[scroll-shared-value] [scroll-shared-value]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
@ -30,13 +34,15 @@
:height (+ (safe-area/get-top) 244)})) :height (+ (safe-area/get-top) 244)}))
(defn banner-card-hiding-layer (defn banner-card-hiding-layer
[] [scroll-shared-value]
{:z-index 2 (reanimated/apply-animations-to-style
:position :absolute {:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
:top 0 {:z-index 2
:right 0 :position :absolute
:left 0 :top 0
:padding-top (safe-area/get-top)}) :right 0
:left 0
:padding-top (safe-area/get-top)}))
(def animated-banner-card-container {:overflow :hidden}) (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}))) (oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
(defn- banner-card-blur-layer (defn- banner-card-blur-layer
[scroll-shared-value] [scroll-shared-value child]
(let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)] (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
[reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)} [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
[blur/view [blur/view
@ -33,12 +33,13 @@
:blur-type (theme/theme-value (if platform/ios? :light :xlight) :dark) :blur-type (theme/theme-value (if platform/ios? :light :xlight) :dark)
:overlay-color (if open-sheet? :overlay-color (if open-sheet?
(colors/theme-colors colors/white colors/neutral-95-opa-70) (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 (defn- banner-card-hiding-layer
[{:keys [title-props card-props scroll-shared-value]}] [{:keys [title-props card-props scroll-shared-value]}]
(let [customization-color (rf/sub [:profile/customization-color])] (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/top-nav {:type :grey}]
[common.home/title-column (assoc title-props :customization-color customization-color)] [common.home/title-column (assoc title-props :customization-color customization-color)]
[rn/view {:style style/animated-banner-card-container} [rn/view {:style style/animated-banner-card-container}
@ -65,8 +66,8 @@
(defn animated-banner (defn animated-banner
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}] [{: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-blur-layer scroll-shared-value
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)] [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
[:f> banner-card-tabs-layer [:f> banner-card-tabs-layer
{:scroll-shared-value scroll-shared-value {:scroll-shared-value scroll-shared-value
:selected-tab selected-tab :selected-tab selected-tab