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

Improve deck

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

55
src/client/pages/settings/deck.vue
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() {