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

fix: bottom sheet padding (#16216) 

* fix: bottom sheet padding
This commit is contained in:
Omar Basem 2023-06-09 17:03:00 +04:00 committed by GitHub
parent 573115c22e
commit ab44dce27b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im2/common/bottom_sheet/styles.cljs → src/status_im2/common/bottom_sheet/style.cljs
View File

@ -1,4 +1,4 @@
(ns status-im2.common.bottom-sheet.styles
(ns status-im2.common.bottom-sheet.style
(:require [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[status-im.utils.platform :as platform]))
@ -25,7 +25,7 @@
:border-top-right-radius 20
:overflow (when shell? :hidden)
:flex 1
:padding-bottom (or padding-bottom-override (max 20 bottom))
:padding-bottom (or padding-bottom-override (+ bottom 8))
:background-color (if shell?
:transparent
(colors/theme-colors colors/white colors/neutral-90 override-theme))})

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

@ -3,7 +3,7 @@
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[react-native.reanimated :as reanimated]
[status-im2.common.bottom-sheet.styles :as styles]
[status-im2.common.bottom-sheet.style :as style]
[react-native.gesture :as gesture]
[oops.core :as oops]
[react-native.hooks :as hooks]
@ -80,20 +80,20 @@
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]}
(styles/sheet insets
(style/sheet insets
window-height
override-theme
padding-bottom-override
shell?))
:on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
(when shell? [blur/ios-view {:style styles/shell-bg}])
(when shell? [blur/ios-view {:style style/shell-bg}])
(when selected-item
[rn/view
[rn/view {:style (styles/selected-item override-theme window-height @sheet-height insets)}
[rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
[selected-item]]])
;; handle
[rn/view {:style (styles/handle override-theme)}]
[rn/view {:style (style/handle override-theme)}]
;; content
[content]]]]))))

5
src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs
View File

@ -19,9 +19,10 @@
:justify-content :space-between
:margin-top 20})
(def nickname-container
(defn nickname-container
[insets]
{:margin-horizontal 20
:margin-bottom (when platform/ios? 20)})
:margin-bottom (when platform/ios? (max (:bottom insets) 20))})
(defn nickname-description
[]

6
src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs
View File

@ -4,6 +4,7 @@
[quo2.components.icon :as icons]
[quo2.core :as quo]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
[utils.i18n :as i18n]
@ -28,11 +29,12 @@
(let [{:keys [primary-name nickname public-key]} contact
entered-nickname (reagent/atom (or nickname ""))
photo-path (when-not (empty? (:images contact))
(rf/sub [:chats/photo-path public-key]))]
(rf/sub [:chats/photo-path public-key]))
insets (safe-area/get-insets)]
(fn [{:keys [title description accessibility-label
close-button-text]}]
[rn/view
{:style style/nickname-container
{:style (style/nickname-container insets)
:accessibility-label accessibility-label}
[quo/text
{:weight :semi-bold

7
src/status_im2/navigation/view.cljs
View File

@ -69,17 +69,12 @@
(when js/goog.DEBUG
[reloader/reload-view])]))))
; Designs require bottom inset to be bigger than safe area, otherwise it is too close to the bottom
(defn bottom-sheet-insets
[]
(assoc (safe-area/get-insets) :bottom 55))
(def bottom-sheet
(reagent/reactify-component
(fn []
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
sheet (last sheets)
insets (bottom-sheet-insets)]
insets (safe-area/get-insets)]
^{:key (str "sheet" @reloader/cnt)}
[:<>
[inactive]