Improve deck
This commit is contained in:
syuilo
parent
78598a92f9
commit
743eca4a95
@ -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: "右に移動"
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user