mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-22 01:47:39 -07:00
better navbar editor (port from misskey)
This commit is contained in:
moshibar
parent
3f397d850d
commit
77cfb03b1c
2 changed files with 117 additions and 65 deletions
|
|
@ -96,6 +96,7 @@
|
|||
"vue-draggable-plus": "^0.2.2",
|
||||
"vue-isyourpasswordsafe": "^2.0.0",
|
||||
"vue-plyr": "^7.0.0",
|
||||
"vue-prism-editor": "2.0.0-alpha.2"
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vuedraggable": "next"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,71 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<FormTextarea v-model="items" tall manual-save class="_formBlock">
|
||||
<div class="_gaps_m">
|
||||
<FormSlot>
|
||||
<template #label>{{ i18n.ts.navbar }}</template>
|
||||
<template #caption
|
||||
><button class="_textButton" @click="addItem">
|
||||
{{ i18n.ts.addItem }}
|
||||
</button></template
|
||||
>
|
||||
</FormTextarea>
|
||||
|
||||
<FormRadios v-model="menuDisplay" class="_formBlock">
|
||||
<MkContainer :showHeader="false">
|
||||
<Sortable
|
||||
v-model="items"
|
||||
itemKey="id"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.itemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div
|
||||
v-if="element.type === '-' || navbarItemDef[element.type]"
|
||||
:class="$style.item"
|
||||
>
|
||||
<button class="_button" :class="$style.itemHandle"><i class="ph-list ph-bold ph-lg"></i></button>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ i18n.ts[navbarItemDef[element.type]?.title] ?? i18n.ts.divider }}</span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ph-x ph-bold ph-lg"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
</MkContainer>
|
||||
</FormSlot>
|
||||
<div class="buttons">
|
||||
<MkButton inline @click="addItem"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.addItem }}</MkButton>
|
||||
<MkButton inline danger @click="reset"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</MkButton>
|
||||
<MkButton inline primary class="save" @click="save"><i class="ph-floppy-disk ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
|
||||
<FormRadios v-model="menuDisplay">
|
||||
<template #label>{{ i18n.ts.display }}</template>
|
||||
<option value="sideFull">
|
||||
{{ i18n.ts._menuDisplay.sideFull }}
|
||||
</option>
|
||||
<option value="sideIcon">
|
||||
{{ i18n.ts._menuDisplay.sideIcon }}
|
||||
</option>
|
||||
<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
|
||||
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
|
||||
<!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
|
||||
<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
|
||||
<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
|
||||
<!--<option value="top">{{ i18n.ts._menuDisplay.top }}</option>-->
|
||||
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
|
||||
</FormRadios>
|
||||
|
||||
<FormButton danger class="_formBlock" @click="reset()"
|
||||
><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.default }}</FormButton
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import FormTextarea from "@/components/form/textarea.vue";
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
import FormRadios from "@/components/form/radios.vue";
|
||||
import FormButton from "@/components/MkButton.vue";
|
||||
import * as os from "@/os";
|
||||
import { navbarItemDef } from "@/navbar";
|
||||
import { defaultStore } from "@/store";
|
||||
import { unisonReload } from "@/scripts/unison-reload";
|
||||
import { i18n } from "@/i18n";
|
||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import FormSlot from '@/components/form/slot.vue';
|
||||
import MkContainer from '@/components/MkContainer.vue';
|
||||
import * as os from '@/os';
|
||||
import { navbarItemDef } from '@/navbar';
|
||||
import { defaultStore } from '@/store';
|
||||
import { unisonReload } from '@/scripts/unison-reload';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
|
||||
const items = ref(defaultStore.state.menu.join("\n"));
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const split = computed(() =>
|
||||
items.value
|
||||
.trim()
|
||||
.split("\n")
|
||||
.filter((x) => x.trim() !== ""),
|
||||
);
|
||||
const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
|
||||
const items = ref(defaultStore.state.menu.map(x => ({
|
||||
id: Math.random().toString(),
|
||||
type: x,
|
||||
})));
|
||||
|
||||
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
|
||||
|
||||
async function reloadAsk() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: "info",
|
||||
type: 'info',
|
||||
text: i18n.ts.reloadToApplySetting,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
|
@ -62,40 +74,38 @@ async function reloadAsk() {
|
|||
}
|
||||
|
||||
async function addItem() {
|
||||
const menu = Object.keys(navbarItemDef).filter(
|
||||
(k) => !defaultStore.state.menu.includes(k),
|
||||
);
|
||||
const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
|
||||
const { canceled, result: item } = await os.select({
|
||||
title: i18n.ts.addItem,
|
||||
items: [
|
||||
...menu.map((k) => ({
|
||||
value: k,
|
||||
text: i18n.ts[navbarItemDef[k].title],
|
||||
})),
|
||||
{
|
||||
value: "-",
|
||||
text: i18n.ts.divider,
|
||||
},
|
||||
],
|
||||
items: [...menu.map(k => ({
|
||||
value: k, text: i18n.ts[navbarItemDef[k].title],
|
||||
})), {
|
||||
value: '-', text: i18n.ts.divider,
|
||||
}],
|
||||
});
|
||||
if (canceled) return;
|
||||
items.value = [...split.value, item].join("\n");
|
||||
items.value = [...items.value, {
|
||||
id: Math.random().toString(),
|
||||
type: item,
|
||||
}];
|
||||
}
|
||||
|
||||
function removeItem(index: number) {
|
||||
items.value.splice(index, 1);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
defaultStore.set("menu", split.value);
|
||||
defaultStore.set('menu', items.value.map(x => x.type));
|
||||
await reloadAsk();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
defaultStore.reset("menu");
|
||||
items.value = defaultStore.state.menu.join("\n");
|
||||
items.value = defaultStore.def.menu.default.map(x => ({
|
||||
id: Math.random().toString(),
|
||||
type: x,
|
||||
}));
|
||||
}
|
||||
|
||||
watch(items, async () => {
|
||||
await save();
|
||||
});
|
||||
|
||||
watch(menuDisplay, async () => {
|
||||
await reloadAsk();
|
||||
});
|
||||
|
|
@ -106,6 +116,47 @@ const headerTabs = $computed(() => []);
|
|||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.navbar,
|
||||
icon: "ph-list-bullets ph-bold ph-lg",
|
||||
icon: 'ti ti-list',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.item {
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: var(--navFg);
|
||||
}
|
||||
|
||||
.itemIcon {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.itemText {
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.itemRemove {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #ff2a2a;
|
||||
right: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.itemHandle {
|
||||
cursor: move;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue