diff --git a/src/react_native/navigation.cljs b/src/react_native/navigation.cljs index 8d86e574f3..a41dfd05c9 100644 --- a/src/react_native/navigation.cljs +++ b/src/react_native/navigation.cljs @@ -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)}))) diff --git a/src/status_im2/contexts/activity_center/events.cljs b/src/status_im2/contexts/activity_center/events.cljs index 4c9ee9baa0..6beeb24d31 100644 --- a/src/status_im2/contexts/activity_center/events.cljs +++ b/src/status_im2/contexts/activity_center/events.cljs @@ -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 diff --git a/src/status_im2/contexts/activity_center/style.cljs b/src/status_im2/contexts/activity_center/style.cljs index 2c1ec7e088..1e9de4a82c 100644 --- a/src/status_im2/contexts/activity_center/style.cljs +++ b/src/status_im2/contexts/activity_center/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/activity_center/view.cljs b/src/status_im2/contexts/activity_center/view.cljs index 2272dead75..0229221571 100644 --- a/src/status_im2/contexts/activity_center/view.cljs +++ b/src/status_im2/contexts/activity_center/view.cljs @@ -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}]])))) diff --git a/src/status_im2/navigation/core.cljs b/src/status_im2/navigation/core.cljs index 9ee42d0111..f13df3f223 100644 --- a/src/status_im2/navigation/core.cljs +++ b/src/status_im2/navigation/core.cljs @@ -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) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 61aa1e8112..7ba27a0158 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -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 diff --git a/src/status_im2/navigation/view.cljs b/src/status_im2/navigation/view.cljs index 9bd4aefd2b..cd0a41b6f9 100644 --- a/src/status_im2/navigation/view.cljs +++ b/src/status_im2/navigation/view.cljs @@ -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