Mercurial > gemma
diff client/src/layers/Layers.vue @ 1123:d9e6a1f6f394 store-refactoring
moved all collapse flags for UI elements to store
UI elements can now be expanded/collapsed via the application store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 06 Nov 2018 13:00:17 +0100 |
parents | 035dc35e1dfc |
children | 2fda33d55d81 |
line wrap: on
line diff
--- a/client/src/layers/Layers.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/layers/Layers.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="layerselectmenu"> - <div @click="collapse" class="d-flex flex-column ui-element minimizer"> + <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer"> <div> <i class="fa fa-th-list"></i> </div> </div> <div :class="layerSelectStyle"> - <div v-if="!collapsed" class="card-body layers"> + <div v-if="showLayers" class="card-body layers"> <div class="headline"> <h4 class="card-title">Layers</h4> </div> @@ -68,34 +68,27 @@ * Thomas Junk <thomas.junk@intevation.de> */ import Layerselect from "./Layerselect"; -import { mapGetters } from "vuex"; +import { mapGetters, mapState } from "vuex"; export default { name: "layers", - data() { - return { - collapsed: false - }; - }, components: { Layerselect }, computed: { ...mapGetters("map", ["layersForLegend"]), + ...mapState("application", ["showLayers"]), layerSelectStyle() { return { "ui-element": true, card: true, layerselection: true, shadow: true, - layerselectionexpanded: !this.collapsed, - layerselectioncollapsed: this.collapsed + layerselectionexpanded: this.showLayers, + layerselectioncollapsed: !this.showLayers }; } }, methods: { - collapse() { - this.collapsed = !this.collapsed; - }, visibilityToggled(layer) { this.$store.commit("map/toggleVisibility", layer); }