diff options
Diffstat (limited to 'src/stores/UIStore.ts')
-rw-r--r-- | src/stores/UIStore.ts | 138 |
1 files changed, 0 insertions, 138 deletions
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts deleted file mode 100644 index 6a9597006..000000000 --- a/src/stores/UIStore.ts +++ /dev/null | |||
@@ -1,138 +0,0 @@ | |||
1 | import { action, observable, computed, reaction } from 'mobx'; | ||
2 | import { nativeTheme, systemPreferences } from '@electron/remote'; | ||
3 | |||
4 | import { theme, ThemeType } from '../themes'; | ||
5 | import Store from './lib/Store'; | ||
6 | import { isMac, isWindows } from '../environment'; | ||
7 | |||
8 | export default class UIStore extends Store { | ||
9 | actions: any; | ||
10 | |||
11 | stores: any; | ||
12 | |||
13 | @observable showServicesUpdatedInfoBar = false; | ||
14 | |||
15 | @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; | ||
16 | |||
17 | constructor(...args) { | ||
18 | super(...args); | ||
19 | |||
20 | // Register action handlers | ||
21 | this.actions.ui.openSettings.listen(this._openSettings.bind(this)); | ||
22 | this.actions.ui.closeSettings.listen(this._closeSettings.bind(this)); | ||
23 | this.actions.ui.toggleServiceUpdatedInfoBar.listen( | ||
24 | this._toggleServiceUpdatedInfoBar.bind(this), | ||
25 | ); | ||
26 | |||
27 | // Listen for theme change on MacOS | ||
28 | if (isMac) { | ||
29 | systemPreferences.subscribeNotification( | ||
30 | 'AppleInterfaceThemeChangedNotification', | ||
31 | () => { | ||
32 | this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; | ||
33 | this.actions.service.shareSettingsWithServiceProcess(); | ||
34 | }, | ||
35 | ); | ||
36 | } | ||
37 | |||
38 | if (isWindows) { | ||
39 | nativeTheme.on('updated', () => { | ||
40 | this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; | ||
41 | this.actions.service.shareSettingsWithServiceProcess(); | ||
42 | }); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | setup() { | ||
47 | reaction( | ||
48 | () => this.isDarkThemeActive, | ||
49 | () => { | ||
50 | this._setupThemeInDOM(); | ||
51 | }, | ||
52 | { fireImmediately: true }, | ||
53 | ); | ||
54 | reaction( | ||
55 | () => this.isSplitModeActive, | ||
56 | () => { | ||
57 | this._setupModeInDOM(); | ||
58 | }, | ||
59 | { fireImmediately: true }, | ||
60 | ); | ||
61 | } | ||
62 | |||
63 | @computed get showMessageBadgesEvenWhenMuted() { | ||
64 | const settings = this.stores.settings.all; | ||
65 | |||
66 | return ( | ||
67 | (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || | ||
68 | !settings.app.isAppMuted | ||
69 | ); | ||
70 | } | ||
71 | |||
72 | @computed get isDarkThemeActive() { | ||
73 | const isWithAdaptableInDarkMode = | ||
74 | this.stores.settings.all.app.adaptableDarkMode && | ||
75 | this.isOsDarkThemeActive; | ||
76 | const isWithoutAdaptableInDarkMode = | ||
77 | this.stores.settings.all.app.darkMode && | ||
78 | !this.stores.settings.all.app.adaptableDarkMode; | ||
79 | const isInDarkMode = this.stores.settings.all.app.darkMode; | ||
80 | return !!( | ||
81 | isWithAdaptableInDarkMode || | ||
82 | isWithoutAdaptableInDarkMode || | ||
83 | isInDarkMode | ||
84 | ); | ||
85 | } | ||
86 | |||
87 | @computed get isSplitModeActive() { | ||
88 | return this.stores.settings.app.splitMode; | ||
89 | } | ||
90 | |||
91 | @computed get theme() { | ||
92 | const themeId = | ||
93 | this.isDarkThemeActive || this.stores.settings.app.darkMode | ||
94 | ? ThemeType.dark | ||
95 | : ThemeType.default; | ||
96 | const { accentColor } = this.stores.settings.app; | ||
97 | return theme(themeId, accentColor); | ||
98 | } | ||
99 | |||
100 | // Actions | ||
101 | @action _openSettings({ path = '/settings' }) { | ||
102 | const settingsPath = path !== '/settings' ? `/settings/${path}` : path; | ||
103 | this.stores.router.push(settingsPath); | ||
104 | } | ||
105 | |||
106 | @action _closeSettings() { | ||
107 | this.stores.router.push('/'); | ||
108 | } | ||
109 | |||
110 | @action _toggleServiceUpdatedInfoBar({ visible }) { | ||
111 | let visibility = visible; | ||
112 | if (visibility === null) { | ||
113 | visibility = !this.showServicesUpdatedInfoBar; | ||
114 | } | ||
115 | this.showServicesUpdatedInfoBar = visibility; | ||
116 | } | ||
117 | |||
118 | // Reactions | ||
119 | _setupThemeInDOM() { | ||
120 | const body = document.querySelector('body'); | ||
121 | |||
122 | if (!this.isDarkThemeActive) { | ||
123 | body?.classList.remove('theme__dark'); | ||
124 | } else { | ||
125 | body?.classList.add('theme__dark'); | ||
126 | } | ||
127 | } | ||
128 | |||
129 | _setupModeInDOM() { | ||
130 | const body = document.querySelector('body'); | ||
131 | |||
132 | if (!this.isSplitModeActive) { | ||
133 | body?.classList.remove('mode__split'); | ||
134 | } else { | ||
135 | body?.classList.add('mode__split'); | ||
136 | } | ||
137 | } | ||
138 | } | ||