diff options
Diffstat (limited to 'src/stores')
-rw-r--r-- | src/stores/UIStore.js | 30 | ||||
-rw-r--r-- | src/stores/lib/Reaction.js | 6 |
2 files changed, 30 insertions, 6 deletions
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js index a95a8e1e0..9680c5bcc 100644 --- a/src/stores/UIStore.js +++ b/src/stores/UIStore.js | |||
@@ -1,4 +1,9 @@ | |||
1 | import { action, observable, computed } from 'mobx'; | 1 | import { |
2 | action, | ||
3 | observable, | ||
4 | computed, | ||
5 | reaction, | ||
6 | } from 'mobx'; | ||
2 | import { theme } from '@meetfranz/theme'; | 7 | import { theme } from '@meetfranz/theme'; |
3 | 8 | ||
4 | import Store from './lib/Store'; | 9 | import Store from './lib/Store'; |
@@ -15,10 +20,18 @@ export default class UIStore extends Store { | |||
15 | this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this)); | 20 | this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this)); |
16 | } | 21 | } |
17 | 22 | ||
23 | setup() { | ||
24 | reaction( | ||
25 | () => this.isDarkThemeActive, | ||
26 | () => this._setupThemeInDOM(), | ||
27 | { fireImmediately: true }, | ||
28 | ); | ||
29 | } | ||
30 | |||
18 | @computed get showMessageBadgesEvenWhenMuted() { | 31 | @computed get showMessageBadgesEvenWhenMuted() { |
19 | const settings = this.stores.settings.all; | 32 | const settings = this.stores.settings.all; |
20 | 33 | ||
21 | return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted; | 34 | return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted; |
22 | } | 35 | } |
23 | 36 | ||
24 | @computed get isDarkThemeActive() { | 37 | @computed get isDarkThemeActive() { |
@@ -26,7 +39,7 @@ export default class UIStore extends Store { | |||
26 | } | 39 | } |
27 | 40 | ||
28 | @computed get theme() { | 41 | @computed get theme() { |
29 | if (this.isDarkThemeActive) return theme('dark'); | 42 | if (this.isDarkThemeActive || this.stores.settings.app.darkMode) return theme('dark'); |
30 | return theme('default'); | 43 | return theme('default'); |
31 | } | 44 | } |
32 | 45 | ||
@@ -47,4 +60,15 @@ export default class UIStore extends Store { | |||
47 | } | 60 | } |
48 | this.showServicesUpdatedInfoBar = visibility; | 61 | this.showServicesUpdatedInfoBar = visibility; |
49 | } | 62 | } |
63 | |||
64 | // Reactions | ||
65 | _setupThemeInDOM() { | ||
66 | const body = document.querySelector('body'); | ||
67 | |||
68 | if (!this.isDarkThemeActive) { | ||
69 | body.classList.remove('theme__dark'); | ||
70 | } else { | ||
71 | body.classList.add('theme__dark'); | ||
72 | } | ||
73 | } | ||
50 | } | 74 | } |
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.js index f2642908f..f8009b7f6 100644 --- a/src/stores/lib/Reaction.js +++ b/src/stores/lib/Reaction.js | |||
@@ -13,15 +13,15 @@ export default class Reaction { | |||
13 | 13 | ||
14 | start() { | 14 | start() { |
15 | if (!this.isRunning) { | 15 | if (!this.isRunning) { |
16 | this.dispose = autorun(() => this.reaction()); | 16 | this.dispose = autorun(this.reaction); |
17 | this.isActive = true; | 17 | this.isRunning = true; |
18 | } | 18 | } |
19 | } | 19 | } |
20 | 20 | ||
21 | stop() { | 21 | stop() { |
22 | if (this.isRunning) { | 22 | if (this.isRunning) { |
23 | this.dispose(); | 23 | this.dispose(); |
24 | this.isActive = false; | 24 | this.isRunning = false; |
25 | } | 25 | } |
26 | } | 26 | } |
27 | } | 27 | } |