Mercurial > gemma

annotate client/src/components/map/toolbar/Toolbar.vue @ 1434:5b8ab039a983

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed wrong getter mapping
author Markus Kottlaender <markus@intevation.de>
date Fri, 30 Nov 2018 07:10:13 +0100
parents 4afbc615cfc2
children 7fa030127b05
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1419
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
2 <div :class="'ml-2 toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')">
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
3 <Identify></Identify>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
4 <Layers></Layers>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
5 <Profiles></Profiles>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
6 <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle bg-info text-white">
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
7 <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
8 </div>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
9 <Linetool></Linetool>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
10 <Polygontool></Polygontool>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
11 <Pdftool></Pdftool>
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
12 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 <style lang="sass">
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 // not scoped to affect nested components
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 // doen't work when put in application/assets/application.sass... why??? o_O
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 .toolbar
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
19 box-shadow: $shadow-xs
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 overflow: hidden
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 transition: max-height 0.4s
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
22 margin-bottom: auto
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
23 border-radius: $border-radius
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 .toolbar-collapsed
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
26 max-height: (3 * $icon-height) + 1.2rem
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 .toolbar-expanded
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 max-height: 100%
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 .toolbar-button
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 opacity: $slight-transparent
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 color: #666
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 height: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 width: $icon-height
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 align-items: center
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 justify-content: center
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 display: flex
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 background: #fff
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
40 border-bottom: 1px solid #dee2e6
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 z-index: 2
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 pointer-events: auto
1414
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
43 position: relative
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
44 overflow: hidden
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
45 &:last-child
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
46 border-bottom: none
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 .inverted
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 color: $color-info
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 .grey
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 color: #ddd
1414
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
51 .indicator
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
52 color: #fff
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
53 background: $color-info
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
54 position: absolute
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
55 bottom: -14px
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
56 left: -14px
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
57 padding: 2px 4px 1px
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
58 font-size: 11px
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
59 line-height: 11px
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
60 border-top-right-radius: $border-radius
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
61 transition: bottom 0.3s, left 0.3s
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
62 &.show
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
63 left: 0
92d9dec88add added indicator to info button when identifiedFeatures are present
Markus Kottlaender <markus@intevation.de>
parents: 1372
diff changeset
64 bottom: 0
1419
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
65
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
66 .toolbar-toggle
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
67 height: 1.2rem
1422
7e4b7935b63a removed spacings between buttons in toolbar
Markus Kottlaender <markus@intevation.de>
parents: 1419
diff changeset
68 border-bottom: none
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 <script>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 /* This is Free Software under GNU Affero General Public License v >= 3.0
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 * without warranty, see README.md and license for details.
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 * License-Filename: LICENSES/AGPL-3.0.txt
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 * Copyright (C) 2018 by via donau
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 * Software engineering by Intevation GmbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 * Author(s):
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 * Markus Kottländer <markus.kottlaender@intevation.de>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 */
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 import { mapState, mapGetters } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 name: "toolbar",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 components: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 Identify: () => import("./Identify.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 Layers: () => import("./Layers.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 Linetool: () => import("./Linetool.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 Polygontool: () => import("./Polygontool.vue"),
1372
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1304
diff changeset
94 Profiles: () => import("./Profiles.vue"),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 Pdftool: () => import("./Pdftool.vue")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 computed: {
1434
5b8ab039a983 fixed wrong getter mapping
Markus Kottlaender <markus@intevation.de>
parents: 1424
diff changeset
98 ...mapGetters("map", ["getVSourceByName"]),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 ...mapState("application", ["expandToolbar"])
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 mounted() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 window.addEventListener("keydown", e => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 // Escape
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 if (e.keyCode === 27) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 this.lineTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 this.polygonTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 this.cutTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 this.$store.commit("map/setCurrentMeasurement", null);
1424
4afbc615cfc2 little code cleanup
Markus Kottlaender <markus@intevation.de>
parents: 1422
diff changeset
110 this.getVSourceByName("Draw Tool").clear();
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 </script>