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

View file

@ -1,53 +1,48 @@
<template>
<FormBase>
<FormGroup>
<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
<FormSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</FormSwitch>
</FormGroup>
<section class="_card _vMargin">
<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>
<FormSwitch v-model:value="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
<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>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
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 FormSelect from '@/components/form/select.vue';
import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/form/input.vue';
import FormBase from '@/components/form/base.vue';
import FormGroup from '@/components/form/group.vue';
import { deckStore } from '@/ui/deck/deck-store';
export default defineComponent({
components: {
MkButton,
MkSwitch,
MkSelect,
MkRadio,
MkRadios,
MkRange,
FormSwitch,
FormSelect,
FormInput,
FormRadios,
FormBase,
FormGroup,
@ -69,6 +64,8 @@ export default defineComponent({
navWindow: deckStore.makeGetterSetter('navWindow'),
alwaysShowMainColumn: deckStore.makeGetterSetter('alwaysShowMainColumn'),
columnAlign: deckStore.makeGetterSetter('columnAlign'),
columnMargin: deckStore.makeGetterSetter('columnMargin'),
columnHeaderHeight: deckStore.makeGetterSetter('columnHeaderHeight'),
},
mounted() {

View file

@ -1,5 +1,7 @@
<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"/>
<template v-for="ids in layout">
@ -158,11 +160,7 @@ export default defineComponent({
.mk-deck {
$nav-hide-threshold: 650px; // TODO:
// TODO:
$columnMargin: 32px;
$deckMargin: $columnMargin;
// TODO:
--margin: var(--marginHalf);
display: flex;
@ -170,7 +168,7 @@ export default defineComponent({
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
flex: 1;
padding: $deckMargin;
padding: var(--deckMargin);
&.center {
> .column:first-of-type {
@ -184,14 +182,14 @@ export default defineComponent({
> .column {
flex-shrink: 0;
margin-right: $columnMargin;
margin-right: var(--deckMargin);
&.folder {
display: flex;
flex-direction: column;
> *:not(:last-child) {
margin-bottom: $columnMargin;
margin-bottom: var(--deckMargin);
}
}
}

View file

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

View file

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