12
This commit is contained in:
@@ -6,75 +6,120 @@
|
||||
|
||||
<pn-scroll-list>
|
||||
<q-list separator>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="primary" rounded text-color="white" icon="mdi-translate" size="md" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<span>{{ $t('settings__language') }}</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
class="fix-input-right text-body1"
|
||||
v-model="locale"
|
||||
:options="localeOptions"
|
||||
dense
|
||||
borderless
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="primary" rounded text-color="white" icon="mdi-format-size" size="md" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<span>{{ $t('settings__font_size') }}</span>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<div class="flex justify-end">
|
||||
<q-btn
|
||||
@click="settingsStore.decreaseFontSize()"
|
||||
color="negative" flat
|
||||
icon="mdi-format-font-size-decrease"
|
||||
class="q-pa-sm q-mx-xs"
|
||||
:disable="!settingsStore.canDecrease"
|
||||
/>
|
||||
<q-btn
|
||||
@click="settingsStore.increaseFontSize()"
|
||||
color="positive" flat
|
||||
icon="mdi-format-font-size-increase"
|
||||
class="q-pa-sm q-mx-xs"
|
||||
:disable="!settingsStore.canIncrease"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item-label header>{{ $t('settings__software_title') }}</q-item-label>
|
||||
|
||||
<pn-item-btm-dialog
|
||||
title="settings__language"
|
||||
caption="settings__software_title"
|
||||
icon="mdi-translate"
|
||||
iconColor="primary"
|
||||
>
|
||||
<template #value>
|
||||
{{ localeOptions.find(el => el.value === locale)?.label }}
|
||||
</template>
|
||||
<pn-list-selector
|
||||
v-model="locale"
|
||||
:options="localeOptions"
|
||||
/>
|
||||
</pn-item-btm-dialog>
|
||||
|
||||
<pn-item-btm-dialog
|
||||
title="settings__font_size"
|
||||
caption="settings__software_title"
|
||||
icon="mdi-format-size"
|
||||
iconColor="primary"
|
||||
>
|
||||
<template #value>
|
||||
{{ $t(fontSizeLabel) }}
|
||||
</template>
|
||||
<pn-list-selector
|
||||
v-model="fontSize"
|
||||
:options="fontSizeOptions"
|
||||
/>
|
||||
</pn-item-btm-dialog>
|
||||
|
||||
<q-item-label class="q-mt-md" header>{{ $t('settings__bot_title') }}</q-item-label>
|
||||
|
||||
<pn-item-btm-dialog
|
||||
title="settings__language"
|
||||
caption="settings__bot_title"
|
||||
icon="mdi-translate"
|
||||
iconColor="primary"
|
||||
>
|
||||
<template #value>
|
||||
{{ localeOptions.find(el => el.value === localeBot)?.label }}
|
||||
</template>
|
||||
<pn-list-selector
|
||||
v-model="localeBot"
|
||||
:options="localeOptions"
|
||||
/>
|
||||
</pn-item-btm-dialog>
|
||||
<pn-item-btm-dialog
|
||||
title="settings__timezone"
|
||||
caption="settings__bot_title"
|
||||
icon="mdi-map-clock-outline"
|
||||
iconColor="primary"
|
||||
>
|
||||
<template #value>
|
||||
{{ timeZoneBot.tz }}
|
||||
{{ timeZoneBot.offsetString }}
|
||||
</template>
|
||||
|
||||
<pn-time-zone-selector
|
||||
v-model="timeZoneBot"
|
||||
:locale
|
||||
/>
|
||||
</pn-item-btm-dialog>
|
||||
</q-list>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, watch, computed, onMounted } from 'vue'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
import pnItemBtmDialog from 'components/pnItemBtmDialog.vue'
|
||||
import pnListSelector from 'components/pnListSelector.vue'
|
||||
import pnTimeZoneSelector from 'components/pnTimeZoneSelector.vue'
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const locale = ref('')
|
||||
const localeBot = ref('')
|
||||
const localeOptions = settingsStore.supportLocale
|
||||
|
||||
const locale = computed({
|
||||
get: () => settingsStore.settings.locale,
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
set: (value: string) => settingsStore.updateLocale(value)
|
||||
watch(locale, async (newValue) => {
|
||||
await settingsStore.updateSettings({ locale: newValue })
|
||||
})
|
||||
|
||||
watch(localeBot, async (newValue) => {
|
||||
await settingsStore.updateSettings({ localeBot: newValue })
|
||||
})
|
||||
|
||||
const fontSize = ref(14)
|
||||
const fontSizeOptions = settingsStore.supportFontSizes
|
||||
const fontSizeLabel = computed(() =>
|
||||
fontSizeOptions.find(el => el.value === fontSize.value)?.label ?? ''
|
||||
)
|
||||
|
||||
watch(fontSize, async (newValue) => {
|
||||
await settingsStore.updateSettings({ fontSize: newValue })
|
||||
})
|
||||
|
||||
const timeZoneBot = ref<{ tz: string, offset: number }>({ tz: '', offset: 1 })
|
||||
|
||||
watch(timeZoneBot, async (newValue) => {
|
||||
if (newValue) await settingsStore.updateSettings({ timeZoneBot: newValue })
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
locale.value = settingsStore.settings.locale
|
||||
localeBot.value = settingsStore.settings.localeBot
|
||||
fontSize.value = settingsStore.settings.fontSize
|
||||
timeZoneBot.value = settingsStore.settings.timeZoneBot
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-input-right :deep(.q-field__native) {
|
||||
justify-content: end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user