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);
     }