fix status and nav bar color (#19089)

This commit is contained in:
Parvesh Monu 2024-04-01 18:52:03 +05:30 committed by GitHub
parent 9bbde035dc
commit 8b0681c44a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 87 additions and 74 deletions

View File

@ -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)

View File

@ -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]}

View File

@ -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]]

View File

@ -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))))))

View File

@ -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

View File

@ -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?]

View File

@ -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)]))

View File

@ -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

View File

@ -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))})

View File

@ -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

View File

@ -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 []))