fix distortion of app theme due to change in system theme (#12934)

This commit is contained in:
Parvesh Monu 2021-12-27 15:24:45 +05:30 committed by GitHub
parent 961692251c
commit ffba396e4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 15 deletions

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="alert_text">#ffffff</color>
</resources>

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="alert_text">#000000</color>
</resources>

View File

@ -8,6 +8,7 @@
<item name="android:forceDarkAllowed">true</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="android:statusBarColor">?attr/backgroundColor</item>
<item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
</style>
<style name="LightTheme" parent="AppTheme">
@ -21,4 +22,9 @@
<item name="backgroundColor">#000000</item>
<item name="android:windowLightStatusBar">false</item>
</style>
<style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">@color/alert_text</item>
<item name="android:textColorPrimary">@color/alert_text</item>
</style>
</resources>

View File

@ -6,7 +6,7 @@
[status-im.async-storage.core :as async-storage]
status-im.backup.core
status-im.bootnodes.core
status-im.bottom-sheet.core
[status-im.bottom-sheet.core :as bottom-sheet]
status-im.browser.core
status-im.browser.permissions
[status-im.chat.models :as chat]
@ -58,7 +58,9 @@
status-im.wallet.accounts.core
status-im.wallet.choose-recipient.core
[status-im.wallet.core :as wallet]
status-im.wallet.custom-tokens.core))
status-im.wallet.custom-tokens.core
[status-im.navigation.core :as navigation.core]
[status-im.multiaccounts.login.core :as login.core]))
(re-frame/reg-fx
:dismiss-keyboard
@ -112,10 +114,35 @@
(fx/defn system-theme-mode-changed
{:events [:system-theme-mode-changed]}
[{:keys [db]} theme]
(let [cur-theme (get-in db [:multiaccount :appearance])]
[{:keys [db] :as cofx} theme]
(let [cur-theme (get-in db [:multiaccount :appearance])
current-tab (get db :current-tab :chat)
view-id (:view-id db)
screen-params (get-in db [:navigation/screen-params view-id])
root-id @navigation.core/root-id]
(navigation.core/dismiss-all-modals)
(when (or (nil? cur-theme) (zero? cur-theme))
{::multiaccounts/switch-theme (if (= :dark theme) 2 1)})))
(fx/merge cofx
{::multiaccounts/switch-theme (if (= :dark theme) 2 1)
:utils/dispatch-later
(cond-> [{:ms 2000 :dispatch
(if (= view-id :chat)
[:chat.ui/navigate-to-chat (:current-chat-id db)]
[:navigate-to view-id screen-params])}]
(some #(= view-id %) navigation.core/community-screens)
(conj {:ms 1000 :dispatch
[:navigate-to :community
(get-in db [:navigation/screen-params :community])]})
(= view-id :community-emoji-thumbnail-picker)
(conj {:ms 1500 :dispatch
[:navigate-to :create-community-channel
(get-in db [:navigation/screen-params :create-community-channel])]}))}
(bottom-sheet/hide-bottom-sheet)
(navigation/init-root root-id)
(when (= root-id :chat-stack)
(navigation/change-tab current-tab))))))
(def authentication-options
{:reason (i18n/label :t/biometric-auth-reason-login)})

View File

@ -1,6 +1,7 @@
(ns status-im.navigation.core
(:require
["react-native" :as rn]
[clojure.set :as clojure.set]
["react-native-gesture-handler" :refer (gestureHandlerRootHOC)]
["react-native-navigation" :refer (Navigation)]
[quo.components.text-input :as quo.text-input]
@ -157,12 +158,14 @@
(.registerComponentDidDisappearListener
(.events Navigation)
(fn [^js evn]
(when-not (#{"popover" "bottom-sheet" "signing-sheet" "visibility-status-popover"}
(.-componentName evn))
(doseq [[_ {:keys [ref value]}] @quo.text-input/text-input-refs]
(.setNativeProps ^js ref (clj->js {:text value})))
(doseq [[^js text-input default-value] @react/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value})))))))
(let [view-id (keyword (.-componentName evn))]
(when-not (#{"popover" "bottom-sheet" "signing-sheet" "visibility-status-popover"}
(.-componentName evn))
(re-frame/dispatch [::view-disappeared view-id])
(doseq [[_ {:keys [ref value]}] @quo.text-input/text-input-refs]
(.setNativeProps ^js ref (clj->js {:text value})))
(doseq [[^js text-input default-value] @react/text-input-refs]
(.setNativeProps text-input (clj->js {:text default-value}))))))))
;; SET ROOT
(re-frame/reg-fx
@ -277,7 +280,10 @@
(.registerBottomTabSelectedListener
(.events Navigation)
(fn [^js evn]
(let [comp (get tab-root-ids (.-selectedTabIndex evn))]
(let [selected-tab-index (.-selectedTabIndex evn)
comp (get tab-root-ids selected-tab-index)
tab-key (get (clojure.set/map-invert tab-key-idx) selected-tab-index)]
(re-frame/dispatch [:set :current-tab tab-key])
(when (and platform/android? (= @root-comp-id comp))
(.popToRoot Navigation (name comp)))
(reset! root-comp-id comp)))))
@ -377,3 +383,27 @@
(log/debug :navigate-replace-fx view-id)
(.pop Navigation (name @root-comp-id))
(navigate view-id)))
(def community-screens '(:community-management
:community-members
:community-requests-to-join
:create-community-channel
:community-emoji-thumbnail-picker
:create-community-category
:community-edit-chats))
;; change view-id if it is still same after component is disappeared
;; https://github.com/wix/react-native-navigation/issues/5744#issuecomment-563226820
(fx/defn view-disappeared
{:events [::view-disappeared]}
[{:keys [db]} view-id]
(when (= view-id (:view-id db))
{:db (assoc db :view-id (cond
(= view-id :community-emoji-thumbnail-picker)
:create-community-channel
(some #(= view-id %) community-screens)
:community
:else
:home))}))

View File

@ -4,11 +4,12 @@
[status-im.ui.screens.chat.styles.photos :as style]
[status-im.profile.db :as profile.db]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.utils.image :as utils.image]))
[status-im.utils.image :as utils.image]
[quo.design-system.colors :as colors]))
(def memo-photo-rend
(memoize
(fn [photo-path size accessibility-label]
(fn [photo-path size accessibility-label _]
(let [identicon? (when photo-path (profile.db/base64-png? photo-path))]
[react/view {:style (style/photo-container size)}
[react/image {:source (utils.image/source photo-path)
@ -18,8 +19,9 @@
(when identicon?
[react/view {:style (style/photo-border size)}])]))))
;; "(colors/dark?)" is passed to memoized function to avoid previous themes cache
(defn photo [photo-path {:keys [size accessibility-label]}]
[memo-photo-rend photo-path size accessibility-label])
[memo-photo-rend photo-path size accessibility-label (colors/dark?)])
;; We optionally pass identicon for perfomance reason, so it does not have to be calculated for each message
(defn member-photo [pub-key identicon]