mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 23:31:48 +09:00
Code

Improve MkRadios

Browse Source
This commit is contained in:
syuilo 2020-11-14 12:50:24 +09:00
parent ba65226460
commit 6c3417d9b5
2 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/client/components/ui/radios.vue
View File

@ -1,14 +1,5 @@
<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"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, h } from 'vue';
import MkRadio from '@/components/ui/radio.vue'; import MkRadio from '@/components/ui/radio.vue';
export default defineComponent({ export default defineComponent({
@ -32,6 +23,22 @@ export default defineComponent({
value() { value() {
this.$emit('update:modelValue', this.value); this.$emit('update:modelValue', this.value);
} }
},
render() {
const label = this.$slots.desc();
const options = this.$slots.default();
return h('div', {
class: 'novjtcto'
}, [
h('div', label),
...options.map(option => h(MkRadio, {
key: option.props.value,
value: option.props.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,
}, option.children))
]);
} }
}); });
</script> </script>

50
src/client/pages/settings/general.vue
View File

@ -3,13 +3,11 @@
<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">
<MkRadios v-model="serverDisconnectedBehavior" :defs="[ <MkRadios v-model="serverDisconnectedBehavior">
{ label: $t('_serverDisconnectedBehavior.reload'), value: 'reload' }, <template #desc>{{ $t('whenServerDisconnected') }}</template>
{ label: $t('_serverDisconnectedBehavior.dialog'), value: 'dialog' }, <option value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</option>
{ label: $t('_serverDisconnectedBehavior.quiet'), value: 'quiet' }, <option value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</option>
]" <option value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</option>
>
{{ $t('whenServerDisconnected') }}
</MkRadios> </MkRadios>
<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>
@ -28,13 +26,11 @@
<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch> <MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch>
</div> </div>
<div class="_content"> <div class="_content">
<MkRadios v-model="chatOpenBehavior" :defs="[ <MkRadios v-model="chatOpenBehavior">
{ label: $t('showInPage'), value: 'page' }, <template #desc>{{ $t('chatOpenBehavior') }}</template>
{ label: $t('openInWindow'), value: 'window' }, <option value="page">{{ $t('showInPage') }}</option>
{ label: $t('popout'), value: 'popout' }, <option value="window">{{ $t('openInWindow') }}</option>
]" <option value="popout">{{ $t('popout') }}</option>
>
{{ $t('chatOpenBehavior') }}
</MkRadios> </MkRadios>
</div> </div>
</section> </section>
@ -49,19 +45,19 @@
{{ $t('useOsNativeEmojis') }} {{ $t('useOsNativeEmojis') }}
<template #desc><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template> <template #desc><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
</MkSwitch> </MkSwitch>
</div> <MkRadios v-model="fontSize">
<div class="_content"> <template #desc>{{ $t('fontSize') }}</template>
<div>{{ $t('fontSize') }}</div> <option value="small"><span style="font-size: 14px;">Aa</span></option>
<MkRadio v-model="fontSize" value="small"><span style="font-size: 14px;">Aa</span></MkRadio> <option :value="null"><span style="font-size: 16px;">Aa</span></option>
<MkRadio v-model="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></MkRadio> <option value="large"><span style="font-size: 18px;">Aa</span></option>
<MkRadio v-model="fontSize" value="large"><span style="font-size: 18px;">Aa</span></MkRadio> <option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
<MkRadio v-model="fontSize" value="veryLarge"><span style="font-size: 20px;">Aa</span></MkRadio> </MkRadios>
</div> <MkRadios v-model="instanceTicker">
<div class="_content"> <template #desc>{{ $t('instanceTicker') }}</template>
<div>{{ $t('instanceTicker') }}</div> <option value="none">{{ $t('_instanceTicker.none') }}</option>
<MkRadio v-model="instanceTicker" value="none">{{ $t('_instanceTicker.none') }}</MkRadio> <option value="remote">{{ $t('_instanceTicker.remote') }}</option>
<MkRadio v-model="instanceTicker" value="remote">{{ $t('_instanceTicker.remote') }}</MkRadio> <option value="always">{{ $t('_instanceTicker.always') }}</option>
<MkRadio v-model="instanceTicker" value="always">{{ $t('_instanceTicker.always') }}</MkRadio> </MkRadios>
</div> </div>
</section> </section>