mirror of
https://codeberg.org/yeentown/barkey
synced 2024-11-22 05:35:11 +00:00
refactor
This commit is contained in:
parent
30cb03a40d
commit
d177f97928
12 changed files with 21 additions and 48 deletions
|
@ -19,7 +19,6 @@
|
|||
:class="$style.column"
|
||||
:column="columns.find(c => c.id === id)"
|
||||
:isStacked="ids.length > 1"
|
||||
@parentFocus="moveFocus(id, $event)"
|
||||
/>
|
||||
</section>
|
||||
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
||||
|
@ -206,11 +205,8 @@ window.addEventListener('wheel', (ev) => {
|
|||
columnsEl.scrollLeft += ev.deltaY;
|
||||
}
|
||||
});
|
||||
loadDeck();
|
||||
|
||||
function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
|
||||
// TODO??
|
||||
}
|
||||
loadDeck();
|
||||
|
||||
function changeProfile(ev: MouseEvent) {
|
||||
const items = ref([{
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
@ -23,7 +23,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
@ -29,7 +29,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
||||
<section
|
||||
v-hotkey="keymap"
|
||||
<div
|
||||
:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.isStacked]: isStacked, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragleave="onDragleave"
|
||||
|
@ -22,10 +20,10 @@
|
|||
<span :class="$style.title"><slot name="header"></slot></span>
|
||||
<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
|
||||
</header>
|
||||
<div v-show="active" ref="body" :class="$style.body">
|
||||
<div v-if="active" ref="body" :class="$style.body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -49,12 +47,7 @@ const props = withDefaults(defineProps<{
|
|||
naked: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
(ev: 'change-active-state', v: boolean): void;
|
||||
}>();
|
||||
|
||||
let body = $shallowRef<HTMLDivElement>();
|
||||
let body = $shallowRef<HTMLDivElement | null>();
|
||||
|
||||
let dragging = $ref(false);
|
||||
watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
|
||||
|
@ -64,14 +57,6 @@ let dropready = $ref(false);
|
|||
|
||||
const isMainColumn = $computed(() => props.column.type === 'main');
|
||||
const active = $computed(() => props.column.active !== false);
|
||||
watch($$(active), v => emit('change-active-state', v));
|
||||
|
||||
const keymap = $computed(() => ({
|
||||
'shift+up': () => emit('parent-focus', 'up'),
|
||||
'shift+down': () => emit('parent-focus', 'down'),
|
||||
'shift+left': () => emit('parent-focus', 'left'),
|
||||
'shift+right': () => emit('parent-focus', 'right'),
|
||||
}));
|
||||
|
||||
onMounted(() => {
|
||||
os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
|
||||
|
@ -190,10 +175,12 @@ function onContextmenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function goTop() {
|
||||
body.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
if (body) {
|
||||
body.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onDragstart(ev) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :column="column" :isStacked="isStacked">
|
||||
<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<MkNotes :pagination="pagination"/>
|
||||
|
@ -18,7 +18,6 @@ defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
const pagination = {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
@ -23,7 +23,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<template v-if="pageMetadata?.value">
|
||||
<i :class="pageMetadata?.value.icon"></i>
|
||||
|
@ -26,7 +26,6 @@ defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :column="column" :isStacked="isStacked">
|
||||
<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<MkNotes :pagination="pagination"/>
|
||||
|
@ -18,7 +18,6 @@ defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
const pagination = {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :column="column" :isStacked="isStacked" :menu="menu" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :column="column" :isStacked="isStacked" :menu="menu">
|
||||
<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<XNotifications :includeTypes="column.includingTypes"/>
|
||||
|
@ -20,7 +20,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
function func() {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
@ -23,7 +23,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked">
|
||||
<template #header>
|
||||
<i v-if="column.tl === 'home'" class="ti ti-home"></i>
|
||||
<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
|
||||
|
@ -36,7 +36,6 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'loaded'): void;
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let disabled = $ref(false);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<XColumn :menu="menu" :naked="true" :column="column" :isStacked="isStacked" @parentFocus="$event => emit('parent-focus', $event)">
|
||||
<XColumn :menu="menu" :naked="true" :column="column" :isStacked="isStacked">
|
||||
<template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<div :class="$style.root">
|
||||
|
@ -22,7 +22,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||
}>();
|
||||
|
||||
let edit = $ref(false);
|
||||
|
|
Loading…
Reference in a new issue