limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-25 19:37:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

better navbar editor (port from misskey)

Browse source
This commit is contained in:
moshibar 2023-07-23 15:15:07 -04:00
parent 3f397d850d
commit 77cfb03b1c
2 changed files with 117 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/client/package.json
View file

@ -96,6 +96,7 @@
"vue-draggable-plus": "^0.2.2", "vue-draggable-plus": "^0.2.2",
"vue-isyourpasswordsafe": "^2.0.0", "vue-isyourpasswordsafe": "^2.0.0",
"vue-plyr": "^7.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"
} }
} }

177
packages/client/src/pages/settings/navbar.vue
View file

@ -1,59 +1,71 @@
<template> <template>
<div class="_formRoot"> <div class="_gaps_m">
<FormTextarea v-model="items" tall manual-save class="_formBlock"> <FormSlot>
<template #label>{{ i18n.ts.navbar }}</template> <template #label>{{ i18n.ts.navbar }}</template>
<template #caption <MkContainer :showHeader="false">
><button class="_textButton" @click="addItem"> <Sortable
{{ i18n.ts.addItem }} v-model="items"
</button></template itemKey="id"
> :animation="150"
</FormTextarea> :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" class="_formBlock"> <FormRadios v-model="menuDisplay">
<template #label>{{ i18n.ts.display }}</template> <template #label>{{ i18n.ts.display }}</template>
<option value="sideFull"> <option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
{{ i18n.ts._menuDisplay.sideFull }} <option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
</option> <!--<option value="top">{{ i18n.ts._menuDisplay.top }}</option>-->
<option value="sideIcon"> <!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
{{ 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> </FormRadios>
<FormButton danger class="_formBlock" @click="reset()"
><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
{{ i18n.ts.default }}</FormButton
>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from "vue"; import { computed, defineAsyncComponent, ref, watch } from 'vue';
import FormTextarea from "@/components/form/textarea.vue";
import FormRadios from "@/components/form/radios.vue"; import FormRadios from "@/components/form/radios.vue";
import FormButton from "@/components/MkButton.vue"; import MkButton from '@/components/MkButton.vue';
import * as os from "@/os"; import FormSlot from '@/components/form/slot.vue';
import { navbarItemDef } from "@/navbar"; import MkContainer from '@/components/MkContainer.vue';
import { defaultStore } from "@/store"; import * as os from '@/os';
import { unisonReload } from "@/scripts/unison-reload"; import { navbarItemDef } from '@/navbar';
import { i18n } from "@/i18n"; import { defaultStore } from '@/store';
import { definePageMetadata } from "@/scripts/page-metadata"; 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(() => const items = ref(defaultStore.state.menu.map(x => ({
items.value id: Math.random().toString(),
.trim() type: x,
.split("\n") })));
.filter((x) => x.trim() !== ""),
); const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
async function reloadAsk() { async function reloadAsk() {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: "info", type: 'info',
text: i18n.ts.reloadToApplySetting, text: i18n.ts.reloadToApplySetting,
}); });
if (canceled) return; if (canceled) return;
@ -62,40 +74,38 @@ async function reloadAsk() {
} }
async function addItem() { async function addItem() {
const menu = Object.keys(navbarItemDef).filter( const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
(k) => !defaultStore.state.menu.includes(k),
);
const { canceled, result: item } = await os.select({ const { canceled, result: item } = await os.select({
title: i18n.ts.addItem, title: i18n.ts.addItem,
items: [ items: [...menu.map(k => ({
...menu.map((k) => ({ value: k, text: i18n.ts[navbarItemDef[k].title],
value: k, })), {
text: i18n.ts[navbarItemDef[k].title], value: '-', text: i18n.ts.divider,
})), }],
{
value: "-",
text: i18n.ts.divider,
},
],
}); });
if (canceled) return; 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() { async function save() {
defaultStore.set("menu", split.value); defaultStore.set('menu', items.value.map(x => x.type));
await reloadAsk(); await reloadAsk();
} }
function reset() { function reset() {
defaultStore.reset("menu"); items.value = defaultStore.def.menu.default.map(x => ({
items.value = defaultStore.state.menu.join("\n"); id: Math.random().toString(),
type: x,
}));
} }
watch(items, async () => {
await save();
});
watch(menuDisplay, async () => { watch(menuDisplay, async () => {
await reloadAsk(); await reloadAsk();
}); });
@ -106,6 +116,47 @@ const headerTabs = $computed(() => []);
definePageMetadata({ definePageMetadata({
title: i18n.ts.navbar, title: i18n.ts.navbar,
icon: "ph-list-bullets ph-bold ph-lg", icon: 'ti ti-list',
}); });
</script> </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>