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>