status-im
/
status-react
mirror of https://github.com/status-im/status-react.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)
(def root-container
{:height 252})
(defn root-container
[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]))
(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))

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

@ -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

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?
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]]]]]))))

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

@ -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

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

@ -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"]])]))

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

@ -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