fix status bar colors

This commit is contained in:
Roman Volosovskyi 2019-02-21 12:28:58 +02:00
parent 6e7cd3794e
commit 2fa27d4ef9
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
5 changed files with 146 additions and 23 deletions

View File

@ -38,6 +38,7 @@
(def safe-area-view (get-class "SafeAreaView")) (def safe-area-view (get-class "SafeAreaView"))
(def progress-bar (get-class "ProgressBarAndroid")) (def progress-bar (get-class "ProgressBarAndroid"))
(def status-bar-class (when-not platform/desktop? (get-react-property "StatusBar")))
(def status-bar (get-class (if platform/desktop? "View" "StatusBar"))) (def status-bar (get-class (if platform/desktop? "View" "StatusBar")))
(def scroll-view (get-class "ScrollView")) (def scroll-view (get-class "ScrollView"))

View File

@ -25,9 +25,20 @@
:android (create-status-bar-style {:translucent? true :android (create-status-bar-style {:translucent? true
:bar-style "dark-content"})}) :bar-style "dark-content"})})
(defstyle status-bar-main-main
{:ios (create-status-bar-style {:background-color colors/white
:bar-style "default"})
:android (create-status-bar-style {:background-color colors/black
:bar-style "light-content"})})
(def view-main (def view-main
(create-view-style {:background-color colors/white})) (create-view-style {:background-color colors/white}))
(defstyle view-modal-main
{:ios (create-view-style {:background-color colors/white})
:android (create-view-style {:background-color colors/black
:height 0})})
;; :transparent ;; :transparent
(defstyle status-bar-transparent (defstyle status-bar-transparent
{:ios (create-status-bar-style {:background-color colors/transparent}) {:ios (create-status-bar-style {:background-color colors/transparent})

View File

@ -1,19 +1,117 @@
(ns status-im.ui.components.status-bar.view (ns status-im.ui.components.status-bar.view
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.styles :as styles])) [status-im.ui.components.status-bar.styles :as styles]
[status-im.utils.platform :as platform]))
(defn status-bar [{:keys [type flat?]}] (defn status-bar [{:keys [type flat?]}]
(let [[status-bar-style view-style] (let [view-style
(case type (case type
:main [styles/status-bar-main styles/view-main] :main styles/view-main
:transparent [styles/status-bar-transparent styles/view-transparent] :modal-main styles/view-modal-main
:modal [styles/status-bar-modal styles/view-modal] :transparent styles/view-transparent
:modal-white [styles/status-bar-modal-white styles/view-modal-white] :modal styles/view-modal
:modal-wallet [styles/status-bar-modal-wallet styles/view-modal-wallet] :modal-white styles/view-modal-white
:transaction [styles/status-bar-transaction styles/view-transaction] :modal-wallet styles/view-modal-wallet
:wallet [styles/status-bar-wallet styles/view-wallet] :transaction styles/view-transaction
:wallet-tab [styles/status-bar-wallet-tab styles/view-wallet-tab] :wallet styles/view-wallet
[styles/status-bar-default styles/view-default])] :wallet-tab styles/view-wallet-tab
[react/view styles/view-default)]
[react/status-bar (cond-> status-bar-style flat? (assoc :elevation 0))] [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]))
[react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]]))
(defn get-config [view-id]
(get
{:create-account {:flat? true}
:chat-modal {:type :modal-white}
:intro {:flat? true}
:home {:type :main}
:chat-stack {:type :main}
:new {:type :main}
:new-chat {:type :main}
:contact-toggle-list {:type :main}
:new-public-chat {:type :main}
:qr-scanner {:type :main}
:open-dapp {:type :main}
:my-profile {:type :main}
:profile-stack {:type :main}
:contacts-list {:type :main}
:browser {:type :main}
:mobile-network-settings {:type :main}
:backup-seed {:type :main}
:currency-settings {:type :main}
:installations {:type :main}
:transactions-history {:type :main}
:dapps-permissions {:type :main}
:help-center {:type :main}
:about-app {:type :main}
:offline-messaging-settings {:type :main}
:bootnodes-settings {:type :main}
:fleet-settings {:type :main}
:log-level-settings {:type :main}
:stickers-pack-modal {:type :main}
:show-extension-modal {:type :main}
:wallet {:type :wallet-tab}
:wallet-stack {:type :wallet-tab}
:profile-qr-viewer {:type :modal-white}
:recipient-qr-code {:type :transparent}
:wallet-send-assets {:type :wallet}
:wallet-request-assets {:type :wallet}
:recent-recipients {:type :wallet}
:contact-code {:type :wallet}
:wallet-onboarding-setup {:type :wallet}
:wallet-send-transaction-request {:type :wallet}
:wallet-request-transaction {:type :wallet-tab}
:wallet-send-transaction-chat {:type :wallet}
:wallet-send-transaction {:type :wallet-tab}
:sign-message-modal {:type :modal-wallet}
:wallet-transaction-fee {:type :modal-wallet}
:wallet-modal {:type :modal-wallet}
:wallet-onboarding-setup-modal {:type :modal-wallet}
:wallet-send-transaction-modal {:type :modal-wallet}
:wallet-settings-assets {:type :modal-wallet}
:wallet-sign-message-modal {:type :modal-wallet}
:wallet-settings-hook {:type :wallet}
:wallet-transaction-sent {:type :transparent}
:wallet-transaction-sent-modal {:type :modal-wallet}
:wallet-transactions-filter {:type :modal-main}}
view-id))
(defn set-status-bar
"If more than one `StatusBar` is rendered, the one which was mounted last will
have higher priority
https://facebook.github.io/react-native/docs/statusbar.html
This means that if we have more than one screen rendered at the same time
(which happens due to bottom nav change), it might happen that the screen
which was already rendered before will be reopened but the `StatusBar` from
a different screen which still exists but is blurred will be applied.
Thus we need to set props to `StatusBar` imperatively when a particular screen
is shown. At the same time, the background of `StatusBar` should be rendered
inside the screen in order to have better transitions between screens."
[view-id]
(let [{:keys [type]} (get-config view-id)
{:keys [background-color bar-style hidden
network-activity-indicator-visible
translucent]}
(case type
:main styles/status-bar-main
:modal-main styles/status-bar-main-main
:transparent styles/status-bar-transparent
:modal styles/status-bar-modal
:modal-white styles/status-bar-modal-white
:modal-wallet styles/status-bar-modal-wallet
:transaction styles/status-bar-transaction
:wallet styles/status-bar-wallet
:wallet-tab styles/status-bar-wallet-tab
styles/status-bar-default)]
(when (and background-color platform/android?)
(.setBackgroundColor react/status-bar-class (clj->js background-color)))
(when bar-style
(.setBarStyle react/status-bar-class (clj->js bar-style)))
(when hidden
(.setHidden react/status-bar-class (clj->js hidden)))
(when network-activity-indicator-visible
(.setNetworkActivityIndicatorVisible
react/status-bar-class
(clj->js network-activity-indicator-visible)))
(when translucent
(.setTranslucent react/status-bar-class (clj->js translucent)))))

View File

@ -13,7 +13,22 @@
[status-im.ui.screens.routing.chat-stack :as chat-stack] [status-im.ui.screens.routing.chat-stack :as chat-stack]
[status-im.ui.screens.routing.wallet-stack :as wallet-stack] [status-im.ui.screens.routing.wallet-stack :as wallet-stack]
[status-im.ui.screens.routing.profile-stack :as profile-stack] [status-im.ui.screens.routing.profile-stack :as profile-stack]
[status-im.ui.components.bottom-bar.core :as bottom-bar])) [status-im.ui.components.bottom-bar.core :as bottom-bar]
[status-im.ui.components.status-bar.view :as status-bar]))
(defn navigation-events [view-id modal?]
[:> navigation/navigation-events
{:on-will-focus
(fn []
(log/debug :on-will-focus view-id)
(when modal?
(status-bar/set-status-bar view-id))
(re-frame/dispatch [:screens/on-will-focus view-id]))
:on-did-focus
(fn []
(log/debug :on-did-focus view-id)
(when-not modal?
(status-bar/set-status-bar view-id)))}])
(defn wrap [view-id component] (defn wrap [view-id component]
"Wraps screen with main view and adds navigation-events component" "Wraps screen with main view and adds navigation-events component"
@ -21,11 +36,7 @@
(let [main-view (react/create-main-screen-view view-id)] (let [main-view (react/create-main-screen-view view-id)]
[main-view common-styles/flex [main-view common-styles/flex
[component] [component]
[:> navigation/navigation-events [navigation-events view-id false]])))
{:on-will-focus
(fn []
(log/debug :on-will-focus view-id)
(re-frame/dispatch [:screens/on-will-focus view-id]))}]])))
(defn wrap-modal [modal-view component] (defn wrap-modal [modal-view component]
"Wraps modal screen with necessary styling and adds :on-request-close handler "Wraps modal screen with necessary styling and adds :on-request-close handler
@ -47,9 +58,11 @@
:else :else
(re-frame/dispatch [:navigate-back])))} (re-frame/dispatch [:navigate-back])))}
[react/main-screen-modal-view modal-view [react/main-screen-modal-view modal-view
[component]]]] [component]]
[navigation-events modal-view true]]]
[react/main-screen-modal-view modal-view [react/main-screen-modal-view modal-view
[component]]))) [component]
[navigation-events modal-view true]])))
(defn prepare-config [config] (defn prepare-config [config]
(-> config (-> config

View File

@ -139,7 +139,7 @@
(defview filter-history [] (defview filter-history []
(letsubs [filter-data [:wallet.transactions/filters]] (letsubs [filter-data [:wallet.transactions/filters]]
[react/view styles/filter-container [react/view styles/filter-container
[status-bar/status-bar {:type :modal-white}] [status-bar/status-bar {:type :modal-main}]
[toolbar/toolbar {} [toolbar/toolbar {}
[toolbar/nav-clear-text {:accessibility-label :done-button} (i18n/label :t/done)] [toolbar/nav-clear-text {:accessibility-label :done-button} (i18n/label :t/done)]
[toolbar/content-title (i18n/label :t/transactions-filter-title)] [toolbar/content-title (i18n/label :t/transactions-filter-title)]