monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

tweak settings/navbar.vue

Browse source
This commit is contained in:
syuilo 2023-03-20 20:35:49 +09:00
parent 5e1014c072
commit dac4fbcb1e
1 changed files with 57 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
packages/frontend/src/pages/settings/navbar.vue
View file

@ -5,27 +5,27 @@
<MkContainer :show-header="false"> <MkContainer :show-header="false">
<Sortable <Sortable
v-model="items" v-model="items"
item-key="id"
:animation="150" :animation="150"
class="navbar_items" :handle="'.' + $style.itemHandle"
handle=".item_handle" @start="e => e.item.classList.add('active')"
@start="e=>e.item.classList.add('active')" @end="e => e.item.classList.remove('active')"
@end="e=>e.item.classList.remove('active')"
> >
<template #item="{element,index}"> <template #item="{element,index}">
<div <div
v-if="element === '-' || navbarItemDef[element]" v-if="element.type === '-' || navbarItemDef[element.type]"
class="item" :class="$style.item"
> >
<button class="item_handle _button" ><i class="ti ti-menu"></i></button> <button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
<i class="icon ti-fw" :class="navbarItemDef[element]?.icon"></i><span class="text">{{ navbarItemDef[element]?.title ?? i18n.ts.divider }}</span> <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ navbarItemDef[element.type]?.title ?? i18n.ts.divider }}</span>
<button class="navbar_item_remove _button" @click="removeItem(index)"><i class="ti ti-trash"></i></button> <button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
</div> </div>
</template> </template>
</Sortable> </Sortable>
</MkContainer> </MkContainer>
</FormSlot> </FormSlot>
<div class="_buttons"> <div class="_buttons">
<MkButton @click="addItem">{{ i18n.ts.addItem }}</MkButton> <MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
<MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton> <MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> <MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
@ -56,7 +56,10 @@ import { deepClone } from '@/scripts/clone';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default)); const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const items = ref(deepClone(defaultStore.state.menu)); const items = ref(defaultStore.state.menu.map(x => ({
id: Math.random().toString(),
type: x,
})));
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay')); const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
@ -81,7 +84,10 @@ async function addItem() {
}], }],
}); });
if (canceled) return; if (canceled) return;
items.value = [...items.value, item]; items.value = [...items.value, {
id: Math.random().toString(),
type: item,
}];
} }
function removeItem(index: number) { function removeItem(index: number) {
@ -89,12 +95,15 @@ function removeItem(index: number) {
} }
async function save() { async function save() {
defaultStore.set('menu', items.value); defaultStore.set('menu', items.value.map(x => x.type));
await reloadAsk(); await reloadAsk();
} }
function reset() { function reset() {
items.value = defaultStore.def.menu.default; items.value = defaultStore.def.menu.default.map(x => ({
id: Math.random().toString(),
type: x,
}));
} }
watch(menuDisplay, async () => { watch(menuDisplay, async () => {
@ -110,75 +119,44 @@ definePageMetadata({
icon: 'ti ti-list', icon: 'ti ti-list',
}); });
</script> </script>
<style lang="scss">
.navbar_items {
flex: 1;
.item { <style lang="scss" module>
position: relative; .item {
display: block; position: relative;
line-height: 2.85rem; display: block;
text-overflow: ellipsis; line-height: 2.85rem;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; overflow: hidden;
width: 100%; white-space: nowrap;
text-align: left; color: var(--navFg);
box-sizing: border-box; }
color: var(--navFg);
.icon { .itemIcon {
position: relative; position: relative;
width: 32px; width: 32px;
margin-right: 8px; margin-right: 8px;
} }
.text { .itemText {
position: relative; position: relative;
font-size: 0.9em; font-size: 0.9em;
} }
.navbar_item_remove { .itemRemove {
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;
width: 32px; width: 32px;
height: 32px; height: 32px;
color: #ff2a2a; color: #ff2a2a;
right: 8px; right: 8px;
opacity: 0.8; opacity: 0.8;
} }
.item_handle{ .itemHandle {
cursor: move; cursor: move;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin: 0 8px; margin: 0 8px;
opacity: 0.5; opacity: 0.5;
}
&.active {
text-decoration: none;
color: var(--accent);
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
aspect-ratio: 1;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
}
> .icon, > .text {
opacity: 1;
}
}
}
} }
</style> </style>