parent
573115c22e
commit
ab44dce27b
|
@ -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))})
|
|
@ -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]]]]))))
|
||||||
|
|
|
@ -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
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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]
|
||||||
|
|
Loading…
Reference in New Issue