mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-11-27 22:38:34 +09:00
refactor
This commit is contained in:
syuilo
parent
1eb35dd5bc
commit
c685989e67
@ -4,27 +4,24 @@
|
||||
|
||||
<div :class="$style.main">
|
||||
<XStatusBars/>
|
||||
<div ref="columnsEl" :class="[$style.columns, 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
|
||||
v-if="ids.length > 1"
|
||||
: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' }"
|
||||
>
|
||||
<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :isStacked="true" @parentFocus="moveFocus(id, $event)"/>
|
||||
</section>
|
||||
<DeckColumnCore
|
||||
v-else
|
||||
:ref="ids[0]"
|
||||
:key="ids[0]"
|
||||
<div ref="columnsEl" :class="[$style.sections, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
|
||||
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
|
||||
<section
|
||||
v-for="ids in layout"
|
||||
:class="$style.section"
|
||||
: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
|
||||
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
|
||||
v-for="id in ids"
|
||||
:ref="id"
|
||||
:key="id"
|
||||
:class="$style.column"
|
||||
:column="columns.find(c => c.id === ids[0])"
|
||||
:isStacked="false"
|
||||
: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(ids[0], $event)"
|
||||
:column="columns.find(c => c.id === id)"
|
||||
:isStacked="ids.length > 1"
|
||||
@parentFocus="moveFocus(id, $event)"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
|
||||
<div>{{ i18n.ts._deck.introduction }}</div>
|
||||
<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 XCommon from './_common_/common.vue';
|
||||
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 XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
@ -100,8 +96,31 @@ import { mainRouter } from '@/router';
|
||||
import { unisonReload } from '@/scripts/unison-reload';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
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 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 => {
|
||||
if (flag === 'forcePage') return false;
|
||||
const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
|
||||
@ -286,18 +305,18 @@ async function deleteProfile() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.columns {
|
||||
.sections {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: clip;
|
||||
|
||||
&.center {
|
||||
> .column:first-of-type {
|
||||
> .section:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
> .column:last-of-type {
|
||||
> .section:last-of-type {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
@ -307,7 +326,9 @@ async function deleteProfile() {
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
border-right: solid var(--deckDividerThickness) var(--deckDivider);
|
||||
@ -315,14 +336,8 @@ async function deleteProfile() {
|
||||
&:first-of-type {
|
||||
border-left: solid var(--deckDividerThickness) var(--deckDivider);
|
||||
}
|
||||
}
|
||||
|
||||
.folder {
|
||||
composes: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> *:not(:last-of-type) {
|
||||
> .column:not(:last-of-type) {
|
||||
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
Block a user