feat: draggable navbar items in settings

Co-authored-by: Syuilo <syuilotan@yahoo.co.jp>
Co-authored-by: moshibar <moshibar@mailo.com>
This commit is contained in:
Kainoa Kanter 2023-07-26 01:15:20 +00:00
parent a8be362b20
commit df3d8a91b9
2 changed files with 89 additions and 30 deletions

View file

@ -5,10 +5,6 @@ import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { ui } from "@/config"; import { ui } from "@/config";
import { unisonReload } from "@/scripts/unison-reload"; import { unisonReload } from "@/scripts/unison-reload";
import { defaultStore } from "@/store";
import { instance } from "@/instance";
import { host } from "@/config";
import XTutorial from "@/components/MkTutorialDialog.vue";
export const navbarItemDef = reactive({ export const navbarItemDef = reactive({
notifications: { notifications: {
@ -60,14 +56,6 @@ export const navbarItemDef = reactive({
show: computed(() => $i != null), show: computed(() => $i != null),
to: "/my/lists", to: "/my/lists",
}, },
/*
groups: {
title: 'groups',
icon: 'ph-users-three ph-bold ph-lg',
show: computed(() => $i != null),
to: '/my/groups',
},
*/
antennas: { antennas: {
title: "antennas", title: "antennas",
icon: "ph-flying-saucer ph-bold ph-lg", icon: "ph-flying-saucer ph-bold ph-lg",

View file

@ -1,13 +1,41 @@
<template> <template>
<div class="_formRoot"> <div class="_formRoot">
<FormTextarea v-model="items" tall manual-save class="_formBlock"> <FormSlot>
<template #label>{{ i18n.ts.navbar }}</template> <VueDraggable
<template #caption v-model="items"
><button class="_textButton" @click="addItem"> animation="150"
{{ i18n.ts.addItem }} delay="50"
</button></template @end="reloadAsk"
> >
</FormTextarea> <div
v-for="(element, index) in items"
:key="index"
class="item"
>
<i class="itemHandle ph-list ph-bold ph-lg"></i>
<i
:class="
navbarItemDef[element]?.icon ??
'ph-arrows-out-line-vertical ph-bold ph-lg'
"
></i>
<span class="itemText">{{
i18n.ts[navbarItemDef[element]?.title] ??
i18n.ts.divider
}}</span>
<button
class="_button itemRemove"
@click="removeItem(index)"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
</div>
</VueDraggable>
<FormButton primary class="_formBlock" @click="addItem">
<i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts.addItem }}
</FormButton>
</FormSlot>
<FormRadios v-model="menuDisplay" class="_formBlock"> <FormRadios v-model="menuDisplay" class="_formBlock">
<template #label>{{ i18n.ts.display }}</template> <template #label>{{ i18n.ts.display }}</template>
@ -31,7 +59,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from "vue"; import { computed, ref, watch } from "vue";
import FormTextarea from "@/components/form/textarea.vue"; import FormSlot from "@/components/form/slot.vue";
import FormRadios from "@/components/form/radios.vue"; import FormRadios from "@/components/form/radios.vue";
import FormButton from "@/components/MkButton.vue"; import FormButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
@ -39,16 +67,11 @@ import { navbarItemDef } from "@/navbar";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { unisonReload } from "@/scripts/unison-reload"; import { unisonReload } from "@/scripts/unison-reload";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { VueDraggable } from "vue-draggable-plus";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
const items = ref(defaultStore.state.menu.join("\n")); const items = ref(defaultStore.state.menu);
const split = computed(() =>
items.value
.trim()
.split("\n")
.filter((x) => x.trim() !== ""),
);
const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay")); const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
async function reloadAsk() { async function reloadAsk() {
@ -79,17 +102,21 @@ async function addItem() {
], ],
}); });
if (canceled) return; if (canceled) return;
items.value = [...split.value, item].join("\n"); items.value = [...items.value, item];
}
async function removeItem(index) {
items.value = items.value.filter((_, i) => i !== index);
} }
async function save() { async function save() {
defaultStore.set("menu", split.value); defaultStore.set("menu", items.value);
await reloadAsk(); await reloadAsk();
} }
function reset() { function reset() {
defaultStore.reset("menu"); defaultStore.reset("menu");
items.value = defaultStore.state.menu.join("\n"); items.value = defaultStore.state.menu;
} }
watch(items, async () => { watch(items, async () => {
@ -109,3 +136,47 @@ definePageMetadata({
icon: "ph-list-bullets ph-bold ph-lg", icon: "ph-list-bullets ph-bold ph-lg",
}); });
</script> </script>
<style lang="scss" scoped>
.item {
position: relative;
display: block;
line-height: 2.85rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border-radius: var(--radius);
margin-bottom: 0.5rem;
color: var(--navFg);
background-color: var(--panel);
> .itemIcon {
position: relative;
}
> .itemText {
position: relative;
font-size: 0.9em;
margin-left: 1rem;
}
> .itemRemove {
position: absolute;
z-index: 10000;
width: 32px;
height: 32px;
color: var(--error);
top: 4px;
right: 8px;
opacity: 0.8;
}
> .itemHandle {
cursor: move;
width: 32px;
height: 32px;
margin: 0 1rem;
opacity: 0.5;
}
}
</style>