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" :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([{

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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