status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
Mohamed Javid 2023-10-12 00:35:07 +08:00 committed by GitHub
parent 5ceca3201d
commit 54e347eaea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/components/gradient/gradient_cover/style.cljs
View File

@ -1,4 +1,6 @@
(ns quo2.components.gradient.gradient-cover.style) (ns quo2.components.gradient.gradient-cover.style)
(def root-container (defn root-container
{:height 252}) [opacity]
{:height 252
:opacity opacity})

4
src/quo2/components/gradient/gradient_cover/view.cljs
View File

@ -5,7 +5,7 @@
[react-native.linear-gradient :as linear-gradient])) [react-native.linear-gradient :as linear-gradient]))
(defn- view-internal (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) (let [color-top (colors/custom-color customization-color 50 20)
color-bottom (colors/custom-color customization-color 50 0)] color-bottom (colors/custom-color customization-color 50 0)]
[linear-gradient/linear-gradient [linear-gradient/linear-gradient
@ -13,6 +13,6 @@
:colors [color-top color-bottom] :colors [color-top color-bottom]
:start {:x 0 :y 0} :start {:x 0 :y 0}
:end {:x 0 :y 1} :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)) (def view (quo.theme/with-theme view-internal))

22
src/status_im2/common/bottom_sheet/style.cljs
View File

@ -14,7 +14,7 @@
:margin-vertical 8}) :margin-vertical 8})
(defn sheet (defn sheet
[{:keys [top bottom]} window-height theme padding-bottom-override selected-item shell?] [{:keys [top]} window-height selected-item]
{:position :absolute {:position :absolute
:max-height (- window-height top) :max-height (- window-height top)
:z-index 1 :z-index 1
@ -24,11 +24,7 @@
:border-top-left-radius 20 :border-top-left-radius 20
:border-top-right-radius 20 :border-top-right-radius 20
:overflow (when-not selected-item :hidden) :overflow (when-not selected-item :hidden)
:flex 1 :flex 1})
:padding-bottom (or padding-bottom-override (+ bottom))
:background-color (if shell?
:transparent
(colors/theme-colors colors/white colors/neutral-95 theme))})
(def gradient-bg (def gradient-bg
{:position :absolute {:position :absolute
@ -45,16 +41,18 @@
:bottom 0}) :bottom 0})
(defn sheet-content (defn sheet-content
[theme padding-bottom-override insets bottom-margin] [theme padding-bottom-override {:keys [bottom]} shell? bottom-margin]
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme) {:border-top-left-radius 20
:border-top-left-radius 20
:border-top-right-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 (defn selected-item
[theme top bottom sheet-bottom-margin border-radius] [theme top bottom selected-item-smaller-than-sheet? border-radius]
{:position :absolute {:position :absolute
:top (when-not sheet-bottom-margin (- 0 top)) :top (when-not selected-item-smaller-than-sheet? (- 0 top))
:bottom bottom :bottom bottom
:overflow :hidden :overflow :hidden
:left 0 :left 0

46
src/status_im2/common/bottom_sheet/view.cljs
View File

@ -64,16 +64,23 @@
{:keys [content selected-item padding-bottom-override border-radius on-close shell? {:keys [content selected-item padding-bottom-override border-radius on-close shell?
gradient-cover? customization-color] gradient-cover? customization-color]
:or {border-radius 12}}] :or {border-radius 12}}]
(let [{window-height :height} (rn/get-window) (let [{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0) bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height) translate-y (reanimated/use-shared-value window-height)
sheet-gesture (get-sheet-gesture translate-y bg-opacity window-height on-close) sheet-gesture (get-sheet-gesture translate-y
sheet-bottom-margin (< @item-height bg-opacity
(- window-height @sheet-height (:top insets) bottom-margin)) window-height
top (- window-height (:top insets) (:bottom insets) @sheet-height) on-close)
bottom (if sheet-bottom-margin selected-item-smaller-than-sheet? (< @item-height
(+ @sheet-height bottom-margin (:bottom insets)) (- window-height
(:bottom insets))] @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 (rn/use-effect
#(if hide? #(if hide?
(hide translate-y bg-opacity window-height on-close) (hide translate-y bg-opacity window-height on-close)
@ -96,27 +103,24 @@
[reanimated/view [reanimated/view
{:style (reanimated/apply-animations-to-style {:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]} {:transform [{:translateY translate-y}]}
(style/sheet insets (style/sheet insets window-height selected-item))}
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}]])
(when shell? (when shell?
[blur/ios-view {:style style/shell-bg}]) [blur/ios-view {:style style/shell-bg}])
(when selected-item (when selected-item
[rn/view [rn/view
{:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %)) {:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
:style :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]]) [selected-item]])
[rn/view [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 %))} :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)}] [rn/view {:style (style/handle theme)}]
[content]]]]])))) [content]]]]]))))

6
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -168,9 +168,9 @@
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:dismiss-keyboard])
(rf/dispatch (rf/dispatch
[:show-bottom-sheet [:show-bottom-sheet
{:content {:content (fn []
(fn [] [method-menu/view on-change-profile-pic])
[method-menu/view on-change-profile-pic])}])) :shell? true}]))
:image-picker-props {:profile-picture (or :image-picker-props {:profile-picture (or
@profile-pic @profile-pic
(rf/sub (rf/sub

33
src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs
View File

@ -9,18 +9,16 @@
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn render-action-sheet (defn render-action-sheet
[] [customization-color]
[:<> [:<>
[rn/view {:style {:align-items :center}} [quo/drawer-top
[quo/summary-info {:type :account
{:type :status-account :blur? false
:networks? false :title "Collectibles vault"
:account-props {:customization-color :purple :networks [:ethereum :optimism]
:size 32 :description "0x0ah...78b"
:emoji "🍑" :account-avatar-emoji "🍿"
:type :default :customization-color (or customization-color :blue)}]
:name "Collectibles vault"
:address "0x0ah...78b"}}]]
[quo/action-drawer [quo/action-drawer
[[{:icon :i/edit [[{:icon :i/edit
:label "Edit account" :label "Edit account"
@ -31,10 +29,11 @@
{:icon :i/share {:icon :i/share
:label "Share account" :label "Share account"
:on-press #(js/alert "Share account")} :on-press #(js/alert "Share account")}
{:icon :i/delete {:icon :i/delete
:label "Remove account" :label "Remove account"
:danger? true :danger? true
:on-press #(js/alert "Remove account")}]]]]) :on-press #(js/alert "Remove account")
:add-divider? true}]]]])
(def descriptor (def descriptor
[(preview/customization-color-option) [(preview/customization-color-option)
@ -76,7 +75,9 @@
[quo/button [quo/button
{:container-style {:margin-horizontal 40} {:container-style {:margin-horizontal 40}
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [render-action-sheet]) {:content (fn []
[render-action-sheet
@customization-color])
:gradient-cover? true :gradient-cover? true
:customization-color @customization-color}])} :customization-color @customization-color}])}
"See in bottom sheet"]])])) "See in bottom sheet"]])]))

3
src/status_im2/contexts/shell/activity_center/header/view.cljs
View File

@ -40,7 +40,8 @@
:accessibility-label :activity-center-open-more :accessibility-label :activity-center-open-more
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(rf/dispatch [:show-bottom-sheet
{:content drawer/options {:content drawer/options
:theme :dark}])} :theme :dark
:shell? true}])}
:i/options]] :i/options]]
[quo/text [quo/text
{:size :heading-1 {:size :heading-1