Mercurial > gemma

comparison client/src/toolbar/Toolbar.vue @ 1247:c14353e2cdb9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
repositioning of buttons (issue225)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 08:15:28 +0100
parents
children 104d41ea7c15
comparison
equal deleted inserted replaced
1241:a45fa8943254 1247:c14353e2cdb9
1 <template>
2 <div class="ml-3">
3 <Identify></Identify>
4 <Layers></Layers>
5 <Linetool></Linetool>
6 <Polygontool></Polygontool>
7 <Cuttool></Cuttool>
8 <Pdftool></Pdftool>
9 </div>
10 </template>
11
12 <style lang="sass">
13 // not scoped to affect nested components
14 .toolbar-button
15 height: $icon-width
16 width: $icon-height
17 align-items: center
18 justify-content: center
19 display: flex
20 background: #fff
21 margin-bottom: $offset
22 border-radius: $border-radius
23 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
24 z-index: 2
25 pointer-events: auto
26 .inverted
27 color: #07f
28 .grey
29 color: #ddd
30 </style>
31
32 <script>
33 /* This is Free Software under GNU Affero General Public License v >= 3.0
34 * without warranty, see README.md and license for details.
35 *
36 * SPDX-License-Identifier: AGPL-3.0-or-later
37 * License-Filename: LICENSES/AGPL-3.0.txt
38 *
39 * Copyright (C) 2018 by via donau
40 * – Österreichische Wasserstraßen-Gesellschaft mbH
41 * Software engineering by Intevation GmbH
42 *
43 * Author(s):
44 * Markus Kottländer <markus.kottlaender@intevation.de>
45 */
46 import { mapState, mapGetters } from "vuex";
47
48 export default {
49 name: "toolbar",
50 components: {
51 Identify: () => import("./buttons/Identify.vue"),
52 Layers: () => import("./buttons/Layers.vue"),
53 Linetool: () => import("./buttons/Linetool.vue"),
54 Polygontool: () => import("./buttons/Polygontool.vue"),
55 Cuttool: () => import("./buttons/Cuttool.vue"),
56 Pdftool: () => import("./buttons/Pdftool.vue")
57 },
58 computed: {
59 ...mapGetters("map", ["getLayerByName"]),
60 ...mapState("map", ["lineTool", "polygonTool", "cutTool"])
61 },
62 mounted() {
63 window.addEventListener("keydown", e => {
64 // Escape
65 if (e.keyCode === 27) {
66 this.lineTool.setActive(false);
67 this.polygonTool.setActive(false);
68 this.cutTool.setActive(false);
69 this.$store.commit("map/setCurrentMeasurement", null);
70 this.getLayerByName("Draw Tool")
71 .data.getSource()
72 .clear();
73 }
74 });
75 }
76 };
77 </script>