diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index df695b9f4b1a5a2ae4b7a42154fdb4c9353a082e..b91d6d76750b698e3e4c0a5d96de202afda37759 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -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([{ diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue index 661f4cab8266e72ef7815e6c27c50aa4072c330f..d35fa586381b4c55035d53694eb907db12d7aa33 100644 --- a/packages/frontend/src/ui/deck/antenna-column.vue +++ b/packages/frontend/src/ui/deck/antenna-column.vue @@ -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>>(); diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue index 14858750d5460fd4b3c2937e61c57e9fe8980d35..a967d9f08e3112e77428170c512d175a6210bb30 100644 --- a/packages/frontend/src/ui/deck/channel-column.vue +++ b/packages/frontend/src/ui/deck/channel-column.vue @@ -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>>(); diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index 402bbe035260e6a2e6fded26c9300310a6e5167f..e2c651becadb117ddcd22f03af12ba226bd0a298 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -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) { diff --git a/packages/frontend/src/ui/deck/direct-column.vue b/packages/frontend/src/ui/deck/direct-column.vue index 5f76ea6d860f843e9784a621e12c8e2900721d0a..f3397ceae6552d5ce6ba6c098b1dfc89b8efaa6f 100644 --- a/packages/frontend/src/ui/deck/direct-column.vue +++ b/packages/frontend/src/ui/deck/direct-column.vue @@ -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 = { diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue index 165b654514a09404a28d7ee139c7d120e7b71c43..439db8815a2e3c9db5c333f9e212d3c4eb3e577a 100644 --- a/packages/frontend/src/ui/deck/list-column.vue +++ b/packages/frontend/src/ui/deck/list-column.vue @@ -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>>(); diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue index 5448e3d2f30fced21929871e6f04d5d390546ae9..b2b558b30858c08694401a407e45be5c14198742 100644 --- a/packages/frontend/src/ui/deck/main-column.vue +++ b/packages/frontend/src/ui/deck/main-column.vue @@ -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>>(); diff --git a/packages/frontend/src/ui/deck/mentions-column.vue b/packages/frontend/src/ui/deck/mentions-column.vue index d6f9d88043f97513844a585d600f777278aaad01..63fc57db74c467492eb0dbde9b79eb668fe04c2c 100644 --- a/packages/frontend/src/ui/deck/mentions-column.vue +++ b/packages/frontend/src/ui/deck/mentions-column.vue @@ -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 = { diff --git a/packages/frontend/src/ui/deck/notifications-column.vue b/packages/frontend/src/ui/deck/notifications-column.vue index 48d88aa6cf1a2c2f694ea2ae8f3ca783b643d2d6..e10b4964479b08222153124351f994a84aaa43ab 100644 --- a/packages/frontend/src/ui/deck/notifications-column.vue +++ b/packages/frontend/src/ui/deck/notifications-column.vue @@ -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() { diff --git a/packages/frontend/src/ui/deck/role-timeline-column.vue b/packages/frontend/src/ui/deck/role-timeline-column.vue index cb189cae4b852bcd88bdaaa6d5c4d8f09c18b070..df21fff43112e8b67c164b714e9562c5c08819d2 100644 --- a/packages/frontend/src/ui/deck/role-timeline-column.vue +++ b/packages/frontend/src/ui/deck/role-timeline-column.vue @@ -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>>(); diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue index a4fea6564bfac40055f7e5099667dd36eeccad36..c0840f9d9830e1d258d3ac82c4744a37cdaf1019 100644 --- a/packages/frontend/src/ui/deck/tl-column.vue +++ b/packages/frontend/src/ui/deck/tl-column.vue @@ -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); diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue index af35d3ac1349dac05023424c6bb41fc18c1271ed..2c4095ac4e95234fb571335734e26dd61a3be0eb 100644 --- a/packages/frontend/src/ui/deck/widgets-column.vue +++ b/packages/frontend/src/ui/deck/widgets-column.vue @@ -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);