WIP: blur is now showing on Android

status-im · Oct 31, 2023 · fb8ff8f · fb8ff8f
1 parent 659abb4
commit fb8ff8f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/src/status_im2/common/floating_button_page/floating_container/style.cljs b/src/status_im2/common/floating_button_page/floating_container/style.cljs
@@ -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
@@ -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
@@ -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
@@ -38,4 +42,4 @@
   [margin-bottom-shared-value]
   (reanimated/apply-animations-to-style
    {:margin-bottom margin-bottom-shared-value}
-   {:margin-top :auto}))
+   {}))
diff --git a/src/status_im2/common/floating_button_page/floating_container/view.cljs b/src/status_im2/common/floating_button_page/floating_container/view.cljs
@@ -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

diff --git a/src/status_im2/common/floating_button_page/style.cljs b/src/status_im2/common/floating_button_page/style.cljs
@@ -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
+   })
diff --git a/src/status_im2/common/floating_button_page/view.cljs b/src/status_im2/common/floating_button_page/view.cljs
@@ -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]]

diff --git a/src/status_im2/contexts/status_im_preview/common/floating_button_page/view.cljs b/src/status_im2/contexts/status_im_preview/common/floating_button_page/view.cljs
@@ -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
@@ -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