From 7ffb7d85580b38effd44f5daeb39ef3a48451a44 Mon Sep 17 00:00:00 2001 From: Ulises M Date: Fri, 27 Oct 2023 21:40:46 -0600 Subject: [PATCH] WIP: content behind the keyboard --- .../common/floating_button_page/style.cljs | 5 +- .../common/floating_button_page/view.cljs | 138 ++++++++++-------- .../quo_preview/other_components/view.cljs | 45 +++--- .../contexts/quo_preview/share/qr_code.cljs | 1 + .../contexts/wallet/save_address/view.cljs | 27 ++-- 5 files changed, 119 insertions(+), 97 deletions(-) diff --git a/src/status_im2/common/floating_button_page/style.cljs b/src/status_im2/common/floating_button_page/style.cljs index aaf2aed84c..508af676fd 100644 --- a/src/status_im2/common/floating_button_page/style.cljs +++ b/src/status_im2/common/floating_button_page/style.cljs @@ -5,13 +5,12 @@ :top 0 :bottom 0 :left 0 - :right 0 - :z-index 100}) + :right 0}) (defn keyboard-view-style [keyboard-shown?] {:border-width 1 - :border-color :blue + :border-color :yellow ;:padding-bottom (if-not keyboard-shown? 12 0) }) diff --git a/src/status_im2/common/floating_button_page/view.cljs b/src/status_im2/common/floating_button_page/view.cljs index 58b1dc533b..04d026030a 100644 --- a/src/status_im2/common/floating_button_page/view.cljs +++ b/src/status_im2/common/floating_button_page/view.cljs @@ -10,12 +10,8 @@ [status-im2.common.floating-button-page.floating-container.view :as floating-container] [status-im2.common.floating-button-page.style :as style])) -(defn show-background +(defn show-button-background? [{:keys [keyboard-shown? available-space content-height] :as props}] - (prn "show-background? " - (< available-space content-height) - props) - (when keyboard-shown? (< available-space content-height))) @@ -30,43 +26,46 @@ :else false)) +(defonce scroll-view-ref (atom nil)) + (defn f-view - [{:keys [header footer blur?]} - page-content] + [{:keys [blur?]} header page-content footer] (reagent/with-let [theme (quo.theme/use-theme-value) window-height (:height (rn/get-window)) - - floating-container-height (reagent/atom 0) header-height (reagent/atom 0) + footer-height (reagent/atom 0) + floating-container-height (reagent/atom 0) content-container-height (reagent/atom 0) - show-keyboard? (reagent/atom false) content-scroll-y (reagent/atom 0) + ;; show-listener (oops/ocall rn/keyboard "addListener" - (if platform/android? - "keyboardDidShow" - "keyboardWillShow") - #(reset! show-keyboard? true)) - hide-listener (oops/ocall rn/keyboard - "addListener" - (if platform/android? - "keyboardDidHide" - "keyboardWillHide") - #(reset! show-keyboard? false))] + "keyboardDidShow" + (fn [e] + (prn e) + (js/setTimeout + (fn [] + (println "LAST SCROLL POSITION: " @content-scroll-y) + (println "FINAL SHOULD BE:" (+ @content-scroll-y @footer-height)) + + (some-> @scroll-view-ref + (.scrollTo #js {:x 0 + :y (+ @content-scroll-y @footer-height) + :animated true}))) + (+ (oops/oget e "duration") 300))))] (let [{:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) - show-background? (show-background - {:keyboard-shown? keyboard-shown - :available-space (- window-height - keyboard-height - @floating-container-height - (safe-area/get-top) - 50) - :content-height (+ @content-scroll-y - @content-container-height - @header-height)})] - + show-background? (show-button-background? + {:keyboard-shown? keyboard-shown + :available-space (- window-height + keyboard-height + @floating-container-height + (safe-area/get-top) + 50) + :content-height (+ @content-scroll-y + @content-container-height + @header-height)})] [rn/view {:style style/page-container} [rn/view @@ -74,38 +73,59 @@ (let [height (oops/oget event "nativeEvent.layout.height")] (reset! header-height height)))} header] - [rn/scroll-view - {:on-scroll (fn [event] - (let [y (oops/oget event "nativeEvent.contentOffset.y")] - (reset! content-scroll-y y))) - :scroll-event-throttle 64 - :content-container-style {:flexGrow 1}} - [rn/view - {:style {:border-width 1 - :border-color :red} - :on-layout (fn [event] - (let [height (oops/oget event "nativeEvent.layout.height")] - (reset! content-container-height height)))} + [rn/scroll-view {:ref #(reset! scroll-view-ref %) + :on-scroll (fn [event] + (let [y (oops/oget event "nativeEvent.contentOffset.y")] + (prn y) + (reset! content-scroll-y y))) + :scroll-event-throttle 64 + :content-container-style {:flex-grow 1 + :padding-bottom @footer-height + }} + [rn/view {:style {:border-width 1 + :border-color :red} + :on-layout (fn [event] + (let [height (oops/oget event "nativeEvent.layout.height")] + (reset! content-container-height height)))} page-content]] - [rn/keyboard-avoiding-view - {:style (style/keyboard-view-style keyboard-shown) - :pointer-events :box-none} - [floating-container/view - {:theme theme - :blur? blur? - :floating? keyboard-shown - :show-background? show-background? - :on-layout (fn [event] + + [rn/view {:style (cond-> {:position :absolute + :left 0 + :right 0 + :bottom 0 + :padding-vertical 16 + :padding-horizontal 20 + :background-color (if show-background? + ;"rgba(67, 90, 183, 1)" + "rgba(67, 90, 183, 0.4352)" + "rgba(67, 90, 183, 0.4352)")} + #_#_(not keyboard-shown) (assoc :position :absolute + :left 0 + :right 0 + :bottom 0)) + :on-layout (fn [event] (let [height (oops/oget event "nativeEvent.layout.height")] - (prn height "height height height") - (reset! floating-container-height height)))} - footer - ;[ button-props button-label] - ]]]) + (reset! footer-height height)))} + footer] + + + #_[floating-container/view + {:theme theme + :blur? blur? + :floating? keyboard-shown + :show-background? show-background? + :on-layout (fn [event] + (let [height (oops/oget event "nativeEvent.layout.height")] + (prn height "height height height") + (reset! floating-container-height height)))} + footer + ;[ button-props button-label] + ] + + ]) (finally - (oops/ocall show-listener "remove") - (oops/ocall hide-listener "remove")))) + (oops/ocall show-listener "remove")))) (defn view [props header page-content button-component] diff --git a/src/status_im2/contexts/quo_preview/other_components/view.cljs b/src/status_im2/contexts/quo_preview/other_components/view.cljs index 56f9ebc703..7842ddfb6c 100644 --- a/src/status_im2/contexts/quo_preview/other_components/view.cljs +++ b/src/status_im2/contexts/quo_preview/other_components/view.cljs @@ -37,28 +37,21 @@ :z-index 10}}] [floating-button-page/view - {:blur? false - :header [quo/page-nav - {:type :no-title - :text-align :left - :right-side [] - :background :blur - :icon-name :i/close - :on-press #(rf/dispatch [:navigate-back])}] - :footer [quo/button - {:container-style {:z-index 2} - :customization-color (if @button-pressed? :army :blue) - :on-press (fn [] - (prn @acc-height) - (swap! acc-height + 20) - (swap! button-pressed? not))} ;#(js/alert "to be implemented") - "Save address"] - #_#_:button-props - {:container-style {:z-index 2} - :customization-color :army - :on-press #(js/alert "to be implemented")} - ;:button-label "Save address" - } + {:blur? false} + #_#_:button-props + {:container-style {:z-index 2} + :customization-color :army + :on-press #(js/alert "to be implemented")} + ;:button-label "Save address" + + [quo/page-nav + {:type :no-title + :text-align :left + :right-side [] + :background :blur + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + [rn/view {:style {:flex 1 ;:height @acc-height @@ -99,6 +92,14 @@ [quo/input {:label "label" :value "value"}]] + [quo/button + {:container-style {:z-index 2} + :customization-color (if @button-pressed? :army :blue) + :on-press (fn [] + (prn @acc-height) + (swap! acc-height + 20) + (swap! button-pressed? not))} ;#(js/alert "to be implemented") + "Save address"] ] #_[rn/view diff --git a/src/status_im2/contexts/quo_preview/share/qr_code.cljs b/src/status_im2/contexts/quo_preview/share/qr_code.cljs index cc50eb848b..f2cd610cb9 100644 --- a/src/status_im2/contexts/quo_preview/share/qr_code.cljs +++ b/src/status_im2/contexts/quo_preview/share/qr_code.cljs @@ -58,6 +58,7 @@ :type :text} (preview/customization-color-option)]) + (defn view [] (let [media-server-port (rf/sub [:mediaserver/port]) diff --git a/src/status_im2/contexts/wallet/save_address/view.cljs b/src/status_im2/contexts/wallet/save_address/view.cljs index 02bc201946..be81f45b53 100644 --- a/src/status_im2/contexts/wallet/save_address/view.cljs +++ b/src/status_im2/contexts/wallet/save_address/view.cljs @@ -17,18 +17,14 @@ address (reagent/atom "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd2")] (fn [{:keys [theme]}] [floating-button-page/view - {:header [quo/page-nav - {:type :no-title - :text-align :left - :right-side [] - :background :blur - :icon-name :i/close - :on-press #(rf/dispatch [:dismiss-modal :wallet-save-address])}] - :footer [quo/button - {:container-style {:z-index 2} - :customization-color @account-color - :on-press #(js/alert "to be implemented")} - "Save address"]} + [quo/page-nav + {:type :no-title + :text-align :left + :right-side [] + :background :blur + :icon-name :i/close + :on-press #(rf/dispatch [:dismiss-modal :wallet-save-address])}] + [rn/view {:style {:flex 1}} [quo/wallet-user-avatar {:container-style {:margin-bottom 12 @@ -79,7 +75,12 @@ {:short-name "opt" :network-name :optimism}] :address @address}])}]] - ]))) + + [quo/button + {:container-style {:z-index 2} + :customization-color @account-color + :on-press #(js/alert "to be implemented")} + "Save address"]]))) (defn view-internal [props] [:f> f-view props])