graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 05:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Resolve #6193

Browse source
This commit is contained in:
syuilo 2020-03-28 15:57:31 +09:00
parent 62f5ecd278
commit 3e1e234799
1 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/client/pages/preferences/theme.vue
View file

@ -57,7 +57,8 @@
<mk-textarea v-model="installThemeCode"> <mk-textarea v-model="installThemeCode">
<span>{{ $t('_theme.code') }}</span> <span>{{ $t('_theme.code') }}</span>
</mk-textarea> </mk-textarea>
<mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null"><fa :icon="faCheck"/> {{ $t('install') }}</mk-button> <mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
<mk-button @click="() => preview(this.installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
</details> </details>
</div> </div>
<div class="_content"> <div class="_content">
@ -79,7 +80,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
import * as JSON5 from 'json5'; import * as JSON5 from 'json5';
import MkInput from '../../components/ui/input.vue'; import MkInput from '../../components/ui/input.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
@ -108,7 +109,7 @@ export default Vue.extend({
installThemeCode: null, installThemeCode: null,
selectedThemeId: null, selectedThemeId: null,
wallpaper: localStorage.getItem('wallpaper'), wallpaper: localStorage.getItem('wallpaper'),
faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
} }
}, },
@ -196,8 +197,9 @@ export default Vue.extend({
}); });
}, },
install(code) { parseThemeCode(code) {
let theme; let theme;
try { try {
theme = JSON5.parse(code); theme = JSON5.parse(code);
} catch (e) { } catch (e) {
@ -205,22 +207,34 @@ export default Vue.extend({
type: 'error', type: 'error',
text: this.$t('_theme.invalid') text: this.$t('_theme.invalid')
}); });
return; return false;
} }
if (!validateTheme(theme)) { if (!validateTheme(theme)) {
this.$root.dialog({ this.$root.dialog({
type: 'error', type: 'error',
text: this.$t('_theme.invalid') text: this.$t('_theme.invalid')
}); });
return; return false;
} }
if (this.$store.state.device.themes.some(t => t.id === theme.id)) { if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
this.$root.dialog({ this.$root.dialog({
type: 'info', type: 'info',
text: this.$t('_theme.alreadyInstalled') text: this.$t('_theme.alreadyInstalled')
}); });
return; return false;
} }
return theme;
},
preview(code) {
const theme = this.parseThemeCode(code);
if (theme) applyTheme(theme, false);
},
install(code) {
const theme = this.parseThemeCode(code);
if (!theme) return;
const themes = this.$store.state.device.themes.concat(theme); const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', { this.$store.commit('device/set', {
key: 'themes', value: themes key: 'themes', value: themes