UI整理
This commit is contained in:
parent
9c9cd168ee
commit
ba65226460
|
@ -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;
|
||||||
|
|
|
@ -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>
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue