status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/src/status_im/ui/components/react.cljs
View File

@ -38,6 +38,7 @@
(def safe-area-view (get-class "SafeAreaView"))
(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 scroll-view (get-class "ScrollView"))

11
src/status_im/ui/components/status_bar/styles.cljs
View File

@ -25,9 +25,20 @@
:android (create-status-bar-style {:translucent? true
: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
(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
(defstyle status-bar-transparent
{:ios (create-status-bar-style {:background-color colors/transparent})

126
src/status_im/ui/components/status_bar/view.cljs
View File

@ -1,19 +1,117 @@
(ns status-im.ui.components.status-bar.view
(: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?]}]
(let [[status-bar-style view-style]
(let [view-style
(case type
:main [styles/status-bar-main styles/view-main]
:transparent [styles/status-bar-transparent styles/view-transparent]
:modal [styles/status-bar-modal styles/view-modal]
:modal-white [styles/status-bar-modal-white styles/view-modal-white]
:modal-wallet [styles/status-bar-modal-wallet styles/view-modal-wallet]
:transaction [styles/status-bar-transaction styles/view-transaction]
:wallet [styles/status-bar-wallet styles/view-wallet]
:wallet-tab [styles/status-bar-wallet-tab styles/view-wallet-tab]
[styles/status-bar-default styles/view-default])]
[react/view
[react/status-bar (cond-> status-bar-style flat? (assoc :elevation 0))]
[react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]]))
:main styles/view-main
:modal-main styles/view-modal-main
:transparent styles/view-transparent
:modal styles/view-modal
:modal-white styles/view-modal-white
:modal-wallet styles/view-modal-wallet
:transaction styles/view-transaction
:wallet styles/view-wallet
:wallet-tab styles/view-wallet-tab
styles/view-default)]
[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)))))

29
src/status_im/ui/screens/routing/core.cljs
View File

@ -13,7 +13,22 @@
[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.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]
"Wraps screen with main view and adds navigation-events component"
@ -21,11 +36,7 @@
(let [main-view (react/create-main-screen-view view-id)]
[main-view common-styles/flex
[component]
[:> navigation/navigation-events
{:on-will-focus
(fn []
(log/debug :on-will-focus view-id)
(re-frame/dispatch [:screens/on-will-focus view-id]))}]])))
[navigation-events view-id false]])))
(defn wrap-modal [modal-view component]
"Wraps modal screen with necessary styling and adds :on-request-close handler
@ -47,9 +58,11 @@
:else
(re-frame/dispatch [:navigate-back])))}
[react/main-screen-modal-view modal-view
[component]]]]
[component]]
[navigation-events modal-view true]]]
[react/main-screen-modal-view modal-view
[component]])))
[component]
[navigation-events modal-view true]])))
(defn prepare-config [config]
(-> config

2
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

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