This commit is contained in:
syuilo 2020-11-14 12:16:28 +09:00
parent 9c9cd168ee
commit ba65226460
6 changed files with 100 additions and 36 deletions

View file

@ -18,7 +18,6 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as os from '@/os';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -51,7 +50,7 @@ export default defineComponent({
.novjtctn { .novjtctn {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 16px 32px 0 0; margin: 8px 20px 0 0;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;

View file

@ -0,0 +1,51 @@
<template>
<div
class="novjtcto"
>
<div><slot></slot></div>
<MkRadio v-for="def in defs" v-model="value" :value="def.value" :key="def.value">{{ def.label }}</MkRadio>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkRadio from '@/components/ui/radio.vue';
export default defineComponent({
components: {
MkRadio
},
props: {
defs: {
required: true
},
modelValue: {
required: false
},
},
data() {
return {
value: this.modelValue,
}
},
watch: {
value() {
this.$emit('update:modelValue', this.value);
}
}
});
</script>
<style lang="scss" scoped>
.novjtcto {
margin: 32px 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
</style>

View file

@ -1,38 +1,44 @@
<template> <template>
<div class="_section"> <div class="">
<section class="_card _vMargin"> <section class="_card _vMargin">
<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div> <div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div>
<div class="_content"> <div class="_content">
<div>{{ $t('defaultNavigationBehaviour') }}</div> <MkRadios v-model="serverDisconnectedBehavior" :defs="[
<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch> { label: $t('_serverDisconnectedBehavior.reload'), value: 'reload' },
</div> { label: $t('_serverDisconnectedBehavior.dialog'), value: 'dialog' },
<div class="_content"> { label: $t('_serverDisconnectedBehavior.quiet'), value: 'quiet' },
<div>{{ $t('whenServerDisconnected') }}</div> ]"
<MkRadio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</MkRadio> >
<MkRadio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</MkRadio> {{ $t('whenServerDisconnected') }}
<MkRadio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</MkRadio> </MkRadios>
</div>
<div class="_content">
<MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch> <MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch>
<MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch> <MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch>
<MkSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</MkSwitch> <MkSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</MkSwitch>
<MkSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</MkSwitch> <MkSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</MkSwitch>
</div>
<div class="_content">
<div>{{ $t('chatOpenBehavior') }}</div>
<MkRadio v-model="chatOpenBehavior" value="page">{{ $t('showInPage') }}</MkRadio>
<MkRadio v-model="chatOpenBehavior" value="window">{{ $t('openInWindow') }}</MkRadio>
<MkRadio v-model="chatOpenBehavior" value="popout">{{ $t('popout') }}</MkRadio>
</div>
<div class="_content">
<MkSelect v-model:value="lang"> <MkSelect v-model:value="lang">
<template #label>{{ $t('uiLanguage') }}</template> <template #label>{{ $t('uiLanguage') }}</template>
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</MkSelect> </MkSelect>
</div> </div>
</section> </section>
<section class="_card _vMargin">
<div class="_title"><Fa :icon="faCog"/> {{ $t('defaultNavigationBehaviour') }}</div>
<div class="_content">
<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch>
</div>
<div class="_content">
<MkRadios v-model="chatOpenBehavior" :defs="[
{ label: $t('showInPage'), value: 'page' },
{ label: $t('openInWindow'), value: 'window' },
{ label: $t('popout'), value: 'popout' },
]"
>
{{ $t('chatOpenBehavior') }}
</MkRadios>
</div>
</section>
<section class="_card _vMargin"> <section class="_card _vMargin">
<div class="_title"><Fa :icon="faCog"/> {{ $t('appearance') }}</div> <div class="_title"><Fa :icon="faCog"/> {{ $t('appearance') }}</div>
<div class="_content"> <div class="_content">
@ -88,6 +94,7 @@ import MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/ui/switch.vue'; import MkSwitch from '@/components/ui/switch.vue';
import MkSelect from '@/components/ui/select.vue'; import MkSelect from '@/components/ui/select.vue';
import MkRadio from '@/components/ui/radio.vue'; import MkRadio from '@/components/ui/radio.vue';
import MkRadios from '@/components/ui/radios.vue';
import MkRange from '@/components/ui/range.vue'; import MkRange from '@/components/ui/range.vue';
import { langs } from '@/config'; import { langs } from '@/config';
import { clientDb, set } from '@/db'; import { clientDb, set } from '@/db';
@ -99,6 +106,7 @@ export default defineComponent({
MkSwitch, MkSwitch,
MkSelect, MkSelect,
MkRadio, MkRadio,
MkRadios,
MkRange, MkRange,
}, },

View file

@ -31,9 +31,7 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<transition :name="($store.state.device.animation && !narrow) ? 'view-slide' : ''" appear mode="out-in">
<component :is="component" @info="onInfo"/> <component :is="component" @info="onInfo"/>
</transition>
</div> </div>
</div> </div>
</template> </template>
@ -109,14 +107,6 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.view-slide-enter-active, .view-slide-leave-active {
transition: opacity 0.3s, transform 0.3s !important;
}
.view-slide-enter-from, .view-slide-leave-to {
opacity: 0;
transform: translateX(32px);
}
.vvcocwet { .vvcocwet {
> .nav { > .nav {
> .menu { > .menu {
@ -133,7 +123,7 @@ export default defineComponent({
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 32px; padding: 0 32px;
line-height: 48px; line-height: 40px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -168,10 +158,22 @@ export default defineComponent({
> .nav { > .nav {
width: 30%; width: 30%;
max-width: 300px; max-width: 300px;
font-size: 0.95em;
border-right: solid 1px var(--divider);
} }
> .main { > .main {
flex: 1; flex: 1;
padding: 32px;
--baseContentWidth: 100%;
::v-deep(._section) {
padding: 0 0 32px 0;
& + ._section {
padding-top: 32px;
}
}
} }
} }
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="_section"> <div class="">
<div class="rfqxtzch _card _vMargin"> <div class="rfqxtzch _card _vMargin">
<div class="_content"> <div class="_content">
<div class="darkMode" :class="{ disabled: syncDeviceDarkMode }"> <div class="darkMode" :class="{ disabled: syncDeviceDarkMode }">
@ -22,8 +22,12 @@
</label> </label>
</div> </div>
</div> </div>
</div>
<div class="_content">
<MkSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</MkSwitch> <MkSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</MkSwitch>
</div> </div>
</div>
<div class="_card _vMargin">
<div class="_content"> <div class="_content">
<MkSelect v-model:value="lightTheme"> <MkSelect v-model:value="lightTheme">
<template #label>{{ $t('themeForLightMode') }}</template> <template #label>{{ $t('themeForLightMode') }}</template>

View file

@ -244,7 +244,7 @@ hr {
> ._title { > ._title {
margin: 0; margin: 0;
padding: 22px 32px; padding: 22px 32px;
font-size: 1.1em; font-size: 1em;
border-bottom: solid 1px var(--panelHeaderDivider); border-bottom: solid 1px var(--panelHeaderDivider);
font-weight: bold; font-weight: bold;
background: var(--panelHeaderBg); background: var(--panelHeaderBg);