From e4a2ac9ccea2a1548f60f037e85776f83fe29387 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Mon, 21 Aug 2023 18:13:50 +0800 Subject: [PATCH] Add gradient background support in bottom sheet (#16986) This commit adds Gradient Background in the bottom sheet which will be used in Wallet Account Actions, and Switcher bottom sheet. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- src/status_im2/common/bottom_sheet/style.cljs | 10 +++- src/status_im2/common/bottom_sheet/view.cljs | 12 +++-- .../quo_preview/gradient/gradient_cover.cljs | 54 ++++++++++++++----- 3 files changed, 59 insertions(+), 17 deletions(-) diff --git a/src/status_im2/common/bottom_sheet/style.cljs b/src/status_im2/common/bottom_sheet/style.cljs index e588465ba3..6f6c592b59 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 shell?] + [{:keys [top bottom]} window-height theme padding-bottom-override selected-item shell?] {:position :absolute :max-height (- window-height top) :z-index 1 @@ -23,13 +23,19 @@ :right 0 :border-top-left-radius 20 :border-top-right-radius 20 - :overflow (when shell? :hidden) + :overflow (when-not selected-item :hidden) :flex 1 :padding-bottom (or padding-bottom-override (+ bottom 8)) :background-color (if shell? :transparent (colors/theme-colors colors/white colors/neutral-95 theme))}) +(def gradient-bg + {:position :absolute + :top 0 + :left 0 + :right 0}) + (def shell-bg {:position :absolute :background-color (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90) diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index e48b8b58c2..b950e721e2 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -1,7 +1,8 @@ (ns status-im2.common.bottom-sheet.view (:require [oops.core :as oops] + [quo2.core :as quo] [quo2.foundations.colors :as colors] - [quo2.theme :as theme] + [quo2.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [react-native.gesture :as gesture] @@ -57,7 +58,8 @@ [_ _] (let [sheet-height (reagent/atom 0)] (fn [{:keys [hide? insets theme]} - {:keys [content selected-item padding-bottom-override on-close shell?]}] + {:keys [content selected-item padding-bottom-override on-close shell? + gradient-cover? customization-color]}] (let [{window-height :height} (rn/get-window) bg-opacity (reanimated/use-shared-value 0) translate-y (reanimated/use-shared-value window-height) @@ -88,8 +90,12 @@ window-height theme padding-bottom-override + selected-item shell?)) :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))} + (when gradient-cover? + [rn/view {:style style/gradient-bg} + [quo/gradient-cover {:customization-color customization-color}]]) (when shell? [blur/ios-view {:style style/shell-bg}]) (when selected-item @@ -106,4 +112,4 @@ [args sheet] [:f> f-view args sheet]) -(def view (theme/with-theme internal-view)) +(def view (quo.theme/with-theme internal-view)) 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 298b274ae2..65f6aceae3 100644 --- a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs +++ b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs @@ -1,21 +1,44 @@ (ns status-im2.contexts.quo-preview.gradient.gradient-cover - (:require [quo2.components.colors.color-picker.view :as color-picker] - [quo2.components.gradient.gradient-cover.view :as gradient-cover] + (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [quo2.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] - [status-im2.contexts.quo-preview.preview :as preview])) + [status-im2.contexts.quo-preview.preview :as preview] + [utils.re-frame :as rf])) + +(defn render-action-sheet + [] + [:<> + [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/action-drawer + [[{:icon :i/edit + :label "Edit account" + :on-press #(js/alert "Edit account")} + {:icon :i/copy + :label "Copy address" + :on-press #(js/alert "Copy address")} + {: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")}]]]]) (def descriptor - [{:label "Customization color:" - :key :customization-color - :type :select - :options (mapv (fn [color] - {:key color :value color}) - color-picker/color-list)} + [(preview/customization-color-option) {:label "Blur (dark only)?" :key :blur? :type :boolean}]) @@ -51,14 +74,21 @@ :bottom 0 :padding-vertical 40} :blur-type :dark} - [gradient-cover/view @state]]] + [quo/gradient-cover @state]]] [rn/view {:style {:padding-vertical 20 :padding-horizontal 16}} - [color-picker/view + [quo/color-picker {:blur? @blur? :selected @customization-color - :on-change #(reset! customization-color %)}]]])])) + :on-change #(reset! customization-color %)}]] + [quo/button + {:container-style {:margin-horizontal 40} + :on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [render-action-sheet]) + :gradient-cover? true + :customization-color @customization-color}])} + "See in bottom sheet"]])])) (defn preview-gradient-cover []