status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-26 07:15:53 +00:00
Code Issues Projects Releases Wiki Activity

Use static background screen for onboarding screens with dark overlay (#15666)

Browse Source
This commit is contained in:
Parvesh Monu 2023-04-18 16:25:33 +05:30 committed by GitHub
parent 41e2fffb87
commit 4fefa629fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/status_im2/contexts/onboarding/common/background/view.cljs
View File

@ -9,14 +9,15 @@
[dark-overlay?] [dark-overlay?]
[:f> [:f>
(fn [] (fn []
(carousel.animation/initialize-animation) (let [animate? (not dark-overlay?)]
[rn/view (when animate? (carousel.animation/initialize-animation))
{:style style/background-container} [rn/view
[carousel/view dark-overlay?] {:style style/background-container}
(when dark-overlay? [carousel/view animate?]
[blur/view (when dark-overlay?
{:style style/background-blur-overlay [blur/view
:blur-amount 30 {:style style/background-blur-overlay
:blur-radius 25 :blur-amount 30
:blur-type :transparent :blur-radius 25
:overlay-color :transparent}])])]) :blur-type :transparent
:overlay-color :transparent}])]))])

24
src/status_im2/contexts/onboarding/common/carousel/animation.cljs
View File

@ -35,16 +35,22 @@
(defn initialize-animation (defn initialize-animation
[] []
(when-not @progress (reset! progress (reanimated/use-shared-value 0))
(reset! progress (reanimated/use-shared-value 0)) (reset! paused (reanimated/use-shared-value false))
(reset! paused (reanimated/use-shared-value false)) (animate-progress @progress @paused))
(animate-progress @progress @paused)))
;; Derived Values
(defn carousel-left-position (defn carousel-left-position
[window-width] [window-width animate?]
(worklets.onboarding-carousel/carousel-left-position window-width @progress)) (if animate?
(worklets.onboarding-carousel/carousel-left-position window-width @progress)
(-> (or (reanimated/get-shared-value @progress) 0)
(quot -25)
(* window-width))))
(defn dynamic-progress-bar-width (defn dynamic-progress-bar-width
[progress-bar-width] [progress-bar-width animate?]
(worklets.onboarding-carousel/dynamic-progress-bar-width progress-bar-width @progress)) (if animate?
(worklets.onboarding-carousel/dynamic-progress-bar-width progress-bar-width @progress)
(-> (or (reanimated/get-shared-value @progress) 0)
(* progress-bar-width)
(/ 100))))

36
src/status_im2/contexts/onboarding/common/carousel/style.cljs
View File

@ -48,12 +48,16 @@
:flex-direction :row}) :flex-direction :row})
(defn dynamic-progress-bar (defn dynamic-progress-bar
[width] [width animate?]
(reanimated/apply-animations-to-style (let [normal-style {:height 2
{:width width} :border-radius 4
{:height 2 :overflow :hidden
:border-radius 4 :width width}]
:overflow :hidden})) (if animate?
(reanimated/apply-animations-to-style
{:width width}
normal-style)
normal-style)))
(defn progress-bar-container (defn progress-bar-container
[progress-bar-width status-bar-height] [progress-bar-width status-bar-height]
@ -63,11 +67,15 @@
:top (+ 12 status-bar-height)}) :top (+ 12 status-bar-height)})
(defn carousel-container (defn carousel-container
[left] [left animate?]
(reanimated/apply-animations-to-style (let [normal-style {:position :absolute
{:left left} :right 0
{:position :absolute :top 0
:right 0 :bottom 0
:top 0 :flex-direction :row
:bottom 0 :left left}]
:flex-direction :row})) (if animate?
(reanimated/apply-animations-to-style
{:left left}
normal-style)
normal-style)))

25
src/status_im2/contexts/onboarding/common/carousel/view.cljs
View File

@ -54,30 +54,33 @@
[rn/view {:style (style/progress-bar-item static? true)}]]) [rn/view {:style (style/progress-bar-item static? true)}]])
(defn dynamic-progress-bar (defn dynamic-progress-bar
[progress-bar-width] [progress-bar-width animate?]
[:f> [:f>
(fn [] (fn []
(let [width (animation/dynamic-progress-bar-width progress-bar-width)] (let [width (animation/dynamic-progress-bar-width progress-bar-width animate?)
[reanimated/view {:style (style/dynamic-progress-bar width)} container-view (if animate? reanimated/view rn/view)]
[container-view {:style (style/dynamic-progress-bar width animate?)}
[progress-bar [progress-bar
{:static? false {:static? false
:progress-bar-width progress-bar-width}]]))]) :progress-bar-width progress-bar-width}]]))])
(defn view (defn view
[] [animate?]
[:f> [:f>
(fn [] (fn []
(let [window-width (rf/sub [:dimensions/window-width]) (let [window-width (rf/sub [:dimensions/window-width])
view-id (rf/sub [:view-id]) view-id (rf/sub [:view-id])
status-bar-height (:status-bar-height @navigation/constants) status-bar-height (:status-bar-height @navigation/constants)
progress-bar-width (- window-width 40) progress-bar-width (- window-width 40)
carousel-left (animation/carousel-left-position window-width)] carousel-left (animation/carousel-left-position window-width animate?)
(rn/use-effect container-view (if animate? reanimated/view rn/view)]
(fn [] (when animate?
(reanimated/set-shared-value @animation/paused (not= view-id :intro))) (rn/use-effect
[view-id]) (fn []
(reanimated/set-shared-value @animation/paused (not= view-id :intro)))
[view-id]))
[:<> [:<>
[reanimated/view {:style (style/carousel-container carousel-left)} [container-view {:style (style/carousel-container carousel-left animate?)}
(for [index (range 2)] (for [index (range 2)]
^{:key index} ^{:key index}
[content-view [content-view
@ -91,5 +94,5 @@
[progress-bar [progress-bar
{:static? true {:static? true
:progress-bar-width progress-bar-width}] :progress-bar-width progress-bar-width}]
[dynamic-progress-bar progress-bar-width]]]))]) [dynamic-progress-bar progress-bar-width animate?]]]))])