Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-20 10:12:18 +09:00
parent 30cb03a40d
commit d177f97928
12 changed files with 21 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/ui/deck.vue
View file

@ -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([{

3
packages/frontend/src/ui/deck/antenna-column.vue
View file

@ -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>>();

3
packages/frontend/src/ui/deck/channel-column.vue
View file

@ -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>>();

25
packages/frontend/src/ui/deck/column.vue
View file

@ -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() {
if (body) {
body.scrollTo({
top: 0,
behavior: 'smooth',
});
}
}
function onDragstart(ev) {

3
packages/frontend/src/ui/deck/direct-column.vue
View file

@ -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 = {

3
packages/frontend/src/ui/deck/list-column.vue
View file

@ -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>>();

3
packages/frontend/src/ui/deck/main-column.vue
View file

@ -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>>();

3
packages/frontend/src/ui/deck/mentions-column.vue
View file

@ -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 = {

3
packages/frontend/src/ui/deck/notifications-column.vue
View file

@ -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() {

3
packages/frontend/src/ui/deck/role-timeline-column.vue
View file

@ -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>>();

3
packages/frontend/src/ui/deck/tl-column.vue
View file

@ -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);

3
packages/frontend/src/ui/deck/widgets-column.vue
View file

@ -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);