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