diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index 83b6fef210..754aa19ed9 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -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")) diff --git a/src/status_im/ui/components/status_bar/styles.cljs b/src/status_im/ui/components/status_bar/styles.cljs index 4e12609bd4..727a23b7f9 100644 --- a/src/status_im/ui/components/status_bar/styles.cljs +++ b/src/status_im/ui/components/status_bar/styles.cljs @@ -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}) diff --git a/src/status_im/ui/components/status_bar/view.cljs b/src/status_im/ui/components/status_bar/view.cljs index 33d86b26f2..5aff808174 100644 --- a/src/status_im/ui/components/status_bar/view.cljs +++ b/src/status_im/ui/components/status_bar/view.cljs @@ -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))))) diff --git a/src/status_im/ui/screens/routing/core.cljs b/src/status_im/ui/screens/routing/core.cljs index 2463fac60e..be38c426e2 100644 --- a/src/status_im/ui/screens/routing/core.cljs +++ b/src/status_im/ui/screens/routing/core.cljs @@ -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 diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index f6948e71b2..85ca6b11db 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -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)]