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

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] (:require [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
@ -25,7 +25,7 @@
:border-top-right-radius 20 :border-top-right-radius 20
:overflow (when shell? :hidden) :overflow (when shell? :hidden)
:flex 1 :flex 1
:padding-bottom (or padding-bottom-override (max 20 bottom)) :padding-bottom (or padding-bottom-override (+ bottom 8))
:background-color (if shell? :background-color (if shell?
:transparent :transparent
(colors/theme-colors colors/white colors/neutral-90 override-theme))}) (colors/theme-colors colors/white colors/neutral-90 override-theme))})

View File

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

View File

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

View File

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

View File

@ -69,17 +69,12 @@
(when js/goog.DEBUG (when js/goog.DEBUG
[reloader/reload-view])])))) [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 (def bottom-sheet
(reagent/reactify-component (reagent/reactify-component
(fn [] (fn []
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet]) (let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
sheet (last sheets) sheet (last sheets)
insets (bottom-sheet-insets)] insets (safe-area/get-insets)]
^{:key (str "sheet" @reloader/cnt)} ^{:key (str "sheet" @reloader/cnt)}
[:<> [:<>
[inactive] [inactive]