refactor
This commit is contained in:
parent
1eb35dd5bc
commit
c685989e67
|
@ -4,27 +4,24 @@
|
||||||
|
|
||||||
<div :class="$style.main">
|
<div :class="$style.main">
|
||||||
<XStatusBars/>
|
<XStatusBars/>
|
||||||
<div ref="columnsEl" :class="[$style.columns, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
|
<div ref="columnsEl" :class="[$style.sections, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
|
||||||
<template v-for="ids in layout">
|
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
||||||
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
<section
|
||||||
<section
|
v-for="ids in layout"
|
||||||
v-if="ids.length > 1"
|
:class="$style.section"
|
||||||
:class="$style.folder"
|
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
|
||||||
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
|
>
|
||||||
>
|
<component
|
||||||
<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :isStacked="true" @parentFocus="moveFocus(id, $event)"/>
|
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
|
||||||
</section>
|
v-for="id in ids"
|
||||||
<DeckColumnCore
|
:ref="id"
|
||||||
v-else
|
:key="id"
|
||||||
:ref="ids[0]"
|
|
||||||
:key="ids[0]"
|
|
||||||
:class="$style.column"
|
:class="$style.column"
|
||||||
:column="columns.find(c => c.id === ids[0])"
|
:column="columns.find(c => c.id === id)"
|
||||||
:isStacked="false"
|
:isStacked="ids.length > 1"
|
||||||
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
|
@parentFocus="moveFocus(id, $event)"
|
||||||
@parentFocus="moveFocus(ids[0], $event)"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</section>
|
||||||
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
||||||
<div>{{ i18n.ts._deck.introduction }}</div>
|
<div>{{ i18n.ts._deck.introduction }}</div>
|
||||||
<MkButton primary style="margin: 1em auto;" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
|
<MkButton primary style="margin: 1em auto;" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
|
||||||
|
@ -87,7 +84,6 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||||
import { v4 as uuid } from 'uuid';
|
import { v4 as uuid } from 'uuid';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
|
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
|
||||||
import DeckColumnCore from '@/ui/deck/column-core.vue';
|
|
||||||
import XSidebar from '@/ui/_common_/navbar.vue';
|
import XSidebar from '@/ui/_common_/navbar.vue';
|
||||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
|
@ -100,8 +96,31 @@ import { mainRouter } from '@/router';
|
||||||
import { unisonReload } from '@/scripts/unison-reload';
|
import { unisonReload } from '@/scripts/unison-reload';
|
||||||
import { deviceKind } from '@/scripts/device-kind';
|
import { deviceKind } from '@/scripts/device-kind';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
|
import XMainColumn from '@/ui/deck/main-column.vue';
|
||||||
|
import XTlColumn from '@/ui/deck/tl-column.vue';
|
||||||
|
import XAntennaColumn from '@/ui/deck/antenna-column.vue';
|
||||||
|
import XListColumn from '@/ui/deck/list-column.vue';
|
||||||
|
import XChannelColumn from '@/ui/deck/channel-column.vue';
|
||||||
|
import XNotificationsColumn from '@/ui/deck/notifications-column.vue';
|
||||||
|
import XWidgetsColumn from '@/ui/deck/widgets-column.vue';
|
||||||
|
import XMentionsColumn from '@/ui/deck/mentions-column.vue';
|
||||||
|
import XDirectColumn from '@/ui/deck/direct-column.vue';
|
||||||
|
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
|
||||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||||
|
|
||||||
|
const columnComponents = {
|
||||||
|
main: XMainColumn,
|
||||||
|
widgets: XWidgetsColumn,
|
||||||
|
notifications: XNotificationsColumn,
|
||||||
|
tl: XTlColumn,
|
||||||
|
list: XListColumn,
|
||||||
|
channel: XChannelColumn,
|
||||||
|
antenna: XAntennaColumn,
|
||||||
|
mentions: XMentionsColumn,
|
||||||
|
direct: XDirectColumn,
|
||||||
|
roleTimeline: XRoleTimelineColumn,
|
||||||
|
};
|
||||||
|
|
||||||
mainRouter.navHook = (path, flag): boolean => {
|
mainRouter.navHook = (path, flag): boolean => {
|
||||||
if (flag === 'forcePage') return false;
|
if (flag === 'forcePage') return false;
|
||||||
const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
|
const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
|
||||||
|
@ -286,18 +305,18 @@ async function deleteProfile() {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns {
|
.sections {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: clip;
|
overflow-y: clip;
|
||||||
|
|
||||||
&.center {
|
&.center {
|
||||||
> .column:first-of-type {
|
> .section:first-of-type {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .column:last-of-type {
|
> .section:last-of-type {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -307,7 +326,9 @@ async function deleteProfile() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-right: solid var(--deckDividerThickness) var(--deckDivider);
|
border-right: solid var(--deckDividerThickness) var(--deckDivider);
|
||||||
|
@ -315,14 +336,8 @@ async function deleteProfile() {
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
border-left: solid var(--deckDividerThickness) var(--deckDivider);
|
border-left: solid var(--deckDividerThickness) var(--deckDivider);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.folder {
|
> .column:not(:last-of-type) {
|
||||||
composes: column;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
> *:not(:last-of-type) {
|
|
||||||
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
|
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- TODO: リファクタの余地がありそう -->
|
|
||||||
<div v-if="!column">たぶん見えちゃいけないやつ</div>
|
|
||||||
<XMainColumn v-else-if="column.type === 'main'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XTlColumn v-else-if="column.type === 'tl'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XListColumn v-else-if="column.type === 'list'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XChannelColumn v-else-if="column.type === 'channel'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
<XRoleTimelineColumn v-else-if="column.type === 'roleTimeline'" :column="column" :isStacked="isStacked" @parentFocus="emit('parent-focus', $event)"/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { } from 'vue';
|
|
||||||
import XMainColumn from './main-column.vue';
|
|
||||||
import XTlColumn from './tl-column.vue';
|
|
||||||
import XAntennaColumn from './antenna-column.vue';
|
|
||||||
import XListColumn from './list-column.vue';
|
|
||||||
import XChannelColumn from './channel-column.vue';
|
|
||||||
import XNotificationsColumn from './notifications-column.vue';
|
|
||||||
import XWidgetsColumn from './widgets-column.vue';
|
|
||||||
import XMentionsColumn from './mentions-column.vue';
|
|
||||||
import XDirectColumn from './direct-column.vue';
|
|
||||||
import XRoleTimelineColumn from './role-timeline-column.vue';
|
|
||||||
import { Column } from './deck-store';
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
column?: Column;
|
|
||||||
isStacked: boolean;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue