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.vue66
1 files changed, 51 insertions, 15 deletions
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index 2d3b781..ed23cc9 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -4,40 +4,81 @@
"darkTheme": "Dark Theme",
"coloredTabs": "Colored tabpanels",
"clipped": "Show menu under the top bar",
- "mini": "Show icons in collapsed menu"
+ "mini": "Show icons in collapsed menu",
+ "language": "Language",
+ "general": "General",
+ "generalSettings": "General settings",
+ "appearance": "Appearance"
},
"de": {
"darkTheme": "Dunkles Design",
"coloredTabs": "Tab-Panels einfärben",
"clipped": "Menü an die Hauptleiste andocken",
- "mini": "Symbole im eingeklappten Menü anzeigen"
+ "mini": "Symbole im eingeklappten Menü anzeigen",
+ "language": "Sprache",
+ "general": "Allgemein",
+ "generalSettings": "Allgemeine Einstellungen",
+ "appearance": "Aussehen"
}
}
</i18n>
<template>
- <v-container>
+ <v-container fill-height>
<v-layout>
- <v-flex md4 offset-md4 sm10 offset-sm1>
- <v-select :value="store.locale" @input="save('locale', $event)" class="lang-select" :items="langChoices" solo offset-y></v-select>
- <v-switch :input-value="store.dark" @change="save('dark', $event)" :label="$t('darkTheme')" color="primary"></v-switch>
- <v-switch :input-value="store.coloredTabs" @change="save('coloredTabs', $event)" :label="$t('coloredTabs')" color="primary"></v-switch>
- <v-switch :input-value="store.clipped" @change="save('clipped', $event)" :label="$t('clipped')" color="primary" class="hidden-md-and-down"></v-switch>
- <v-switch :input-value="store.mini" @change="save('mini', $event)" :label="$t('mini')" color="primary" class="hidden-md-and-down"></v-switch>
+ <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-card>
+ <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ v-model="tab"
+ centered
+ >
+ <v-tab>
+ <v-icon>settings_applications</v-icon>{{ $t('general') }}
+ </v-tab>
+ <v-tab>
+ <v-icon>color_lens</v-icon>{{ $t('appearance') }}
+ </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"></v-select>
+ </div>
+ </v-card>
+ </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="tab"></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>
+ </div>
+ </v-card>
+ </v-tab-item>
+ </v-tabs-items>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
+import { mapGetters } from 'vuex'
+
export default {
name: 'SettingsPage',
data () {
return {
- langChoices: [ { text: 'Deutsch', value: 'de' }, { text: 'English', value: 'en' } ]
+ langChoices: [ { text: 'Deutsch', value: 'de' }, { text: 'English', value: 'en' } ],
+ tab: ''
}
},
computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
store () { return this.$store.state.settings }
},
methods: {
@@ -49,9 +90,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.lang-select {
- margin-top: 40px;
- margin-bottom: 40px;
-}
-
</style>