changeset 3167:85734c763652

client: layers: moved refresh button from zoom controls to layers dialog
author Markus Kottlaender <markus@intevation.de>
date Mon, 06 May 2019 15:13:57 +0200
parents 286c2e3cc105
children cfe7941dc044
files client/src/components/layers/Layers.vue client/src/components/map/Zoom.vue
diffstat 2 files changed, 23 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue	Mon May 06 14:29:02 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Mon May 06 15:13:57 2019 +0200
@@ -6,7 +6,12 @@
     ]"
   >
     <div class="position-relative" style="width: 18rem; min-height: 350px;">
-      <UIBoxHeader icon="layer-group" :title="label" :closeCallback="close" />
+      <UIBoxHeader
+        icon="layer-group"
+        :title="label"
+        :closeCallback="close"
+        :actions="[{ callback: refreshLayers, icon: 'sync' }]"
+      />
       <div class="small" v-if="openLayersMaps.length">
         <Layerselect layerId="OPENSTREETMAP" />
         <Layerselect layerId="INLANDECDIS" />
@@ -46,6 +51,7 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState } from "vuex";
+import { Vector as VectorLayer } from "ol/layer";
 
 export default {
   components: {
@@ -61,6 +67,21 @@
   methods: {
     close() {
       this.$store.commit("application/showLayers", false);
+    },
+    refreshLayers() {
+      this.openLayersMaps.forEach(map => {
+        let layers = map.getLayers().getArray();
+        for (let i = 0; i < layers.length; i++) {
+          let layer = layers[i];
+          if (
+            layer instanceof VectorLayer &&
+            layer.get("source").loader_.name != "VOID"
+          ) {
+            layer.getSource().clear(true);
+            layer.getSource().refresh({ force: true });
+          }
+        }
+      });
     }
   }
 };
--- a/client/src/components/map/Zoom.vue	Mon May 06 14:29:02 2019 +0200
+++ b/client/src/components/map/Zoom.vue	Mon May 06 15:13:57 2019 +0200
@@ -7,12 +7,6 @@
       <font-awesome-icon icon="minus" />
     </button>
     <button
-      class="zoom-button border-0 bg-white ui-element border-right"
-      @click="refreshMap"
-    >
-      <font-awesome-icon icon="sync" />
-    </button>
-    <button
       class="zoom-button border-0 bg-white rounded-right ui-element border-right"
       @click="zoomIn"
     >
@@ -27,7 +21,7 @@
   z-index: 1
   bottom: $small-offset
   left: 50%
-  margin-left: -($icon-width * 1.5)
+  margin-left: -$icon-width
   margin-bottom: 0
   transition: margin-bottom 0.3s
 
@@ -54,8 +48,6 @@
  * Markus Kottländer <markus@intevation.de>
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { Vector as VectorLayer } from "ol/layer";
-
 export default {
   props: ["map"],
   computed: {
@@ -74,19 +66,6 @@
     },
     zoomOut() {
       this.zoomLevel = this.zoomLevel - 1;
-    },
-    refreshMap() {
-      let layers = this.map.getLayers().getArray();
-      for (let i = 0; i < layers.length; i++) {
-        let layer = layers[i];
-        if (
-          layer instanceof VectorLayer &&
-          layer.get("source").loader_.name != "VOID"
-        ) {
-          layer.getSource().clear(true);
-          layer.getSource().refresh({ force: true });
-        }
-      }
     }
   }
 };