summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/SettingsModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/SettingsModule.vue')
-rw-r--r--webapp/src/components/SettingsModule.vue110
1 files changed, 85 insertions, 25 deletions
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index a1c2909..8fea4d2 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -1,24 +1,24 @@
<i18n>
{
"en": {
+ "ui": "User Interface",
"darkTheme": "Dark Theme",
"coloredTabs": "Colored tabpanels",
"clipped": "Show menu under the top bar",
"mini": "Show icons in collapsed menu",
"language": "Language",
"general": "General",
- "generalSettings": "General settings",
"appearance": "Appearance",
"noAnimations": "Disable animations"
},
"de": {
+ "ui": "Benutzeroberfläche",
"darkTheme": "Dunkles Design",
"coloredTabs": "Tab-Panels einfärben",
"clipped": "Menü an die Hauptleiste andocken",
"mini": "Symbole im eingeklappten Menü anzeigen",
"language": "Sprache",
"general": "Allgemein",
- "generalSettings": "Allgemeine Einstellungen",
"appearance": "Aussehen",
"noAnimations": "Animationen ausschalten"
}
@@ -26,7 +26,7 @@
</i18n>
<template>
- <v-container fill-height :key="key">
+ <v-container :key="key">
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
@@ -34,35 +34,98 @@
v-model="tab"
centered
grow
+ hide-slider
>
<v-tab>
- <v-icon class="tabbar-tabicon">settings_applications</v-icon>{{ $t('general') }}
- </v-tab>
- <v-tab>
- <v-icon class="tabbar-tabicon">color_lens</v-icon>{{ $t('appearance') }}
+ <v-icon class="tabbar-tabicon">desktop_windows</v-icon>{{ $t('ui') }}
</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tab">
<v-tab-item>
- <v-subheader>{{ $t('generalSettings') }}</v-subheader>
- <v-card>
- <div class="element-container">
- <v-select :value="store.locale" @input="save('locale', $event)" :items="langChoices" :label="$t('language')" prepend-icon="language" :menu-props="{ offsetY: '' }"></v-select>
+ <v-layout wrap>
+ <v-flex xs12 md6>
+ <div :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }">
+ <v-subheader>{{ $t('general') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-select
+ style="max-width: 240px"
+ class="ma-3"
+ :value="store.locale"
+ @input="save('locale', $event)"
+ :items="langChoices"
+ :label="$t('language')"
+ prepend-icon="language"
+ :menu-props="{ offsetY: '' }"
+ hide-details
+ ></v-select>
+ </v-card-text>
+ </v-card>
+ </div>
+ </v-flex>
+ <v-flex xs12 md6>
+ <div :class="{ 'ml-3': $vuetify.breakpoint.mdAndUp }">
+ <v-subheader>{{ $t('appearance') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-switch
+ class="mx-3 my-3"
+ :input-value="store.dark"
+ @change="save('dark', $event)"
+ :label="$t('darkTheme')" color="primary"
+ prepend-icon="style"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4"
+ :input-value="store.coloredTabs"
+ @change="save('coloredTabs', $event)"
+ :label="$t('coloredTabs')"
+ color="primary"
+ prepend-icon="format_color_fill"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4 hidden-md-and-down"
+ :input-value="store.clipped"
+ @change="save('clipped', $event)"
+ :label="$t('clipped')"
+ color="primary"
+ prepend-icon="view_quilt"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-4 hidden-md-and-down"
+ :input-value="store.mini"
+ @change="save('mini', $event)"
+ :label="$t('mini')"
+ color="primary"
+ prepend-icon="view_list"
+ hide-details
+ ></v-switch>
+ <v-switch
+ class="mx-3 my-3"
+ :input-value="store.noAnimations"
+ @change="save('noAnimations', $event)"
+ :label="$t('noAnimations')"
+ color="primary"
+ prepend-icon="visibility_off"
+ hide-details
+ ></v-switch>
+ </v-card-text>
+ </v-card>
</div>
- </v-card>
+ </v-flex>
+ </v-layout>
</v-tab-item>
<v-tab-item>
- <v-subheader>{{ $t('generalSettings') }}</v-subheader>
- <v-card>
- <div class="element-container">
- <v-switch :input-value="store.dark" @change="save('dark', $event)" :label="$t('darkTheme')" color="primary" prepend-icon="style"></v-switch>
- <v-switch :input-value="store.coloredTabs" @change="save('coloredTabs', $event)" :label="$t('coloredTabs')" color="primary" prepend-icon="format_color_fill"></v-switch>
- <v-switch :input-value="store.clipped" @change="save('clipped', $event)" :label="$t('clipped')" color="primary" class="hidden-md-and-down" prepend-icon="view_quilt"></v-switch>
- <v-switch :input-value="store.mini" @change="save('mini', $event)" :label="$t('mini')" color="primary" class="hidden-md-and-down" prepend-icon="view_list"></v-switch>
- <v-switch :input-value="store.noAnimations" @change="save('noAnimations', $event)" :label="$t('noAnimations')" color="primary" prepend-icon="visibility_off"></v-switch>
- </div>
- </v-card>
+ <v-subheader>{{ $t('general') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ TODO
+ </v-card-text>
+ </v-card>
</v-tab-item>
</v-tabs-items>
</v-flex>
@@ -97,7 +160,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.element-container {
- padding: 26px;
-}
</style>