From 815c348948ac2502c51a98ebff00080354bf8689 Mon Sep 17 00:00:00 2001 From: vallode <18506096+vallode@users.noreply.github.com> Date: Sat, 5 Mar 2022 09:09:32 +0100 Subject: [PATCH] Sync theme between windows (#2090) * Sync expandSideBar across tabs * Sync baseTheme, mainColor, secColor between windows * Fix lint errors * Fix lint errors: electric boogaloo --- src/renderer/App.js | 55 +++++++------- .../theme-settings/theme-settings.js | 75 ++++++------------- .../theme-settings/theme-settings.vue | 6 +- src/renderer/components/top-nav/top-nav.js | 13 +++- src/renderer/store/modules/settings.js | 5 +- 5 files changed, 70 insertions(+), 84 deletions(-) diff --git a/src/renderer/App.js b/src/renderer/App.js index c8937f4a..d3cd78c9 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -101,6 +101,18 @@ export default Vue.extend({ return this.$store.getters.getDefaultInvidiousInstance }, + baseTheme: function () { + return this.$store.getters.getBaseTheme + }, + + mainColor: function () { + return this.$store.getters.getMainColor + }, + + secColor: function () { + return this.$store.getters.getSecColor + }, + externalLinkOpeningPromptNames: function () { return [ this.$t('Yes'), @@ -114,6 +126,13 @@ export default Vue.extend({ }, watch: { windowTitle: 'setWindowTitle', + + baseTheme: 'checkThemeSettings', + + mainColor: 'checkThemeSettings', + + secColor: 'checkThemeSettings', + $route () { // react to route changes... // Hide top nav filter panel on page change @@ -160,39 +179,22 @@ export default Vue.extend({ }, methods: { checkThemeSettings: function () { - let baseTheme = localStorage.getItem('baseTheme') - let mainColor = localStorage.getItem('mainColor') - let secColor = localStorage.getItem('secColor') - - if (baseTheme === null) { - baseTheme = 'dark' - } - - if (mainColor === null) { - mainColor = 'mainRed' - } - - if (secColor === null) { - secColor = 'secBlue' - } - const theme = { - baseTheme: baseTheme, - mainColor: mainColor, - secColor: secColor + baseTheme: this.baseTheme || 'dark', + mainColor: this.mainColor || 'mainRed', + secColor: this.secColor || 'secBlue' } this.updateTheme(theme) }, updateTheme: function (theme) { - console.log(theme) - const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}` + console.group('updateTheme') + console.log('Theme: ', theme) + const className = `${theme.baseTheme} main${theme.mainColor} sec${theme.secColor}` const body = document.getElementsByTagName('body')[0] body.className = className - localStorage.setItem('baseTheme', theme.baseTheme) - localStorage.setItem('mainColor', theme.mainColor) - localStorage.setItem('secColor', theme.secColor) + console.groupEnd() }, checkForNewUpdates: function () { @@ -473,7 +475,10 @@ export default Vue.extend({ 'getExternalPlayerCmdArgumentsData', 'fetchInvidiousInstances', 'setRandomCurrentInvidiousInstance', - 'setupListenersToSyncWindows' + 'setupListenersToSyncWindows', + 'updateBaseTheme', + 'updateMainColor', + 'updateSecColor' ]) } }) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index b38e95a0..4c3a60a1 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -19,10 +19,6 @@ export default Vue.extend({ }, data: function () { return { - currentBaseTheme: '', - currentMainColor: '', - currentSecColor: '', - expandSideBar: false, minUiScale: 50, maxUiScale: 300, uiScaleStep: 5, @@ -70,6 +66,18 @@ export default Vue.extend({ return this.$store.getters.getBarColor }, + baseTheme: function () { + return this.$store.getters.getBaseTheme + }, + + mainColor: function () { + return this.$store.getters.getMainColor + }, + + secColor: function () { + return this.$store.getters.getSecColor + }, + isSideNavOpen: function () { return this.$store.getters.getIsSideNavOpen }, @@ -81,9 +89,15 @@ export default Vue.extend({ disableSmoothScrolling: function () { return this.$store.getters.getDisableSmoothScrolling }, + + expandSideBar: function () { + return this.$store.getters.getExpandSideBar + }, + hideLabelsSideBar: function () { return this.$store.getters.getHideLabelsSideBar }, + restartPromptMessage: function () { return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]') }, @@ -133,34 +147,15 @@ export default Vue.extend({ } }, mounted: function () { - this.currentBaseTheme = localStorage.getItem('baseTheme') - this.currentMainColor = localStorage.getItem('mainColor').replace('main', '') - this.currentSecColor = localStorage.getItem('secColor').replace('sec', '') - this.expandSideBar = localStorage.getItem('expandSideBar') === 'true' this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling }, methods: { - updateBaseTheme: function (theme) { - const mainColor = `main${this.currentMainColor}` - const secColor = `sec${this.currentSecColor}` - - const payload = { - baseTheme: theme, - mainColor: mainColor, - secColor: secColor - } - - this.$parent.$parent.updateTheme(payload) - this.currentBaseTheme = theme - }, - handleExpandSideBar: function (value) { if (this.isSideNavOpen !== value) { this.$store.commit('toggleSideNav') } - this.expandSideBar = value - localStorage.setItem('expandSideBar', value) + this.updateExpandSideBar(value) }, handleRestartPrompt: function (value) { @@ -186,36 +181,12 @@ export default Vue.extend({ }) }, - updateMainColor: function (color) { - const mainColor = `main${color}` - const secColor = `sec${this.currentSecColor}` - - const payload = { - baseTheme: this.currentBaseTheme, - mainColor: mainColor, - secColor: secColor - } - - this.$parent.$parent.updateTheme(payload) - this.currentMainColor = color - }, - - updateSecColor: function (color) { - const mainColor = `main${this.currentMainColor}` - const secColor = `sec${color}` - - const payload = { - baseTheme: this.currentBaseTheme, - mainColor: mainColor, - secColor: secColor - } - - this.$parent.$parent.updateTheme(payload) - this.currentSecColor = color - }, - ...mapActions([ 'updateBarColor', + 'updateBaseTheme', + 'updateMainColor', + 'updateSecColor', + 'updateExpandSideBar', 'updateUiScale', 'updateDisableSmoothScrolling', 'updateHideLabelsSideBar' diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue index 2b5082fb..f8d1522f 100644 --- a/src/renderer/components/theme-settings/theme-settings.vue +++ b/src/renderer/components/theme-settings/theme-settings.vue @@ -43,21 +43,21 @@ { + if (this.expandSideBar) { + this.toggleSideNav() + } + }, 0) window.addEventListener('resize', function (event) { const width = event.srcElement.innerWidth diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index ddb19316..3b62b5e9 100644 --- a/src/renderer/store/modules/settings.js +++ b/src/renderer/store/modules/settings.js @@ -167,7 +167,9 @@ const state = { barColor: false, checkForBlogPosts: true, checkForUpdates: true, - // currentTheme: 'lightRed', + baseTheme: 'dark', + mainColor: 'Red', + secColor: 'Blue', defaultCaptionSettings: '{}', defaultInterval: 5, defaultPlayback: 1, @@ -185,6 +187,7 @@ const state = { externalPlayerExecutable: '', externalPlayerIgnoreWarnings: false, externalPlayerCustomArgs: '', + expandSideBar: false, forceLocalBackendForLegacy: false, hideActiveSubscriptions: false, hideChannelSubscriptions: false,