Mercurial > gemma
comparison client/src/components/map/toolbar/Identify.vue @ 1414:92d9dec88add
added indicator to info button when identifiedFeatures are present
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 29 Nov 2018 10:29:57 +0100 |
parents | 2738a6ae9ad8 |
children | 9b81ac91a43e |
comparison
equal
deleted
inserted
replaced
1413:c5e004b97394 | 1414:92d9dec88add |
---|---|
1 <template> | 1 <template> |
2 <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> | 2 <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> |
3 <font-awesome-icon icon="info" :class="{'text-info': showIdentify}"></font-awesome-icon> | 3 <font-awesome-icon icon="info" :class="{'text-info': showIdentify}"></font-awesome-icon> |
4 <span :class="['indicator', { show: !showIdentify && (identifiedFeatures.length || currentMeasurement) }]"> | |
5 {{ badgeCount }} | |
6 </span> | |
4 </div> | 7 </div> |
5 </template> | 8 </template> |
6 | 9 |
7 <script> | 10 <script> |
8 /* This is Free Software under GNU Affero General Public License v >= 3.0 | 11 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
21 import { mapState } from "vuex"; | 24 import { mapState } from "vuex"; |
22 | 25 |
23 export default { | 26 export default { |
24 name: "identify", | 27 name: "identify", |
25 computed: { | 28 computed: { |
26 ...mapState("application", ["showIdentify"]) | 29 ...mapState("application", ["showIdentify"]), |
30 ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), | |
31 badgeCount() { | |
32 return this.identifiedFeatures.length + !!this.currentMeasurement; | |
33 } | |
27 } | 34 } |
28 }; | 35 }; |
29 </script> | 36 </script> |