summaryrefslogtreecommitdiffstats
path: root/webapp/src/components
diff options
context:
space:
mode:
authorUdo Walter2018-07-20 05:49:54 +0200
committerUdo Walter2018-07-20 05:49:54 +0200
commitbe1394e50b38f229260e267828cd880299b99393 (patch)
tree6deb141088fdf46d41cf48443a1b5e2478494326 /webapp/src/components
parent[webapp/devserver] api port for the webpack dev server proxy must now be set ... (diff)
downloadbas-be1394e50b38f229260e267828cd880299b99393.tar.gz
bas-be1394e50b38f229260e267828cd880299b99393.tar.xz
bas-be1394e50b38f229260e267828cd880299b99393.zip
[webapp/settings] added switch to enable colored tab panels
Diffstat (limited to 'webapp/src/components')
-rw-r--r--webapp/src/components/GroupModule.vue14
-rw-r--r--webapp/src/components/GroupModuleEditDialog.vue (renamed from webapp/src/components/GroupModuleEdit.vue)28
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue4
-rw-r--r--webapp/src/components/SettingsModule.vue11
4 files changed, 38 insertions, 19 deletions
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 6ad9279..123f847 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -12,7 +12,7 @@
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
<v-card>
- <v-tabs :value="activeTab" @input="updateActiveTab" slider-color="primary">
+ <v-tabs :value="activeTab" @input="updateActiveTab" :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
<template v-for="(group, index) in groupChain">
<v-icon v-if="group.id > 0" :key="2*index">keyboard_arrow_right</v-icon>
<v-tab :key="2*index+1" ripple>
@@ -31,19 +31,20 @@
</v-tabs-items>
</v-flex>
</v-layout>
+ <group-module-edit-dialog />
</v-container>
</template>
<script>
import GroupModuleGroupView from '@/components/GroupModuleGroupView'
-import GroupModuleEdit from '@/components/GroupModuleEdit'
-import { mapState } from 'vuex'
+import GroupModuleEditDialog from '@/components/GroupModuleEditDialog'
+import { mapState, mapGetters } from 'vuex'
export default {
name: 'GroupModule',
components: {
GroupModuleGroupView,
- GroupModuleEdit
+ GroupModuleEditDialog
},
data () {
return {
@@ -53,6 +54,7 @@ export default {
}
},
computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
...mapState('groups', ['groupChain', 'activeTab'])
},
methods: {
@@ -61,7 +63,9 @@ export default {
}
},
created () {
- this.$store.dispatch('groups/loadGroup', { tabIndex: 0, id: 0 })
+ if (this.$store.state.groups.groupChain == null || this.$store.state.groups.groupChain.length === 0) {
+ this.$store.dispatch('groups/loadGroupInChain', { tabIndex: 0, id: 0 })
+ }
}
}
</script>
diff --git a/webapp/src/components/GroupModuleEdit.vue b/webapp/src/components/GroupModuleEditDialog.vue
index 4b91269..8eab1e1 100644
--- a/webapp/src/components/GroupModuleEdit.vue
+++ b/webapp/src/components/GroupModuleEditDialog.vue
@@ -8,31 +8,35 @@
</i18n>
<template>
- <v-card>
- <div class="input-fields">
- <v-text-field v-model="name" label="Name" box color="primary"></v-text-field>
- </div>
- <div class="action-buttons text-xs-right">
- <v-btn flat @click="$emit('close')">Cancel</v-btn>
- <v-btn color="primary" @click="saveData">Save</v-btn>
- </div>
- </v-card>
+ <v-dialog :value="editDialog" @input="setEditDialog" max-width="600px">
+ <v-card>
+ <div class="input-fields">
+ <v-text-field v-model="name" label="Name" box color="primary"></v-text-field>
+ </div>
+ <div class="action-buttons text-xs-right">
+ <v-btn flat @click="$emit('close')">Cancel</v-btn>
+ <v-btn color="primary" @click="saveData">Save</v-btn>
+ </div>
+ </v-card>
+ </v-dialog>
</template>
<script>
+import { mapState, mapMutations } from 'vuex'
export default {
- name: 'GroupModuleEdit',
+ name: 'GroupModuleEditDialog',
props: ['id', 'client'],
data () {
return {
name: ''
}
},
- watch: {
- id () { this.loadData() }
+ computed: {
+ ...mapState('groups', ['editDialog'])
},
methods: {
+ ...mapMutations('groups', ['setEditDialog']),
loadData () {
if (!this.id) return
if (this.client) {
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index f427275..a9976f9 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -68,8 +68,8 @@ export default {
},
methods: {
loadGroup (group) {
- this.$store.dispatch('groups/loadGroup', {
- tabIndex: this.tabIndex + 1, id: group.id, name: group.name
+ this.$store.dispatch('groups/loadGroupInChain', {
+ tabIndex: this.tabIndex + 1, id: group.id, name: group.name, switchTab: true
})
}
}
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index dc20d71..262c2a2 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -2,11 +2,13 @@
{
"en": {
"darkTheme": "Dark Theme",
+ "coloredTabs": "Colored tabpanels",
"clipped": "Show menu under the top bar",
"mini": "Show icons in collapsed menu"
},
"de": {
"darkTheme": "Dunkles Design",
+ "coloredTabs": "Tab-Panels einfärben",
"clipped": "Menü an die Hauptleiste andocken",
"mini": "Symbole im eingeklappten Menü anzeigen"
}
@@ -30,6 +32,11 @@
color="primary"
></v-switch>
<v-switch
+ :label="$t('coloredTabs')"
+ v-model="coloredTabs"
+ color="primary"
+ ></v-switch>
+ <v-switch
:label="$t('clipped')"
v-model="clipped"
color="primary"
@@ -64,6 +71,10 @@ export default {
get () { return this.$store.state.dark },
set (value) { this.$store.commit('setDark', value) }
},
+ coloredTabs: {
+ get () { return this.$store.state.coloredTabs },
+ set (value) { this.$store.commit('setColoredTabs', value) }
+ },
clipped: {
get () { return this.$store.state.clipped },
set (value) { this.$store.commit('setClipped', value) }