changeset 2900:2097c3633f0a

client: added tooltips to toolbar buttons
author Markus Kottlaender <markus@intevation.de>
date Tue, 02 Apr 2019 14:52:38 +0200
parents eb9651074b88
children da1d063ee085 813671873536
files client/src/components/toolbar/Gauges.vue client/src/components/toolbar/Identify.vue client/src/components/toolbar/Layers.vue client/src/components/toolbar/Linetool.vue client/src/components/toolbar/Pdftool.vue client/src/components/toolbar/Polygontool.vue client/src/components/toolbar/Profiles.vue
diffstat 7 files changed, 34 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/toolbar/Gauges.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Gauges.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -2,6 +2,7 @@
   <div
     @click="$store.commit('application/showGauges', !showGauges)"
     class="toolbar-button"
+    v-tooltip="label"
   >
     <font-awesome-icon
       icon="ruler-vertical"
@@ -28,7 +29,10 @@
 
 export default {
   computed: {
-    ...mapState("application", ["showGauges"])
+    ...mapState("application", ["showGauges"]),
+    label() {
+      return this.$gettext("Gauges");
+    }
   }
 };
 </script>
--- a/client/src/components/toolbar/Identify.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Identify.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -2,6 +2,7 @@
   <div
     @click="$store.commit('application/showIdentify', !showIdentify)"
     class="toolbar-button"
+    v-tooltip="label"
   >
     <font-awesome-icon
       icon="info"
@@ -46,6 +47,9 @@
     ...mapGetters("map", ["filteredIdentifiedFeatures"]),
     badgeCount() {
       return this.filteredIdentifiedFeatures.length + !!this.currentMeasurement;
+    },
+    label() {
+      return this.$gettext("Identified Features");
     }
   }
 };
--- a/client/src/components/toolbar/Layers.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Layers.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -2,6 +2,7 @@
   <div
     @click="$store.commit('application/showLayers', !showLayers)"
     class="toolbar-button"
+    v-tooltip="label"
   >
     <font-awesome-icon
       icon="layer-group"
@@ -29,7 +30,10 @@
 export default {
   name: "layers",
   computed: {
-    ...mapState("application", ["showLayers"])
+    ...mapState("application", ["showLayers"]),
+    label() {
+      return this.$gettext("Map Layers");
+    }
   }
 };
 </script>
--- a/client/src/components/toolbar/Linetool.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Linetool.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -3,6 +3,7 @@
     <font-awesome-icon
       icon="ruler"
       :class="{ 'text-info': lineTool && lineTool.getActive() }"
+      v-tooltip="label"
     ></font-awesome-icon>
   </div>
 </template>
@@ -28,7 +29,10 @@
   name: "linetool",
   computed: {
     ...mapGetters("map", ["getVSourceByName"]),
-    ...mapState("map", ["lineTool", "polygonTool", "cutTool"])
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    label() {
+      return this.$gettext("Measure Distance");
+    }
   },
   methods: {
     toggleLineTool() {
--- a/client/src/components/toolbar/Pdftool.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Pdftool.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -2,6 +2,7 @@
   <div
     @click="$store.commit('application/showPdfTool', !showPdfTool)"
     class="toolbar-button"
+    v-tooltip="label"
   >
     <font-awesome-icon
       icon="file-pdf"
@@ -29,7 +30,10 @@
 export default {
   name: "pdftool",
   computed: {
-    ...mapState("application", ["showPdfTool"])
+    ...mapState("application", ["showPdfTool"]),
+    label() {
+      return this.$gettext("Generate PDF");
+    }
   }
 };
 </script>
--- a/client/src/components/toolbar/Polygontool.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Polygontool.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -3,6 +3,7 @@
     <font-awesome-icon
       icon="draw-polygon"
       :class="{ 'text-info': polygonTool && polygonTool.getActive() }"
+      v-tooltip="label"
     ></font-awesome-icon>
   </div>
 </template>
@@ -28,7 +29,10 @@
   name: "polygontool",
   computed: {
     ...mapGetters("map", ["getVSourceByName"]),
-    ...mapState("map", ["lineTool", "polygonTool", "cutTool"])
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    label() {
+      return this.$gettext("Measure Area");
+    }
   },
   methods: {
     togglePolygonTool() {
--- a/client/src/components/toolbar/Profiles.vue	Tue Apr 02 14:36:18 2019 +0200
+++ b/client/src/components/toolbar/Profiles.vue	Tue Apr 02 14:52:38 2019 +0200
@@ -2,6 +2,7 @@
   <div
     @click="$store.commit('application/showProfiles', !showProfiles)"
     class="toolbar-button"
+    v-tooltip="label"
   >
     <font-awesome-icon
       icon="chart-area"
@@ -29,7 +30,10 @@
 export default {
   name: "profiles",
   computed: {
-    ...mapState("application", ["showProfiles"])
+    ...mapState("application", ["showProfiles"]),
+    label() {
+      return this.$gettext("Profiles");
+    }
   }
 };
 </script>