🧈 Transparent modal support 🧈 (#15268)
This commit is contained in:
flexsurfer
GitHub
parent
de8c294c9a
commit
81212573d7
|
|
@ -73,3 +73,15 @@
|
|||
(defn merge-options
|
||||
[id opts]
|
||||
(.mergeOptions Navigation id (clj->js opts)))
|
||||
|
||||
(def constants (atom nil))
|
||||
|
||||
(defn status-bar-height
|
||||
[]
|
||||
(:status-bar-height @constants))
|
||||
|
||||
(.then (.constants Navigation)
|
||||
(fn [^js consts]
|
||||
(reset! constants {:top-bar-height (.-topBarHeight consts)
|
||||
:bottom-tabs-height (.-bottomTabsHeight consts)
|
||||
:status-bar-height (.-statusBarHeight consts)})))
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
[taoensso.timbre :as log]
|
||||
[utils.collection :as collection]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.navigation.events :as navigation]))
|
||||
|
||||
(def defaults
|
||||
{:filter-status :unread
|
||||
|
|
@ -24,26 +25,15 @@
|
|||
|
||||
(rf/defn open-activity-center
|
||||
{:events [:activity-center/open]}
|
||||
[{:keys [db]} {:keys [filter-type filter-status]}]
|
||||
;; It's essential to clean-up the popover state and delay the dispatch of the
|
||||
;; `:show-popover` event, otherwise the popover won't be displayed under
|
||||
;; certain conditions. See issue
|
||||
;; https://github.com/status-im/status-mobile/issues/15230
|
||||
{:db (cond-> (dissoc db :popover/popover)
|
||||
filter-status
|
||||
(assoc-in [:activity-center :filter :status] filter-status)
|
||||
[{:keys [db] :as cofx} {:keys [filter-type filter-status]}]
|
||||
(rf/merge cofx
|
||||
{:db (cond-> db
|
||||
filter-status
|
||||
(assoc-in [:activity-center :filter :status] filter-status)
|
||||
|
||||
filter-type
|
||||
(assoc-in [:activity-center :filter :type] filter-type))
|
||||
:dispatch-later [{:ms 25
|
||||
:dispatch [:show-popover
|
||||
{:view :activity-center
|
||||
:style {:margin 0}
|
||||
:disable-touchable-overlay? true
|
||||
:delay-ms 225
|
||||
:blur-view? true
|
||||
:blur-view-props {:blur-amount 20
|
||||
:blur-type :dark}}]}]})
|
||||
filter-type
|
||||
(assoc-in [:activity-center :filter :type] filter-type))}
|
||||
(navigation/open-modal :activity-center {})))
|
||||
|
||||
;;;; Misc
|
||||
|
||||
|
|
|
|||
|
|
@ -7,20 +7,13 @@
|
|||
{:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:padding-horizontal screen-padding
|
||||
:margin-bottom 12})
|
||||
:margin-vertical 12})
|
||||
|
||||
(def header-heading
|
||||
{:padding-horizontal screen-padding
|
||||
:padding-vertical 12
|
||||
:color colors/white})
|
||||
|
||||
(defn screen-container
|
||||
[window-width top bottom]
|
||||
{:flex 1
|
||||
:width window-width
|
||||
:padding-top (if (pos? top) (+ top 12) 12)
|
||||
:padding-bottom bottom})
|
||||
|
||||
(defn notification-container
|
||||
[index]
|
||||
{:margin-top (if (zero? index) 0 4)
|
||||
|
|
@ -60,3 +53,8 @@
|
|||
:height 120
|
||||
:background-color colors/danger-50
|
||||
:margin-bottom 20})
|
||||
|
||||
(def blur
|
||||
{:style {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
|
||||
:overlayColor colors/neutral-80-opa-80
|
||||
:blur-amount 20})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.contexts.activity-center.notification-types :as types]
|
||||
[status-im2.contexts.activity-center.notification.admin.view :as admin]
|
||||
[status-im2.contexts.activity-center.notification.contact-requests.view :as contact-requests]
|
||||
|
|
@ -14,7 +13,9 @@
|
|||
[status-im2.contexts.activity-center.notification.reply.view :as reply]
|
||||
[status-im2.contexts.activity-center.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
[utils.re-frame :as rf]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.navigation :as navigation]))
|
||||
|
||||
(defn filter-selector-read-toggle
|
||||
[]
|
||||
|
|
@ -134,7 +135,7 @@
|
|||
(contains? types-with-unread types/system))}]}]))
|
||||
|
||||
(defn header
|
||||
[request-close]
|
||||
[]
|
||||
[rn/view
|
||||
[rn/view {:style style/header-container}
|
||||
[quo/button
|
||||
|
|
@ -143,7 +144,7 @@
|
|||
:size 32
|
||||
:accessibility-label :close-activity-center
|
||||
:override-theme :dark
|
||||
:on-press request-close}
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
:i/close]
|
||||
[quo/button
|
||||
{:icon true
|
||||
|
|
@ -202,23 +203,20 @@
|
|||
nil)]))))
|
||||
|
||||
(defn view
|
||||
[request-close]
|
||||
[]
|
||||
(let [active-swipeable (atom nil)]
|
||||
[:f>
|
||||
(fn []
|
||||
(rn/use-effect-once #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
|
||||
[safe-area/consumer
|
||||
(fn [{:keys [top bottom]}]
|
||||
(let [notifications (rf/sub [:activity-center/notifications])
|
||||
window-width (rf/sub [:dimensions/window-width])]
|
||||
[rn/view {:style (style/screen-container window-width top bottom)}
|
||||
[header request-close]
|
||||
[rn/flat-list
|
||||
{:data notifications
|
||||
:render-data active-swipeable
|
||||
:content-container-style {:flex-grow 1}
|
||||
:empty-component [empty-tab]
|
||||
:key-fn :id
|
||||
:on-scroll-to-index-failed identity
|
||||
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
|
||||
:render-fn notification-component}]]))])]))
|
||||
(rf/dispatch [:activity-center.notifications/fetch-first-page])
|
||||
(fn []
|
||||
(let [notifications (rf/sub [:activity-center/notifications])]
|
||||
[rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
|
||||
[blur/view style/blur]
|
||||
[header]
|
||||
[rn/flat-list
|
||||
{:data notifications
|
||||
:render-data active-swipeable
|
||||
:content-container-style {:flex-grow 1}
|
||||
:empty-component [empty-tab]
|
||||
:key-fn :id
|
||||
:on-scroll-to-index-failed identity
|
||||
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
|
||||
:render-fn notification-component}]]))))
|
||||
|
|
|
|||
|
|
@ -90,14 +90,13 @@
|
|||
(reset! state/curr-modal true)
|
||||
(swap! state/modals conj comp)
|
||||
(navigation/show-modal
|
||||
{:stack {:children
|
||||
[{:component
|
||||
{:name comp
|
||||
:id comp
|
||||
:options (update-modal-topbar-options
|
||||
(merge (roots/status-bar-options)
|
||||
(roots/default-root)
|
||||
options))}}]}})))))
|
||||
{:component
|
||||
{:name comp
|
||||
:id comp
|
||||
:options (update-modal-topbar-options
|
||||
(merge (roots/status-bar-options)
|
||||
(roots/default-root)
|
||||
options))}})))))
|
||||
|
||||
(re-frame/reg-fx :open-modal-fx open-modal)
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
[status-im2.contexts.syncing.view :as settings-syncing]
|
||||
[status-im2.contexts.chat.lightbox.view :as lightbox]
|
||||
[status-im2.config :as config]
|
||||
[quo.design-system.colors :as colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
|
||||
[react-native.platform :as platform]
|
||||
[status-im2.contexts.chat.photo-selector.view :as photo-selector]
|
||||
|
|
@ -21,6 +21,20 @@
|
|||
(def components
|
||||
[])
|
||||
|
||||
(def transparent-screen-options
|
||||
(merge
|
||||
{:topBar {:visible false}
|
||||
:modalPresentationStyle :overCurrentContext
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:orientation :portrait
|
||||
:backgroundColor :transparent}}
|
||||
(if platform/android?
|
||||
{:navigationBar {:backgroundColor colors/neutral-100}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:drawBehind true}}
|
||||
{:statusBar {:style :light}})))
|
||||
|
||||
(defn screens
|
||||
[]
|
||||
(concat
|
||||
|
|
@ -31,7 +45,8 @@
|
|||
:component intro/view}
|
||||
|
||||
{:name :activity-center
|
||||
:options {:topBar {:visible false}}
|
||||
:insets {:top false}
|
||||
:options transparent-screen-options
|
||||
:component activity-center/view}
|
||||
|
||||
{:name :shell-stack
|
||||
|
|
@ -45,10 +60,10 @@
|
|||
{:name :lightbox
|
||||
:insets {:top false :bottom false}
|
||||
:options {:topBar {:visible false}
|
||||
:statusBar {:backgroundColor colors/black-persist
|
||||
:statusBar {:backgroundColor colors/black
|
||||
:style :light
|
||||
:animate true}
|
||||
:navigationBar {:backgroundColor colors/black-persist}
|
||||
:navigationBar {:backgroundColor colors/black}
|
||||
:animations {:push {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type :decelerate
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
(concat screens/components)))
|
||||
|
||||
(defn wrapped-screen-style
|
||||
[screen-insets safe-insets]
|
||||
[insets-options insets background-color]
|
||||
(merge
|
||||
{:flex 1
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-100)}
|
||||
(when (get screen-insets :bottom)
|
||||
{:padding-bottom (:bottom safe-insets)})
|
||||
(when (get screen-insets :top true)
|
||||
{:padding-top (:top safe-insets)})))
|
||||
:background-color (or background-color (colors/theme-colors colors/white colors/neutral-100))}
|
||||
(when (get insets-options :bottom)
|
||||
{:padding-bottom (:bottom insets)})
|
||||
(when (get insets-options :top true)
|
||||
{:padding-top (:top insets)})))
|
||||
|
||||
(defn inactive
|
||||
[]
|
||||
|
|
@ -63,17 +63,15 @@
|
|||
[key]
|
||||
(reagent.core/reactify-component
|
||||
(fn []
|
||||
(let [{:keys [component insets]} (get
|
||||
(if js/goog.DEBUG
|
||||
(get-screens)
|
||||
screens)
|
||||
(keyword key))]
|
||||
(let [{:keys [component insets options]}
|
||||
(get (if js/goog.DEBUG (get-screens) screens) (keyword key))
|
||||
background-color (get-in options [:layout :backgroundColor])]
|
||||
^{:key (str "root" key @reloader/cnt)}
|
||||
[safe-area/provider
|
||||
[safe-area/consumer
|
||||
(fn [safe-insets]
|
||||
[rn/view
|
||||
{:style (wrapped-screen-style insets safe-insets)}
|
||||
{:style (wrapped-screen-style insets safe-insets background-color)}
|
||||
[inactive]
|
||||
[component]])]
|
||||
(when js/goog.DEBUG
|
||||
|
|
|
|||
Loading…
Reference in New Issue