perf: add loading state in preferences dialog
This commit is contained in:
parent
2b3acc0e2b
commit
c447f2cdf0
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue