diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-09-14 10:34:04 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-14 10:34:04 +0200 |
commit | 979ec02c9a1019152be08705986337e470eabb57 (patch) | |
tree | 6021179ad8649112717a499780f475275af487f2 /src/stores | |
parent | refactor: defensive programming to avoid javascript error for unread badges (diff) | |
download | ferdium-app-979ec02c9a1019152be08705986337e470eabb57.tar.gz ferdium-app-979ec02c9a1019152be08705986337e470eabb57.tar.zst ferdium-app-979ec02c9a1019152be08705986337e470eabb57.zip |
chore: codebase improvements (#1930)
Diffstat (limited to 'src/stores')
-rw-r--r-- | src/stores/UIStore.ts (renamed from src/stores/UIStore.js) | 45 |
1 files changed, 26 insertions, 19 deletions
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.ts index be675d5ed..ec48eeb40 100644 --- a/src/stores/UIStore.js +++ b/src/stores/UIStore.ts | |||
@@ -1,13 +1,15 @@ | |||
1 | import { | 1 | import { action, observable, computed, reaction } from 'mobx'; |
2 | action, observable, computed, reaction, | 2 | import { theme, ThemeType } from '@meetfranz/theme'; |
3 | } from 'mobx'; | ||
4 | import { theme } from '@meetfranz/theme'; | ||
5 | import { nativeTheme, systemPreferences } from '@electron/remote'; | 3 | import { nativeTheme, systemPreferences } from '@electron/remote'; |
6 | 4 | ||
7 | import Store from './lib/Store'; | 5 | import Store from './lib/Store'; |
8 | import { isMac, isWindows } from '../environment'; | 6 | import { isMac, isWindows } from '../environment'; |
9 | 7 | ||
10 | export default class UIStore extends Store { | 8 | export default class UIStore extends Store { |
9 | actions: any; | ||
10 | |||
11 | stores: any; | ||
12 | |||
11 | @observable showServicesUpdatedInfoBar = false; | 13 | @observable showServicesUpdatedInfoBar = false; |
12 | 14 | ||
13 | @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; | 15 | @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; |
@@ -43,9 +45,7 @@ export default class UIStore extends Store { | |||
43 | 45 | ||
44 | setup() { | 46 | setup() { |
45 | reaction( | 47 | reaction( |
46 | () => ( | 48 | () => this.isDarkThemeActive, |
47 | this.isDarkThemeActive | ||
48 | ), | ||
49 | () => { | 49 | () => { |
50 | this._setupThemeInDOM(); | 50 | this._setupThemeInDOM(); |
51 | }, | 51 | }, |
@@ -57,24 +57,31 @@ export default class UIStore extends Store { | |||
57 | const settings = this.stores.settings.all; | 57 | const settings = this.stores.settings.all; |
58 | 58 | ||
59 | return ( | 59 | return ( |
60 | (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) | 60 | (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || |
61 | || !settings.app.isAppMuted | 61 | !settings.app.isAppMuted |
62 | ); | 62 | ); |
63 | } | 63 | } |
64 | 64 | ||
65 | @computed get isDarkThemeActive() { | 65 | @computed get isDarkThemeActive() { |
66 | const isWithAdaptableInDarkMode = this.stores.settings.all.app.adaptableDarkMode | 66 | const isWithAdaptableInDarkMode = |
67 | && this.isOsDarkThemeActive; | 67 | this.stores.settings.all.app.adaptableDarkMode && |
68 | const isWithoutAdaptableInDarkMode = this.stores.settings.all.app.darkMode | 68 | this.isOsDarkThemeActive; |
69 | && !this.stores.settings.all.app.adaptableDarkMode; | 69 | const isWithoutAdaptableInDarkMode = |
70 | this.stores.settings.all.app.darkMode && | ||
71 | !this.stores.settings.all.app.adaptableDarkMode; | ||
70 | const isInDarkMode = this.stores.settings.all.app.darkMode; | 72 | const isInDarkMode = this.stores.settings.all.app.darkMode; |
71 | return !!(isWithAdaptableInDarkMode | 73 | return !!( |
72 | || isWithoutAdaptableInDarkMode | 74 | isWithAdaptableInDarkMode || |
73 | || isInDarkMode); | 75 | isWithoutAdaptableInDarkMode || |
76 | isInDarkMode | ||
77 | ); | ||
74 | } | 78 | } |
75 | 79 | ||
76 | @computed get theme() { | 80 | @computed get theme() { |
77 | const themeId = (this.isDarkThemeActive || this.stores.settings.app.darkMode) ? 'dark' : 'default'; | 81 | const themeId = |
82 | this.isDarkThemeActive || this.stores.settings.app.darkMode | ||
83 | ? ThemeType.dark | ||
84 | : ThemeType.default; | ||
78 | const { accentColor } = this.stores.settings.app; | 85 | const { accentColor } = this.stores.settings.app; |
79 | return theme(themeId, accentColor); | 86 | return theme(themeId, accentColor); |
80 | } | 87 | } |
@@ -102,9 +109,9 @@ export default class UIStore extends Store { | |||
102 | const body = document.querySelector('body'); | 109 | const body = document.querySelector('body'); |
103 | 110 | ||
104 | if (!this.isDarkThemeActive) { | 111 | if (!this.isDarkThemeActive) { |
105 | body.classList.remove('theme__dark'); | 112 | body?.classList.remove('theme__dark'); |
106 | } else { | 113 | } else { |
107 | body.classList.add('theme__dark'); | 114 | body?.classList.add('theme__dark'); |
108 | } | 115 | } |
109 | } | 116 | } |
110 | } | 117 | } |