changeset 941:8a80ef09a62c

client: improve identify * Remove trigger that unfolds the box when features are identified. Rationale: This makes the user interface too "jumpy". * Instead add a style change for the icon to indicate if data is available. It will use the bootstrap `text-info` style class. * Simplify code that detects if a bottleneck was identified.
author Bernhard Reiter <bernhard@intevation.de>
date Tue, 09 Oct 2018 17:00:49 +0200
parents be7b83638ec8
children 912d016275ee
files client/src/application/Morphtool.vue client/src/layers/Identify.vue
diffstat 2 files changed, 10 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue	Tue Oct 09 13:30:45 2018 +0200
+++ b/client/src/application/Morphtool.vue	Tue Oct 09 17:00:49 2018 +0200
@@ -98,7 +98,8 @@
       if (this.identifiedFeatures && !this.drawMode) {
         for (let feature of this.identifiedFeatures) {
           let id = feature.getId();
-          if (id && id.replace(/[.][^.]*$/, "") === "bottlenecks") {
+          // RegExp.prototype.test() works with number, str and undefined
+          if (/^bottlenecks\./.test(id)) {
             this.$store.commit("mapstore/setSelectedMorph", null);
             return feature;
           }
--- a/client/src/layers/Identify.vue	Tue Oct 09 13:30:45 2018 +0200
+++ b/client/src/layers/Identify.vue	Tue Oct 09 17:00:49 2018 +0200
@@ -1,7 +1,7 @@
 <template>
     <div class="identifymenu">
         <div @click="collapse" class="d-flex flex-column ui-element minimizer">
-            <div>
+          <div :class="infoStyle">
                 <i class="fa fa-info"></i>
             </div>
         </div>
@@ -87,11 +87,6 @@
       collapsed: true
     };
   },
-  watch: {
-    identifiedFeatures() {
-      this.collapsed = !this.identifiedFeatures;
-    }
-  },
   computed: {
     ...mapState("mapstore", ["identifiedFeatures"]),
     identifyStyle() {
@@ -103,6 +98,13 @@
         identifyexpanded: !this.collapsed,
         identifycollapsed: this.collapsed
       };
+    },
+    infoStyle() {
+      return {
+        info: true,
+        "text-info":
+          this.identifiedFeatures && this.identifiedFeatures.length > 0
+      };
     }
   },
   methods: {