fix status and nav bar color (#19089)
This commit is contained in:
parent
9bbde035dc
commit
8b0681c44a
|
@ -7,7 +7,7 @@
|
|||
db (assoc-in db [:alert-banners (:type banner)] banner)]
|
||||
(cond-> {:db db}
|
||||
(zero? current-banners-count)
|
||||
(assoc :show-alert-banner nil))))
|
||||
(assoc :show-alert-banner (:view-id db)))))
|
||||
|
||||
(defn remove-alert-banner
|
||||
[{:keys [db]} [banner-type]]
|
||||
|
@ -15,12 +15,12 @@
|
|||
new-count (count (get db :alert-banners))]
|
||||
(cond-> {:db db}
|
||||
(zero? new-count)
|
||||
(assoc :hide-alert-banner nil))))
|
||||
(assoc :hide-alert-banner (:view-id db)))))
|
||||
|
||||
(defn remove-all-alert-banners
|
||||
[{:keys [db]}]
|
||||
{:db (dissoc db :alert-banners)
|
||||
:hide-alert-banner nil})
|
||||
:hide-alert-banner (:view-id db)})
|
||||
|
||||
(re-frame/reg-event-fx :alert-banners/add add-alert-banner)
|
||||
(re-frame/reg-event-fx :alert-banners/remove remove-alert-banner)
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
(update :toasts dissoc :hide-toasts-timer-set))}
|
||||
|
||||
(and (not update?) (= (count ordered) 1))
|
||||
(assoc :show-toasts [])
|
||||
(assoc :show-toasts (:view-id db))
|
||||
|
||||
(not (:id opts))
|
||||
(update-in [:db :toasts :next-toast-number] inc))))
|
||||
|
@ -28,8 +28,9 @@
|
|||
{:events [:toasts/hide-with-check]}
|
||||
[{:keys [db]}]
|
||||
(when (get-in db [:toasts :hide-toasts-timer-set])
|
||||
{:db (update db :toasts dissoc :hide-toasts-timer-set)
|
||||
:hide-toasts nil}))
|
||||
{:db (update db :toasts dissoc :hide-toasts-timer-set)
|
||||
:hide-toasts nil
|
||||
:reload-status-nav-color-fx (:view-id db)}))
|
||||
|
||||
(rf/defn close
|
||||
{:events [:toasts/close]}
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
:else
|
||||
[[:profile.settings/switch-theme-fx
|
||||
[(or (get-in db [:profile/profile :appearance])
|
||||
[(or (:appearance settings)
|
||||
constants/theme-type-dark)
|
||||
:shell-stack
|
||||
false]]
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
(ns status-im.contexts.profile.settings.effects
|
||||
(:require [native-module.core :as native-module]
|
||||
[quo.foundations.colors :as colors]
|
||||
[re-frame.core :as re-frame]
|
||||
[react-native.platform :as platform]
|
||||
[status-im.common.theme.core :as theme]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.contexts.shell.jump-to.utils :as shell.utils]
|
||||
[status-im.setup.hot-reload :as hot-reload]))
|
||||
[status-im.setup.hot-reload :as hot-reload]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(re-frame/reg-fx
|
||||
:profile.settings/blank-preview-flag-changed
|
||||
|
@ -22,19 +21,14 @@
|
|||
(re-frame/reg-fx
|
||||
:profile.settings/switch-theme-fx
|
||||
(fn [[theme-type view-id reload-ui?]]
|
||||
(let [[theme status-bar-theme nav-bar-color]
|
||||
;; Status bar theme represents status bar icons colors, so opposite to app theme
|
||||
(if (or (= theme-type constants/theme-type-dark)
|
||||
(and (= theme-type constants/theme-type-system)
|
||||
(theme/device-theme-dark?)))
|
||||
[:dark :light colors/neutral-100]
|
||||
[:light :dark colors/white])]
|
||||
(let [theme (if (or (= theme-type constants/theme-type-dark)
|
||||
(and (= theme-type constants/theme-type-system)
|
||||
(theme/device-theme-dark?)))
|
||||
:dark
|
||||
:light)]
|
||||
(theme/set-theme theme)
|
||||
(re-frame/dispatch [:change-shell-status-bar-style
|
||||
(if (shell.utils/home-stack-open?) status-bar-theme :light)])
|
||||
(rf/dispatch [:reload-status-nav-color view-id])
|
||||
(when reload-ui?
|
||||
(re-frame/dispatch [:dismiss-all-overlays])
|
||||
(when js/goog.DEBUG
|
||||
(hot-reload/reload))
|
||||
(when-not (= view-id :shell-stack)
|
||||
(re-frame/dispatch [:change-shell-nav-bar-color nav-bar-color]))))))
|
||||
(hot-reload/reload))))))
|
||||
|
|
|
@ -14,9 +14,7 @@
|
|||
(reanimated/set-shared-value (:home-stack-state @state/shared-values-atom) home-stack-state-value)
|
||||
(utils/change-selected-stack-id stack-id true home-stack-state-value)
|
||||
(js/setTimeout
|
||||
(fn []
|
||||
(utils/load-stack stack-id)
|
||||
(utils/change-shell-status-bar-style))
|
||||
#(utils/load-stack stack-id)
|
||||
(if animate? shell.constants/shell-animation-time 0))))
|
||||
|
||||
(defn change-tab
|
||||
|
@ -41,7 +39,6 @@
|
|||
(reanimated/set-shared-value (:animate-home-stack-left @state/shared-values-atom) true)
|
||||
(reanimated/set-shared-value (:home-stack-state @state/shared-values-atom) home-stack-state-value)
|
||||
(utils/change-selected-stack-id stack-id true home-stack-state-value)
|
||||
(utils/change-shell-status-bar-style)
|
||||
(when animate? (utils/update-view-id (or stack-id :shell)))))
|
||||
|
||||
;;;; Floating Screen
|
||||
|
|
|
@ -108,16 +108,6 @@
|
|||
:dispatch [:set-view-id :shell]
|
||||
:effects.shell/navigate-to-jump-to nil}))
|
||||
|
||||
(rf/defn change-shell-status-bar-style
|
||||
{:events [:change-shell-status-bar-style]}
|
||||
[_ style]
|
||||
{:merge-options {:id "shell-stack" :options {:statusBar {:style style}}}})
|
||||
|
||||
(rf/defn change-shell-nav-bar-color
|
||||
{:events [:change-shell-nav-bar-color]}
|
||||
[_ color]
|
||||
{:merge-options {:id "shell-stack" :options {:navigationBar {:backgroundColor color}}}})
|
||||
|
||||
(rf/defn shell-navigate-to
|
||||
{:events [:shell/navigate-to]}
|
||||
[{:keys [db now]} go-to-view-id screen-params animation hidden-screen?]
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im.contexts.shell.jump-to.utils
|
||||
(:require
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.async-storage :as async-storage]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
|
@ -136,12 +135,3 @@
|
|||
(defn update-view-id
|
||||
[view-id]
|
||||
(rf/dispatch [:set-view-id view-id]))
|
||||
|
||||
;;; Misc
|
||||
(defn change-shell-status-bar-style
|
||||
[]
|
||||
(rf/dispatch [:change-shell-status-bar-style
|
||||
(if (or (= :dark (quo.theme/get-theme))
|
||||
(not (home-stack-open?)))
|
||||
:light
|
||||
:dark)]))
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
(ns status-im.navigation.effects
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.navigation :as navigation]
|
||||
[react-native.platform :as platform]
|
||||
[status-im.contexts.shell.jump-to.constants :as shell.constants]
|
||||
[status-im.contexts.shell.jump-to.utils :as jump-to.utils]
|
||||
[status-im.navigation.options :as options]
|
||||
[status-im.navigation.roots :as roots]
|
||||
[status-im.navigation.state :as state]
|
||||
|
@ -10,20 +14,48 @@
|
|||
[taoensso.timbre :as log]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn- set-status-bar-color
|
||||
[theme]
|
||||
(rn/set-status-bar-style
|
||||
(if (= theme :dark)
|
||||
"light-content"
|
||||
"dark-content")
|
||||
true))
|
||||
(defn get-status-nav-color
|
||||
[view-id]
|
||||
(let [theme (or (get-in views/screens [view-id :options :theme])
|
||||
(quo.theme/get-theme))
|
||||
[rnn-status-bar rn-status-bar]
|
||||
(if (or (= theme :dark)
|
||||
@state/alert-banner-shown?
|
||||
(and (= view-id :shell-stack) (not (jump-to.utils/home-stack-open?))))
|
||||
[:light "light-content"]
|
||||
[:dark "dark-content"])
|
||||
home-stack? (some #(= view-id %) shell.constants/stacks-ids)
|
||||
;; Home screen nav bar always dark due to bottom tabs
|
||||
nav-bar-color (if (or home-stack?
|
||||
(= view-id :shell-stack)
|
||||
(= theme :dark))
|
||||
colors/neutral-100
|
||||
colors/white)
|
||||
comp-id (if (or home-stack?
|
||||
(jump-to.utils/shell-navigation? view-id)
|
||||
(= view-id :shell))
|
||||
:shell-stack
|
||||
view-id)]
|
||||
[rnn-status-bar rn-status-bar nav-bar-color comp-id]))
|
||||
|
||||
(defn reload-status-nav-color-fx
|
||||
[view-id]
|
||||
(when (and (= @state/root-id :shell-stack) view-id)
|
||||
(let [[rnn-status-bar rn-status-bar nav-bar-color comp-id] (get-status-nav-color view-id)]
|
||||
(if platform/ios?
|
||||
(rn/set-status-bar-style rn-status-bar true)
|
||||
(navigation/merge-options
|
||||
(name comp-id)
|
||||
{:statusBar {:style rnn-status-bar}
|
||||
:navigationBar {:backgroundColor nav-bar-color}})))))
|
||||
|
||||
(rf/reg-fx :reload-status-nav-color-fx reload-status-nav-color-fx)
|
||||
|
||||
(rf/reg-fx :set-view-id-fx
|
||||
(fn [view-id]
|
||||
(reload-status-nav-color-fx view-id)
|
||||
(rf/dispatch [:screens/on-will-focus view-id])
|
||||
(when-let [{:keys [on-focus options]} (get views/screens view-id)]
|
||||
(set-status-bar-color (or (:theme options)
|
||||
(quo.theme/get-theme)))
|
||||
(when-let [{:keys [on-focus]} (get views/screens view-id)]
|
||||
(when on-focus
|
||||
(rf/dispatch on-focus)))))
|
||||
|
||||
|
@ -167,11 +199,12 @@
|
|||
opts)}})))
|
||||
|
||||
(rf/reg-fx :show-toasts
|
||||
(fn []
|
||||
(show-overlay "toasts"
|
||||
{:overlay {:interceptTouchOutside false}
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:orientation ["portrait"]}})))
|
||||
(fn [view-id]
|
||||
(let [[rnn-status-bar nav-bar-color] (get-status-nav-color view-id)]
|
||||
(show-overlay "toasts"
|
||||
(assoc (options/statusbar-and-navbar-options nil rnn-status-bar nav-bar-color)
|
||||
:overlay
|
||||
{:interceptTouchOutside false})))))
|
||||
|
||||
(rf/reg-fx :hide-toasts
|
||||
(fn [] (navigation/dissmiss-overlay "toasts")))
|
||||
|
@ -186,10 +219,16 @@
|
|||
|
||||
;;;; Alert Banner
|
||||
(rf/reg-fx :show-alert-banner
|
||||
(fn [] (show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}})))
|
||||
(fn [view-id]
|
||||
(show-overlay "alert-banner" {:overlay {:interceptTouchOutside false}})
|
||||
(reset! state/alert-banner-shown? true)
|
||||
(reload-status-nav-color-fx view-id)))
|
||||
|
||||
(rf/reg-fx :hide-alert-banner
|
||||
(fn [] (navigation/dissmiss-overlay "alert-banner")))
|
||||
(fn [view-id]
|
||||
(navigation/dissmiss-overlay "alert-banner")
|
||||
(reset! state/alert-banner-shown? false)
|
||||
(reload-status-nav-color-fx view-id)))
|
||||
|
||||
;;;; Merge options
|
||||
|
||||
|
|
|
@ -101,8 +101,9 @@
|
|||
(let [{:keys [sheets]} (:bottom-sheet db)
|
||||
rest-sheets (butlast sheets)]
|
||||
(merge
|
||||
{:db (assoc db :bottom-sheet {:sheets rest-sheets :hide? false})
|
||||
:hide-bottom-sheet nil}
|
||||
{:db (assoc db :bottom-sheet {:sheets rest-sheets :hide? false})
|
||||
:hide-bottom-sheet nil
|
||||
:reload-status-nav-color-fx (:view-id db)}
|
||||
(when (seq rest-sheets)
|
||||
{:dispatch [:show-next-bottom-sheet]}))))
|
||||
|
||||
|
@ -134,7 +135,11 @@
|
|||
(rf/defn set-view-id
|
||||
{:events [:set-view-id]}
|
||||
[{:keys [db]} view-id]
|
||||
(when-not (= view-id (:view-id db))
|
||||
(let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)]
|
||||
{:db (assoc db :view-id view-id)
|
||||
:set-view-id-fx view-id})))
|
||||
(let [view-id (if (= view-id :shell-stack) (shell.utils/calculate-view-id) view-id)]
|
||||
{:db (assoc db :view-id view-id)
|
||||
:set-view-id-fx view-id}))
|
||||
|
||||
(rf/defn reload-status-nav-color
|
||||
{:events [:reload-status-nav-color]}
|
||||
[{:keys [db]} view-id]
|
||||
{:reload-status-nav-color-fx (or view-id (:view-id db))})
|
||||
|
|
|
@ -451,11 +451,7 @@
|
|||
:component settings-password/view}]
|
||||
|
||||
[{:name :shell
|
||||
:options {:theme :dark}}
|
||||
{:name :communities-stack}
|
||||
{:name :chats-stack}
|
||||
{:name :wallet-stack}
|
||||
{:name :browser-stack}]
|
||||
:options {:theme :dark}}]
|
||||
|
||||
(when js/goog.DEBUG
|
||||
[{:name :dev-component-preview
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
(defonce root-id (atom nil))
|
||||
(defonce modals (atom []))
|
||||
(defonce dissmissing (atom false))
|
||||
(defonce alert-banner-shown? (atom false))
|
||||
|
||||
(defonce ^:private navigation-state (atom []))
|
||||
|
||||
|
|
Loading…
Reference in New Issue