mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

Fix theme saving

Browse Source
This commit is contained in:
syuilo 2021-01-16 13:47:07 +09:00
parent a44ad63440
commit 96d6e0f8a2
2 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/pages/advanced-theme-editor.vue
View File

@ -108,6 +108,7 @@ import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } f
import { host } from '@/config'; import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import { addTheme } from '@/theme-store';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -212,8 +213,7 @@ export default defineComponent({
save() { save() {
const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme); const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
const themes = ColdDeviceStorage.get('themes').concat(theme); addTheme(theme);
ColdDeviceStorage.set('themes', themes);
os.dialog({ os.dialog({
type: 'success', type: 'success',
text: this.$t('_theme.installed', { name: theme.name }) text: this.$t('_theme.installed', { name: theme.name })

55
src/client/pages/theme-editor.vue
View File

@ -41,7 +41,7 @@
<MkSample class="preview"/> <MkSample class="preview"/>
</div> </div>
</div> </div>
<FormButton @click="saveAs">{{ $ts.saveAs }}</FormButton> <FormButton @click="saveAs" primary>{{ $ts.saveAs }}</FormButton>
</FormBase> </FormBase>
</template> </template>
@ -60,6 +60,7 @@ import { Theme, applyTheme, validateTheme } from '@/scripts/theme';
import { host } from '@/config'; import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import { addTheme } from '@/theme-store';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -105,6 +106,7 @@ export default defineComponent({
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' }, { color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
], ],
fgColor: null, fgColor: null,
changed: false,
faPalette, faPalette,
} }
}, },
@ -123,12 +125,39 @@ export default defineComponent({
this.$watch('bgColor', this.apply); this.$watch('bgColor', this.apply);
this.$watch('accentColor', this.apply); this.$watch('accentColor', this.apply);
this.$watch('fgColor', 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: { methods: {
convert() { beforeunload(e: BeforeUnloadEvent) {
if (this.changed) {
e.preventDefault();
e.returnValue = '';
}
},
async leaveConfirm(): Promise<boolean> {
const { canceled } = await os.dialog({
type: 'warning',
text: this.$ts.leaveConfirm,
showCancelButton: true
});
return !canceled;
},
convert(): Theme {
return { return {
id: '#MY_THEME#',
name: this.$ts.myTheme, name: this.$ts.myTheme,
base: this.bgColor.kind, base: this.bgColor.kind,
props: { props: {
@ -145,12 +174,8 @@ export default defineComponent({
if (this.fgColor == null) this.fgColor = this.fgColors[0]; if (this.fgColor == null) this.fgColor = this.fgColors[0];
const theme = this.convert(); const theme = this.convert();
applyTheme(theme, true); applyTheme(theme, false);
this.changed = 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);
}, },
async saveAs() { async saveAs() {
@ -166,10 +191,14 @@ export default defineComponent({
theme.id = uuid(); theme.id = uuid();
theme.name = name; theme.name = name;
theme.author = `@${this.$i.username}@${toUnicode(host)}`; theme.author = `@${this.$i.username}@${toUnicode(host)}`;
const themes = ColdDeviceStorage.get('themes').concat(theme); addTheme(theme);
ColdDeviceStorage.set('themes', themes); applyTheme(theme);
ColdDeviceStorage.set('lightTheme', theme.id); if (this.$store.state.darkMode) {
ColdDeviceStorage.set('darkTheme', theme.id); ColdDeviceStorage.set('darkTheme', theme.id);
} else {
ColdDeviceStorage.set('lightTheme', theme.id);
}
this.changed = false;
os.dialog({ os.dialog({
type: 'success', type: 'success',
text: this.$t('_theme.installed', { name: theme.name }) text: this.$t('_theme.installed', { name: theme.name })