Skip to content

Commit 4e1abc5

Browse files
JanisVJanisV
committed
Improve Settings UI
1 parent 22a9070 commit 4e1abc5

2 files changed

Lines changed: 77 additions & 70 deletions

File tree

‎frontend/src/components/SettingsView.vue‎

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -42,84 +42,88 @@ const handleThemeChange = (theme) => {
4242
</script>
4343

4444
<template>
45-
<v-container>
46-
<v-list>
47-
<v-list-item :title="i18n.global.t('settings_theme')">
48-
<template v-slot:append>
49-
<v-list-item-action start>
50-
<v-btn-toggle
51-
v-model="currentTheme"
52-
rounded="xl"
53-
border
54-
@update:model-value="handleThemeChange"
55-
>
56-
<v-btn value="dark" icon="mdi-weather-night"></v-btn>
57-
<v-btn value="system" icon="mdi-brightness-auto"></v-btn>
58-
<v-btn value="light" icon="mdi-weather-sunny"></v-btn>
59-
</v-btn-toggle>
60-
</v-list-item-action>
61-
</template>
62-
</v-list-item>
63-
<v-list-item :title="i18n.global.t('settings_language')">
64-
<template v-slot:append>
65-
<v-list-item-action start>
66-
<v-select
67-
v-model="$i18n.locale"
68-
:items="languageItems"
69-
item-title="name"
70-
item-value="lang"
71-
@update:model-value="setLocale"
72-
density="comfortable"
73-
hide-details
74-
>
75-
</v-select>
76-
</v-list-item-action>
77-
</template>
78-
</v-list-item>
79-
<v-list-item :title="i18n.global.t('settings_status')">
80-
<template v-slot:append>
81-
<v-list-item-action start>
82-
<v-select
83-
v-model="statusPresentation"
84-
:items="statusItems"
85-
:item-title="item => i18n.global.t(item.title)"
86-
density="comfortable"
87-
hide-details
88-
>
89-
</v-select>
90-
</v-list-item-action>
91-
</template>
92-
</v-list-item>
93-
<v-list-item :title="i18n.global.t('settings_image_view')">
94-
<template v-slot:append>
95-
<v-list-item-action start>
96-
<v-select
97-
v-model="imagePresentation"
98-
:items="imageViewItems"
99-
:item-title="item => i18n.global.t(item.title)"
100-
density="comfortable"
101-
hide-details
102-
>
103-
</v-select>
104-
</v-list-item-action>
105-
</template>
106-
</v-list-item>
107-
</v-list>
108-
</v-container>
109-
<v-container v-if="!isServerLess">
110-
<v-list>
45+
<v-list>
46+
<v-list-subheader>
47+
{{ i18n.global.t('Interface') }}
48+
</v-list-subheader>
49+
<v-divider />
50+
<v-list-item :title="i18n.global.t('settings_theme')">
51+
<template v-slot:append>
52+
<v-list-item-action start>
53+
<v-btn-toggle
54+
v-model="currentTheme"
55+
rounded="xl"
56+
border
57+
@update:model-value="handleThemeChange"
58+
>
59+
<v-btn value="dark" icon="mdi-weather-night"></v-btn>
60+
<v-btn value="system" icon="mdi-brightness-auto"></v-btn>
61+
<v-btn value="light" icon="mdi-weather-sunny"></v-btn>
62+
</v-btn-toggle>
63+
</v-list-item-action>
64+
</template>
65+
</v-list-item>
66+
<v-list-item :title="i18n.global.t('settings_language')">
67+
<template v-slot:append>
68+
<v-list-item-action start>
69+
<v-select
70+
v-model="$i18n.locale"
71+
:items="languageItems"
72+
item-title="name"
73+
item-value="lang"
74+
@update:model-value="setLocale"
75+
density="comfortable"
76+
hide-details
77+
>
78+
</v-select>
79+
</v-list-item-action>
80+
</template>
81+
</v-list-item>
82+
<v-list-item :title="i18n.global.t('settings_status')">
83+
<template v-slot:append>
84+
<v-list-item-action start>
85+
<v-select
86+
v-model="statusPresentation"
87+
:items="statusItems"
88+
:item-title="item => i18n.global.t(item.title)"
89+
density="comfortable"
90+
hide-details
91+
>
92+
</v-select>
93+
</v-list-item-action>
94+
</template>
95+
</v-list-item>
96+
<v-list-item :title="i18n.global.t('settings_image_view')">
97+
<template v-slot:append>
98+
<v-list-item-action start>
99+
<v-select
100+
v-model="imagePresentation"
101+
:items="imageViewItems"
102+
:item-title="item => i18n.global.t(item.title)"
103+
density="comfortable"
104+
hide-details
105+
>
106+
</v-select>
107+
</v-list-item-action>
108+
</template>
109+
</v-list-item>
110+
<template v-if="!isServerLess">
111+
<v-list-subheader>
112+
{{ i18n.global.t('Server') }}
113+
</v-list-subheader>
114+
<v-divider />
111115
<v-list-item>
112116
<v-list-item-action start>
113117
<v-text-field
114-
label="API Key"
118+
:label="i18n.global.t('API Key')"
115119
v-model="apiKey"
116120
density="comfortable"
117121
hide-details
118122
/>
119123
</v-list-item-action>
120124
</v-list-item>
121-
</v-list>
122-
</v-container>
125+
</template>
126+
</v-list>
123127
</template>
124128

125129
<style scoped>

‎frontend/src/i18n/en.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,8 @@
4545
"Paid": "Paid",
4646
"commission": "commission",
4747
"Average paid per item": "Average paid per item",
48-
"First purchase": "First purchase"
48+
"First purchase": "First purchase",
49+
"Interface": "Interface",
50+
"Server": "Server",
51+
"API Key": "API Key"
4952
}

0 commit comments

Comments
 (0)