lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: add loading state in preferences dialog

This commit is contained in:
tiny-craft 2023-07-19 18:41:04 +08:00
parent 2b3acc0e2b
commit c447f2cdf0
1 changed files with 81 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -67,6 +67,7 @@ const onClose = () => {
preset="dialog" preset="dialog"
transform-origin="center" transform-origin="center"
> >
<n-spin :show="loading">
<n-tabs v-model:value="tab" type="line" animated> <n-tabs v-model:value="tab" type="line" animated>
<n-tab-pane :tab="$t('general')" display-directive="show" name="general"> <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form <n-form
@ -78,7 +79,11 @@ const onClose = () => {
> >
<n-form-item :label="$t('theme')" required> <n-form-item :label="$t('theme')" required>
<n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium"> <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
<n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value"> <n-radio-button
v-for="opt in prefStore.themeOption"
:key="opt.value"
:value="opt.value"
>
{{ opt.label }} {{ opt.label }}
</n-radio-button> </n-radio-button>
</n-radio-group> </n-radio-group>
@ -91,7 +96,11 @@ const onClose = () => {
/> />
</n-form-item> </n-form-item>
<n-form-item :label="$t('font')" required> <n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable /> <n-select
v-model:value="prefStore.general.font"
:options="prefStore.fontOption"
filterable
/>
</n-form-item> </n-form-item>
<n-form-item :label="$t('font_size')"> <n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" /> <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
@ -123,7 +132,11 @@ const onClose = () => {
label-placement="left" label-placement="left"
> >
<n-form-item :label="$t('font')" required> <n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable /> <n-select
v-model:value="prefStore.editor.font"
:options="prefStore.fontOption"
filterable
/>
</n-form-item> </n-form-item>
<n-form-item :label="$t('font_size')"> <n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" /> <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
@ -131,14 +144,17 @@ const onClose = () => {
</n-form> </n-form>
</n-tab-pane> </n-tab-pane>
</n-tabs> </n-tabs>
</n-spin>
<template #action> <template #action>
<div class="flex-item-expand"> <div class="flex-item-expand">
<n-button @click="prefStore.restorePreferences">{{ $t('restore_defaults') }}</n-button> <n-button :disabled="loading" @click="prefStore.restorePreferences">{{
$t('restore_defaults')
}}</n-button>
</div> </div>
<div class="flex-item n-dialog__action"> <div class="flex-item n-dialog__action">
<n-button @click="onClose">{{ $t('cancel') }}</n-button> <n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button> <n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button>
</div> </div>
</template> </template>
</n-modal> </n-modal>