From 96d6e0f8a29834b3cf8a261e835dd72fd7d8ebb2 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 16 Jan 2021 13:47:07 +0900 Subject: [PATCH] Fix theme saving --- src/client/pages/advanced-theme-editor.vue | 4 +- src/client/pages/theme-editor.vue | 55 +++++++++++++++++----- 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/src/client/pages/advanced-theme-editor.vue b/src/client/pages/advanced-theme-editor.vue index 1f5e260379..8326c5529c 100644 --- a/src/client/pages/advanced-theme-editor.vue +++ b/src/client/pages/advanced-theme-editor.vue @@ -108,6 +108,7 @@ import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } f import { host } from '@/config'; import * as os from '@/os'; import { ColdDeviceStorage } from '@/store'; +import { addTheme } from '@/theme-store'; export default defineComponent({ components: { @@ -212,8 +213,7 @@ export default defineComponent({ save() { const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme); - const themes = ColdDeviceStorage.get('themes').concat(theme); - ColdDeviceStorage.set('themes', themes); + addTheme(theme); os.dialog({ type: 'success', text: this.$t('_theme.installed', { name: theme.name }) diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue index 6cc6b560c1..02e2e39c79 100644 --- a/src/client/pages/theme-editor.vue +++ b/src/client/pages/theme-editor.vue @@ -41,7 +41,7 @@ - {{ $ts.saveAs }} + {{ $ts.saveAs }} @@ -60,6 +60,7 @@ import { Theme, applyTheme, validateTheme } from '@/scripts/theme'; import { host } from '@/config'; import * as os from '@/os'; import { ColdDeviceStorage } from '@/store'; +import { addTheme } from '@/theme-store'; export default defineComponent({ components: { @@ -105,6 +106,7 @@ export default defineComponent({ { color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' }, ], fgColor: null, + changed: false, faPalette, } }, @@ -123,12 +125,39 @@ export default defineComponent({ this.$watch('bgColor', this.apply); this.$watch('accentColor', this.apply); this.$watch('fgColor', this.apply); + + window.addEventListener('beforeunload', this.beforeunload); + }, + + beforeUnmount() { + window.removeEventListener('beforeunload', this.beforeunload); + }, + + async beforeRouteLeave(to, from) { + if (this.changed && !(await this.leaveConfirm())) { + return false; + } }, methods: { - convert() { + beforeunload(e: BeforeUnloadEvent) { + if (this.changed) { + e.preventDefault(); + e.returnValue = ''; + } + }, + + async leaveConfirm(): Promise { + const { canceled } = await os.dialog({ + type: 'warning', + text: this.$ts.leaveConfirm, + showCancelButton: true + }); + return !canceled; + }, + + convert(): Theme { return { - id: '#MY_THEME#', name: this.$ts.myTheme, base: this.bgColor.kind, props: { @@ -145,12 +174,8 @@ export default defineComponent({ if (this.fgColor == null) this.fgColor = this.fgColors[0]; const theme = this.convert(); - applyTheme(theme, true); - - const themes = ColdDeviceStorage.get('themes').filter(t => t.id != '#MY_THEME#').concat(theme); - ColdDeviceStorage.set('themes', themes); - ColdDeviceStorage.set('lightTheme', theme.id); - ColdDeviceStorage.set('darkTheme', theme.id); + applyTheme(theme, false); + this.changed = true; }, async saveAs() { @@ -166,10 +191,14 @@ export default defineComponent({ theme.id = uuid(); theme.name = name; theme.author = `@${this.$i.username}@${toUnicode(host)}`; - const themes = ColdDeviceStorage.get('themes').concat(theme); - ColdDeviceStorage.set('themes', themes); - ColdDeviceStorage.set('lightTheme', theme.id); - ColdDeviceStorage.set('darkTheme', theme.id); + addTheme(theme); + applyTheme(theme); + if (this.$store.state.darkMode) { + ColdDeviceStorage.set('darkTheme', theme.id); + } else { + ColdDeviceStorage.set('lightTheme', theme.id); + } + this.changed = false; os.dialog({ type: 'success', text: this.$t('_theme.installed', { name: theme.name })