69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import {
|
|
folderViewModeOptions,
|
|
messageListDensityOptions,
|
|
messageListWidthOptions,
|
|
useMailSettingsStore,
|
|
} from '@/stores/mailSettingsStore'
|
|
|
|
const mailSettingsStore = useMailSettingsStore()
|
|
const { folderViewMode, messageListDensity, messageListWidth } = storeToRefs(mailSettingsStore)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pa-4">
|
|
<h3 class="text-h6 mb-4">Display Settings</h3>
|
|
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-title>Folder navigation style</v-list-item-title>
|
|
<v-list-item-subtitle>Choose how folders are displayed</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-select
|
|
v-model="folderViewMode"
|
|
:items="folderViewModeOptions"
|
|
item-value="value"
|
|
item-title="title"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="width: 150px"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Message list density</v-list-item-title>
|
|
<v-list-item-subtitle>Control row height and how much detail is shown</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-select
|
|
v-model="messageListDensity"
|
|
:items="messageListDensityOptions"
|
|
item-value="value"
|
|
item-title="title"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="width: 150px"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Message list width</v-list-item-title>
|
|
<v-list-item-subtitle>Set how wide the message list panel is</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-select
|
|
v-model="messageListWidth"
|
|
:items="messageListWidthOptions"
|
|
item-value="value"
|
|
item-title="title"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="width: 150px"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</template>
|