oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(client): refine deck

Browse source 
Fix #7720
This commit is contained in:
syuilo 2022-07-03 20:30:58 +09:00
parent af6dd4194f
commit 1163c85db6
9 changed files with 132 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

120
packages/client/src/ui/deck.vue
View file

@ -1,32 +1,37 @@
<template>
<div
class="mk-deck" :class="[{ isMobile }, `${deckStore.reactiveState.columnAlign.value}`]" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
class="mk-deck" :class="[{ isMobile }]"
>
<XSidebar v-if="!isMobile"/>
<div class="main">
<XStatusBars class="statusbars"/>
<div ref="columnsEl" class="columns" @contextmenu.self.prevent="onContextmenu">
<template v-for="ids in layout">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section
v-if="ids.length > 1"
class="folder column"
: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)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
</section>
<DeckColumnCore
v-else
:ref="ids[0]"
:key="ids[0]"
class="column"
:column="columns.find(c => c.id === ids[0])"
:is-stacked="false"
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
@parent-focus="moveFocus(ids[0], $event)"
/>
</template>
<div class="columnsWrapper">
<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
<template v-for="ids in layout">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section
v-if="ids.length > 1"
class="folder column"
: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)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
</section>
<DeckColumnCore
v-else
:ref="ids[0]"
:key="ids[0]"
class="column"
:column="columns.find(c => c.id === ids[0])"
:is-stacked="false"
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
@parent-focus="moveFocus(ids[0], $event)"
/>
</template>
</div>
<div class="sideMenu">
<button class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
</div>
</div>
</div>
@ -183,22 +188,14 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
--margin: var(--marginHalf);
--deckDividerThickness: 5px;
display: flex;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
flex: 1;
&.center {
> .column:first-of-type {
margin-left: auto;
}
> .column:last-of-type {
margin-right: auto;
}
}
&.isMobile {
padding-bottom: 100px;
}
@ -209,24 +206,55 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
display: flex;
flex-direction: column;
> .columns {
display: flex;
> .columnsWrapper {
flex: 1;
padding: var(--deckMargin);
overflow-x: auto;
overflow-y: clip;
display: flex;
flex-direction: row;
> .column {
flex-shrink: 0;
margin-right: var(--deckMargin);
> .columns {
flex: 1;
display: flex;
overflow-x: auto;
overflow-y: clip;
&.folder {
display: flex;
flex-direction: column;
> *:not(:last-child) {
margin-bottom: var(--deckMargin);
&.center {
> .column:first-of-type {
margin-left: auto;
}
> .column:last-of-type {
margin-right: auto;
}
}
> .column {
flex-shrink: 0;
border-right: solid var(--deckDividerThickness) var(--deckDivider);
&:first-child {
border-left: solid var(--deckDividerThickness) var(--deckDivider);
}
&.folder {
display: flex;
flex-direction: column;
> *:not(:last-child) {
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
}
}
}
}
> .sideMenu {
display: flex;
flex-direction: column;
justify-content: center;
width: 32px;
> .button {
width: 100%;
aspect-ratio: 1;
}
}
}