Mercurial > gemma
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: {