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