From 54e347eaea78611836a818976a443f68ad944512 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Thu, 12 Oct 2023 00:35:07 +0800 Subject: [PATCH] Bottom Sheet Fixes (#17609) This commit fixes the following issues in the bottom sheet: - the sheet is cut off at the bottom in the shell (dark blur) theme (the drawers in the onboarding/login flow) - the incorrect background in the shell (dark blur) theme (the drawers in the onboarding/login flow) Bug - the spacing at the bottom is doubled - the gradient cover is not shown in the bottom sheet - the spacing between the selected item and the bottom sheet - the bottom sheet type in "Create Profile" and "Activity Center" screens --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- .../gradient/gradient_cover/style.cljs | 6 ++- .../gradient/gradient_cover/view.cljs | 4 +- src/status_im2/common/bottom_sheet/style.cljs | 22 ++++----- src/status_im2/common/bottom_sheet/view.cljs | 46 ++++++++++--------- .../onboarding/create_profile/view.cljs | 6 +-- .../quo_preview/gradient/gradient_cover.cljs | 33 ++++++------- .../shell/activity_center/header/view.cljs | 3 +- 7 files changed, 63 insertions(+), 57 deletions(-) diff --git a/src/quo2/components/gradient/gradient_cover/style.cljs b/src/quo2/components/gradient/gradient_cover/style.cljs index 773278a7e1..feee187b65 100644 --- a/src/quo2/components/gradient/gradient_cover/style.cljs +++ b/src/quo2/components/gradient/gradient_cover/style.cljs @@ -1,4 +1,6 @@ (ns quo2.components.gradient.gradient-cover.style) -(def root-container - {:height 252}) +(defn root-container + [opacity] + {:height 252 + :opacity opacity}) diff --git a/src/quo2/components/gradient/gradient_cover/view.cljs b/src/quo2/components/gradient/gradient_cover/view.cljs index 488920debf..7fdb8c7839 100644 --- a/src/quo2/components/gradient/gradient_cover/view.cljs +++ b/src/quo2/components/gradient/gradient_cover/view.cljs @@ -5,7 +5,7 @@ [react-native.linear-gradient :as linear-gradient])) (defn- view-internal - [{:keys [customization-color container-style] :or {customization-color :blue}}] + [{:keys [customization-color opacity container-style] :or {customization-color :blue}}] (let [color-top (colors/custom-color customization-color 50 20) color-bottom (colors/custom-color customization-color 50 0)] [linear-gradient/linear-gradient @@ -13,6 +13,6 @@ :colors [color-top color-bottom] :start {:x 0 :y 0} :end {:x 0 :y 1} - :style (merge style/root-container container-style)}])) + :style (merge (style/root-container opacity) container-style)}])) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/common/bottom_sheet/style.cljs b/src/status_im2/common/bottom_sheet/style.cljs index b7509b4437..77a4f8a167 100644 --- a/src/status_im2/common/bottom_sheet/style.cljs +++ b/src/status_im2/common/bottom_sheet/style.cljs @@ -14,7 +14,7 @@ :margin-vertical 8}) (defn sheet - [{:keys [top bottom]} window-height theme padding-bottom-override selected-item shell?] + [{:keys [top]} window-height selected-item] {:position :absolute :max-height (- window-height top) :z-index 1 @@ -24,11 +24,7 @@ :border-top-left-radius 20 :border-top-right-radius 20 :overflow (when-not selected-item :hidden) - :flex 1 - :padding-bottom (or padding-bottom-override (+ bottom)) - :background-color (if shell? - :transparent - (colors/theme-colors colors/white colors/neutral-95 theme))}) + :flex 1}) (def gradient-bg {:position :absolute @@ -45,16 +41,18 @@ :bottom 0}) (defn sheet-content - [theme padding-bottom-override insets bottom-margin] - {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) - :border-top-left-radius 20 + [theme padding-bottom-override {:keys [bottom]} shell? bottom-margin] + {:border-top-left-radius 20 :border-top-right-radius 20 - :padding-bottom (or padding-bottom-override (+ (:bottom insets) bottom-margin))}) + :padding-bottom (or padding-bottom-override (+ bottom bottom-margin)) + :background-color (if shell? + :transparent + (colors/theme-colors colors/white colors/neutral-95 theme))}) (defn selected-item - [theme top bottom sheet-bottom-margin border-radius] + [theme top bottom selected-item-smaller-than-sheet? border-radius] {:position :absolute - :top (when-not sheet-bottom-margin (- 0 top)) + :top (when-not selected-item-smaller-than-sheet? (- 0 top)) :bottom bottom :overflow :hidden :left 0 diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 67410afd17..dd1a73e269 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -64,16 +64,23 @@ {:keys [content selected-item padding-bottom-override border-radius on-close shell? gradient-cover? customization-color] :or {border-radius 12}}] - (let [{window-height :height} (rn/get-window) - bg-opacity (reanimated/use-shared-value 0) - translate-y (reanimated/use-shared-value window-height) - sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height on-close) - sheet-bottom-margin (< @item-height - (- window-height @sheet-height (:top insets) bottom-margin)) - top (- window-height (:top insets) (:bottom insets) @sheet-height) - bottom (if sheet-bottom-margin - (+ @sheet-height bottom-margin (:bottom insets)) - (:bottom insets))] + (let [{window-height :height} (rn/get-window) + bg-opacity (reanimated/use-shared-value 0) + translate-y (reanimated/use-shared-value window-height) + sheet-gesture (get-sheet-gesture translate-y + bg-opacity + window-height + on-close) + selected-item-smaller-than-sheet? (< @item-height + (- window-height + @sheet-height + (:top insets) + (:bottom insets) + bottom-margin)) + top (- window-height (:top insets) @sheet-height) + bottom (if selected-item-smaller-than-sheet? + (+ @sheet-height bottom-margin) + (:bottom insets))] (rn/use-effect #(if hide? (hide translate-y bg-opacity window-height on-close) @@ -96,27 +103,24 @@ [reanimated/view {:style (reanimated/apply-animations-to-style {:transform [{:translateY translate-y}]} - (style/sheet insets - window-height - theme - padding-bottom-override - selected-item - shell?))} - (when gradient-cover? - [rn/view {:style style/gradient-bg} - [quo/gradient-cover {:customization-color customization-color}]]) + (style/sheet insets window-height selected-item))} (when shell? [blur/ios-view {:style style/shell-bg}]) (when selected-item [rn/view {:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %)) :style - (style/selected-item theme top bottom sheet-bottom-margin border-radius)} + (style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)} [selected-item]]) [rn/view - {:style (style/sheet-content theme padding-bottom-override insets bottom-margin) + {:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin) :on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))} + (when gradient-cover? + [rn/view {:style style/gradient-bg} + [quo/gradient-cover + {:customization-color customization-color + :opacity 0.4}]]) [rn/view {:style (style/handle theme)}] [content]]]]])))) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 70e6c780b1..9f682f9ab4 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -168,9 +168,9 @@ (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:show-bottom-sheet - {:content - (fn [] - [method-menu/view on-change-profile-pic])}])) + {:content (fn [] + [method-menu/view on-change-profile-pic]) + :shell? true}])) :image-picker-props {:profile-picture (or @profile-pic (rf/sub diff --git a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs index 688755be3a..4986b2735b 100644 --- a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs +++ b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs @@ -9,18 +9,16 @@ [utils.re-frame :as rf])) (defn render-action-sheet - [] + [customization-color] [:<> - [rn/view {:style {:align-items :center}} - [quo/summary-info - {:type :status-account - :networks? false - :account-props {:customization-color :purple - :size 32 - :emoji "🍑" - :type :default - :name "Collectibles vault" - :address "0x0ah...78b"}}]] + [quo/drawer-top + {:type :account + :blur? false + :title "Collectibles vault" + :networks [:ethereum :optimism] + :description "0x0ah...78b" + :account-avatar-emoji "🍿" + :customization-color (or customization-color :blue)}] [quo/action-drawer [[{:icon :i/edit :label "Edit account" @@ -31,10 +29,11 @@ {:icon :i/share :label "Share account" :on-press #(js/alert "Share account")} - {:icon :i/delete - :label "Remove account" - :danger? true - :on-press #(js/alert "Remove account")}]]]]) + {:icon :i/delete + :label "Remove account" + :danger? true + :on-press #(js/alert "Remove account") + :add-divider? true}]]]]) (def descriptor [(preview/customization-color-option) @@ -76,7 +75,9 @@ [quo/button {:container-style {:margin-horizontal 40} :on-press #(rf/dispatch [:show-bottom-sheet - {:content (fn [] [render-action-sheet]) + {:content (fn [] + [render-action-sheet + @customization-color]) :gradient-cover? true :customization-color @customization-color}])} "See in bottom sheet"]])])) diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs index d5d143713c..e2c82b7ac1 100644 --- a/src/status_im2/contexts/shell/activity_center/header/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs @@ -40,7 +40,8 @@ :accessibility-label :activity-center-open-more :on-press #(rf/dispatch [:show-bottom-sheet {:content drawer/options - :theme :dark}])} + :theme :dark + :shell? true}])} :i/options]] [quo/text {:size :heading-1