Skip to content

Commit

Permalink
WIP: blur is now showing on Android
Browse files Browse the repository at this point in the history
  • Loading branch information
ulisesmac committed Oct 31, 2023
1 parent 659abb4 commit fb8ff8f
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
(defn container
[blur?]
(cond-> {:width "100%"
:margin-top :auto
:align-self :flex-end}
blur? (assoc :overflow :hidden)
(not blur?) (assoc :padding-vertical 12
Expand All @@ -16,7 +15,7 @@
:padding-vertical 12
:margin-left 20)))

(defn blur-inner-container
(defn inner-blur-container
[theme]
(let [bg-color-key (if platform/android? :overlay-color :background-color)]
(cond-> {bg-color-key (colors/theme-colors colors/white-70-blur
Expand All @@ -26,6 +25,11 @@
:padding-horizontal 20
:padding-vertical 12))))

(def content-paddings
{:padding-vertical 0 ;12
:padding-horizontal 0 ;20
})

(defn get-margin-bottom
[{:keys [show-background? keyboard-will-show?]}]
(cond
Expand All @@ -38,4 +42,4 @@
[margin-bottom-shared-value]
(reanimated/apply-animations-to-style
{:margin-bottom margin-bottom-shared-value}
{:margin-top :auto}))
{}))
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,43 @@
(def duration 100)

(defn- blur-container
[{:keys [theme] :as props} children]
[rn/view props
[blur/view
{:blur-amount 12
:blur-radius 25
:blur-type (quo.theme/theme-value :light :dark theme)
:style (style/blur-inner-container theme)}
children]])
[{:keys [on-layout blur? theme] :as props} children]
(let [styles (if blur?
{:overflow :hidden}
{:overflow :hidden
:padding-vertical 12
:padding-horizontal 20})]
[rn/view {:style styles
:on-layout on-layout}
(if blur?
[blur/view {:blur-amount 12
:blur-radius 25
;:blur-type (quo.theme/theme-value :light :dark theme)
;:style (style/inner-blur-container theme)
:blur-type :light}
[rn/view {:style {:background-color :transparent
:padding-vertical 12
:padding-horizontal 20}}
children]]
children)]))

(defn f-view
"- on-layout : will trigger to dynamically get the height of the container to screen using it.
- show-background? : blurred container that is activated when this component is on top of the page content.
- keyboard-will-show? : keyboard is visible on the current pag 1112e."
[{:keys [on-layout show-background? keyboard-will-show?] :as props}
" - blur? : blurred container that is activated when this component is on top of the page content.
- on-layout : will trigger to dynamically get the height of the container to screen using it.
- keyboard-will-show? : keyboard is visible on the current page."
[{:keys [on-layout keyboard-will-show? blur?]
:as props}
children]
(let [theme (quo.theme/use-theme-value)
container-view (if show-background? blur-container rn/view)
margin-bottom (reanimated/use-shared-value (style/get-margin-bottom props))]

(let [theme (quo.theme/use-theme-value)
margin-bottom (reanimated/use-shared-value (style/get-margin-bottom props))]
(rn/use-effect
#(reanimated/animate margin-bottom (style/get-margin-bottom props) duration)
[keyboard-will-show?])

[reanimated/view {:style (style/animate-margin-bottom margin-bottom)}
[container-view
{:style (style/container show-background?)
:theme theme
:on-layout on-layout}
[blur-container {:theme theme
:on-layout on-layout
:blur? blur?}
children]]))

(defn view
Expand Down
13 changes: 8 additions & 5 deletions src/status_im2/common/floating_button_page/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@
:right 0})

(def keyboard-avoiding-view
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0})
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:flex 1
:justify-content :flex-end
})
6 changes: 3 additions & 3 deletions src/status_im2/common/floating_button_page/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,9 @@
{:style style/keyboard-avoiding-view
:pointer-events :box-none}
[floating-container/view
{:keyboard-will-show? @keyboard-will-show?
:show-background? show-background?
:on-layout set-floating-container-height}
{:on-layout set-floating-container-height
:keyboard-will-show? @keyboard-will-show?
:blur? show-background?}
footer]]])
(finally
(doseq [listener [will-show-listener will-hide-listener did-show-listener did-hide-listener]]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

(defn view
[]
(let [content-height (reagent/atom 300)
(let [content-height (reagent/atom 450)
slide? (reagent/atom false)]
(fn []
[rn/view
Expand Down Expand Up @@ -47,7 +47,7 @@
{:style (style/page-content @content-height)}
[quo/text {:size :heading-1} "Page Content"]
[quo/input
{:auto-focus true
{:auto-focus false
:value ""}]
[quo/button
{:type :outline
Expand Down

0 comments on commit fb8ff8f

Please sign in to comment.