Mercurial > gemma

annotate client/src/components/toolbar/Toolbar.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: component filestructure. remove admin/map hierarchy
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:22:20 +0100
parents client/src/components/map/toolbar/Toolbar.vue@9b81ac91a43e
children a08e0f532304
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>
1436
59c9dbb26bb0 moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents: 1435
diff changeset
2 <div class="ml-2">
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
3 <div
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
4 :class="
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
5 'rounded-top toolbar toolbar-' +
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
6 (expandToolbar ? 'expanded' : 'collapsed')
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
7 "
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
8 >
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
9 <Identify></Identify>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
10 <Layers></Layers>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
11 <Profiles></Profiles>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
12 <Linetool></Linetool>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
13 <Polygontool></Polygontool>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
14 <Pdftool></Pdftool>
1436
59c9dbb26bb0 moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents: 1435
diff changeset
15 </div>
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
16 <div
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
17 @click="$store.commit('application/expandToolbar', !expandToolbar)"
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
18 class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
19 >
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
20 <font-awesome-icon
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
21 :icon="expandToolbar ? 'angle-up' : 'angle-down'"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
22 ></font-awesome-icon>
1436
59c9dbb26bb0 moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents: 1435
diff changeset
23 </div>
1419
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
24 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
27 <style lang="scss">
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 // not scoped to affect nested components
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 // doen't work when put in application/assets/application.sass... why??? o_O
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
30 .toolbar {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
31 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
32 overflow: hidden;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
33 transition: max-height 0.4s;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
34 margin-bottom: auto;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
35 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
36
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
37 .toolbar-collapsed {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
38 max-height: 6rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
39 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
40
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
41 .toolbar-expanded {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
42 max-height: 100%;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
43 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
45 .toolbar-button {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
46 opacity: 0.96;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
47 color: #666;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
48 height: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
49 width: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
50 align-items: center;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
51 justify-content: center;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
52 display: flex;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
53 background: #fff;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
54 border-bottom: 1px solid #dee2e6;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
55 z-index: 2;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
56 pointer-events: auto;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
57 position: relative;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
58 overflow: hidden;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
59 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
61 .toolbar-button:last-child {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
62 border-bottom: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
63 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
64
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
65 .toolbar-button .inverted {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
66 color: #17a2b8;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
67 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
68
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
69 .toolbar-button .grey {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
70 color: #ddd;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
71 }
1419
24b7f71c4406 made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents: 1414
diff changeset
72
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
73 .toolbar-button .indicator {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
74 color: #fff;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
75 background: #17a2b8;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
76 position: absolute;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
77 bottom: -14px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
78 left: -14px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
79 padding: 2px 4px 1px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
80 font-size: 11px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
81 line-height: 11px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
82 border-top-right-radius: 0.25rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
83 transition: bottom 0.3s, left 0.3s;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
84 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
85
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
86 .toolbar-button .indicator.show {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
87 left: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
88 bottom: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
89 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
90
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
91 .toolbar-toggle {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
92 height: 1.2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
93 border-bottom: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
94 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 </style>
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 <script>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 /* 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
99 * without warranty, see README.md and license for details.
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 * License-Filename: LICENSES/AGPL-3.0.txt
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 * Copyright (C) 2018 by via donau
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 * Software engineering by Intevation GmbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 *
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 * Author(s):
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 * Markus Kottländer <markus.kottlaender@intevation.de>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 */
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 import { mapState, mapGetters } from "vuex";
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 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 name: "toolbar",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 components: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 Identify: () => import("./Identify.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 Layers: () => import("./Layers.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 Linetool: () => import("./Linetool.vue"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 Polygontool: () => import("./Polygontool.vue"),
1372
553aadd97087 new cross profile workflow (WIP)
Markus Kottlaender <markus@intevation.de>
parents: 1304
diff changeset
120 Profiles: () => import("./Profiles.vue"),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 Pdftool: () => import("./Pdftool.vue")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 computed: {
1434
5b8ab039a983 fixed wrong getter mapping
Markus Kottlaender <markus@intevation.de>
parents: 1424
diff changeset
124 ...mapGetters("map", ["getVSourceByName"]),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 ...mapState("application", ["expandToolbar"])
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 mounted() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 window.addEventListener("keydown", e => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 // Escape
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 if (e.keyCode === 27) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 this.lineTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 this.polygonTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 this.cutTool.setActive(false);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 this.$store.commit("map/setCurrentMeasurement", null);
1435
7fa030127b05 fixed panning problem
Markus Kottlaender <markus@intevation.de>
parents: 1434
diff changeset
136 this.$store.dispatch("map/enableIdentifyTool");
1424
4afbc615cfc2 little code cleanup
Markus Kottlaender <markus@intevation.de>
parents: 1422
diff changeset
137 this.getVSourceByName("Draw Tool").clear();
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 </script>