Improve deck

This commit is contained in:
syuilo 2020-12-26 22:41:00 +09:00
parent 78598a92f9
commit 743eca4a95
5 changed files with 57 additions and 47 deletions

View File

@ -665,6 +665,10 @@ makeExplorable: "アカウントを見つけやすくする"
makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。" makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。"
showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示" showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示"
duplicate: "複製" duplicate: "複製"
left: "左"
center: "中央"
wide: "広い"
narrow: "狭い"
_aboutMisskey: _aboutMisskey:
about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。" about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
@ -1515,6 +1519,8 @@ _notification:
_deck: _deck:
alwaysShowMainColumn: "常にメインカラムを表示" alwaysShowMainColumn: "常にメインカラムを表示"
columnAlign: "カラムの寄せ" columnAlign: "カラムの寄せ"
columnMargin: "カラム間のマージン"
columnHeaderHeight: "カラムのヘッダー幅"
addColumn: "カラムを追加" addColumn: "カラムを追加"
swapLeft: "左に移動" swapLeft: "左に移動"
swapRight: "右に移動" swapRight: "右に移動"

View File

@ -1,53 +1,48 @@
<template> <template>
<FormBase> <FormBase>
<FormGroup>
<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
<FormSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</FormSwitch>
</FormGroup>
<section class="_card _vMargin"> <FormSwitch v-model:value="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
<div class="_title"><Fa :icon="faColumns"/> </div>
<div class="_content">
<div>{{ $ts.defaultNavigationBehaviour }}</div>
<MkSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</MkSwitch>
</div>
<div class="_content">
<MkSwitch v-model:value="alwaysShowMainColumn">
{{ $ts._deck.alwaysShowMainColumn }}
</MkSwitch>
</div>
<div class="_content">
<div>{{ $ts._deck.columnAlign }}</div>
<MkRadio v-model="columnAlign" value="left">{{ $ts.left }}</MkRadio>
<MkRadio v-model="columnAlign" value="center">{{ $ts.center }}</MkRadio>
</div>
</section>
<FormRadios v-model="columnAlign">
<template #desc>{{ $ts._deck.columnAlign }}</template>
<option value="left">{{ $ts.left }}</option>
<option value="center">{{ $ts.center }}</option>
</FormRadios>
<FormRadios v-model="columnHeaderHeight">
<template #desc>{{ $ts._deck.columnHeaderHeight }}</template>
<option :value="42">{{ $ts.narrow }}</option>
<option :value="45">{{ $ts.medium }}</option>
<option :value="48">{{ $ts.wide }}</option>
</FormRadios>
<FormInput v-model:value="columnMargin" type="number">
<span>{{ $ts._deck.columnMargin }}</span>
<template #suffix>px</template>
</FormInput>
</FormBase> </FormBase>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons'; import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons';
import MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/ui/switch.vue';
import MkSelect from '@/components/ui/select.vue';
import MkRadio from '@/components/ui/radio.vue';
import MkRadios from '@/components/ui/radios.vue';
import MkRange from '@/components/ui/range.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/form/input.vue';
import FormBase from '@/components/form/base.vue'; import FormBase from '@/components/form/base.vue';
import FormGroup from '@/components/form/group.vue'; import FormGroup from '@/components/form/group.vue';
import { deckStore } from '@/ui/deck/deck-store'; import { deckStore } from '@/ui/deck/deck-store';
export default defineComponent({ export default defineComponent({
components: { components: {
MkButton,
MkSwitch,
MkSelect,
MkRadio,
MkRadios,
MkRange,
FormSwitch, FormSwitch,
FormSelect, FormSelect,
FormInput,
FormRadios, FormRadios,
FormBase, FormBase,
FormGroup, FormGroup,
@ -69,6 +64,8 @@ export default defineComponent({
navWindow: deckStore.makeGetterSetter('navWindow'), navWindow: deckStore.makeGetterSetter('navWindow'),
alwaysShowMainColumn: deckStore.makeGetterSetter('alwaysShowMainColumn'), alwaysShowMainColumn: deckStore.makeGetterSetter('alwaysShowMainColumn'),
columnAlign: deckStore.makeGetterSetter('columnAlign'), columnAlign: deckStore.makeGetterSetter('columnAlign'),
columnMargin: deckStore.makeGetterSetter('columnMargin'),
columnHeaderHeight: deckStore.makeGetterSetter('columnHeaderHeight'),
}, },
mounted() { mounted() {

View File

@ -1,5 +1,7 @@
<template> <template>
<div class="mk-deck" :class="`${deckStore.state.columnAlign}`" v-hotkey.global="keymap" @contextmenu.self.prevent="onContextmenu"> <div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" v-hotkey.global="keymap" @contextmenu.self.prevent="onContextmenu"
:style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
>
<XSidebar ref="nav"/> <XSidebar ref="nav"/>
<template v-for="ids in layout"> <template v-for="ids in layout">
@ -158,11 +160,7 @@ export default defineComponent({
.mk-deck { .mk-deck {
$nav-hide-threshold: 650px; // TODO: $nav-hide-threshold: 650px; // TODO:
// TODO: // TODO:
$columnMargin: 32px;
$deckMargin: $columnMargin;
--margin: var(--marginHalf); --margin: var(--marginHalf);
display: flex; display: flex;
@ -170,7 +168,7 @@ export default defineComponent({
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: $deckMargin; padding: var(--deckMargin);
&.center { &.center {
> .column:first-of-type { > .column:first-of-type {
@ -184,14 +182,14 @@ export default defineComponent({
> .column { > .column {
flex-shrink: 0; flex-shrink: 0;
margin-right: $columnMargin; margin-right: var(--deckMargin);
&.folder { &.folder {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> *:not(:last-child) { > *:not(:last-child) {
margin-bottom: $columnMargin; margin-bottom: var(--deckMargin);
} }
} }
} }

View File

@ -5,6 +5,7 @@
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
v-hotkey="keymap" v-hotkey="keymap"
:style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
> >
<header :class="{ indicated }" <header :class="{ indicated }"
draggable="true" draggable="true"
@ -35,6 +36,7 @@ import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRig
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons'; import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
import * as os from '@/os'; import * as os from '@/os';
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store'; import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
import { deckStore } from './deck-store';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -67,6 +69,7 @@ export default defineComponent({
data() { data() {
return { return {
deckStore,
active: true, active: true,
dragging: false, dragging: false,
draghover: false, draghover: false,
@ -261,8 +264,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.dnpfarvg { .dnpfarvg {
$header-height: 42px;
--section-padding: 10px; --section-padding: 10px;
height: 100%; height: 100%;
@ -296,8 +297,8 @@ export default defineComponent({
} }
&:not(.active) { &:not(.active) {
flex-basis: $header-height; flex-basis: var(--deckColumnHeaderHeight);
min-height: $header-height; min-height: var(--deckColumnHeaderHeight);
> header.indicated { > header.indicated {
box-shadow: 4px 0px var(--accent) inset; box-shadow: 4px 0px var(--accent) inset;
@ -329,8 +330,8 @@ export default defineComponent({
position: relative; position: relative;
display: flex; display: flex;
z-index: 2; z-index: 2;
line-height: $header-height; line-height: var(--deckColumnHeaderHeight);
height: $header-height; height: var(--deckColumnHeaderHeight);
padding: 0 16px; padding: 0 16px;
font-size: 0.9em; font-size: 0.9em;
color: var(--panelHeaderFg); color: var(--panelHeaderFg);
@ -362,8 +363,8 @@ export default defineComponent({
> .action > *, > .action > *,
> .menu { > .menu {
z-index: 1; z-index: 1;
width: $header-height; width: var(--deckColumnHeaderHeight);
line-height: $header-height; line-height: var(--deckColumnHeaderHeight);
font-size: 16px; font-size: 16px;
color: var(--faceTextButton); color: var(--faceTextButton);
@ -395,7 +396,7 @@ export default defineComponent({
} }
> div { > div {
height: calc(100% - #{$header-height}); height: calc(100% - var(--deckColumnHeaderHeight));
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

View File

@ -40,6 +40,14 @@ export const deckStore = markRaw(new Storage('deck', {
where: 'deviceAccount', where: 'deviceAccount',
default: true default: true
}, },
columnMargin: {
where: 'deviceAccount',
default: 16
},
columnHeaderHeight: {
where: 'deviceAccount',
default: 42
},
})); }));
export function addColumn(column: Column) { export function addColumn(column: Column) {