Classic UI
This commit is contained in:
@@ -26,7 +26,7 @@
|
||||
<template #label>{{ $ts.clientSettings }}</template>
|
||||
<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink>
|
||||
<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink>
|
||||
<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.sidebar }}</FormLink>
|
||||
<FormLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</FormLink>
|
||||
<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink>
|
||||
<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink>
|
||||
</FormGroup>
|
||||
@@ -121,7 +121,7 @@ export default defineComponent({
|
||||
case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
|
||||
case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
|
||||
case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
|
||||
case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue'));
|
||||
case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
|
||||
case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
|
||||
case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
|
||||
case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
|
||||
|
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<FormBase>
|
||||
<FormTextarea v-model:value="items" tall>
|
||||
<span>{{ $ts.sidebar }}</span>
|
||||
<FormTextarea v-model:value="items" tall manual-save>
|
||||
<span>{{ $ts.menu }}</span>
|
||||
<template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template>
|
||||
</FormTextarea>
|
||||
|
||||
<FormRadios v-model="sidebarDisplay">
|
||||
<FormRadios v-model="menuDisplay">
|
||||
<template #desc>{{ $ts.display }}</template>
|
||||
<option value="full">{{ $ts._sidebar.full }}</option>
|
||||
<option value="icon">{{ $ts._sidebar.icon }}</option>
|
||||
<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $ts._sidebar.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
|
||||
<option value="sideFull">{{ $ts._menuDisplay.sideFull }}</option>
|
||||
<option value="sideIcon">{{ $ts._menuDisplay.sideIcon }}</option>
|
||||
<option value="top">{{ $ts._menuDisplay.top }}</option>
|
||||
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ $ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
|
||||
</FormRadios>
|
||||
|
||||
<FormButton @click="save()" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
|
||||
<FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
|
||||
</FormBase>
|
||||
</template>
|
||||
@@ -26,7 +26,7 @@ import FormBase from '@client/components/form/base.vue';
|
||||
import FormGroup from '@client/components/form/group.vue';
|
||||
import FormButton from '@client/components/form/button.vue';
|
||||
import * as os from '@client/os';
|
||||
import { sidebarDef } from '@client/sidebar';
|
||||
import { menuDef } from '@client/menu';
|
||||
import { defaultStore } from '@client/store';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { unisonReload } from '@client/scripts/unison-reload';
|
||||
@@ -44,11 +44,11 @@ export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.sidebar,
|
||||
title: this.$ts.menu,
|
||||
icon: 'fas fa-list-ul'
|
||||
},
|
||||
menuDef: sidebarDef,
|
||||
items: '',
|
||||
menuDef: menuDef,
|
||||
items: defaultStore.state.menu.join('\n'),
|
||||
}
|
||||
},
|
||||
|
||||
@@ -57,11 +57,17 @@ export default defineComponent({
|
||||
return this.items.trim().split('\n').filter(x => x.trim() !== '');
|
||||
},
|
||||
|
||||
sidebarDisplay: defaultStore.makeGetterSetter('sidebarDisplay')
|
||||
menuDisplay: defaultStore.makeGetterSetter('menuDisplay')
|
||||
},
|
||||
|
||||
created() {
|
||||
this.items = this.$store.state.menu.join('\n');
|
||||
watch: {
|
||||
menuDisplay() {
|
||||
this.reloadAsk();
|
||||
},
|
||||
|
||||
items() {
|
||||
this.save();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
@@ -85,7 +91,6 @@ export default defineComponent({
|
||||
});
|
||||
if (canceled) return;
|
||||
this.items = [...this.splited, item].join('\n');
|
||||
this.save();
|
||||
},
|
||||
|
||||
save() {
|
||||
@@ -96,7 +101,6 @@ export default defineComponent({
|
||||
reset() {
|
||||
this.$store.reset('menu');
|
||||
this.items = this.$store.state.menu.join('\n');
|
||||
this.reloadAsk();
|
||||
},
|
||||
|
||||
async reloadAsk() {
|
Reference in New Issue
Block a user