Mercurial > gemma
annotate client/src/components/toolbar/Toolbar.vue @ 3044:c71373594719
client: map: prepared store to hold multiple map objects
This will be necessary to sync maps, toggle layers per map, etc. Therefore the methods to move the map
(moveToExtent, etc.) became actions instead of mutations.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Sat, 13 Apr 2019 16:02:06 +0200 |
| parents | 188fb0133e50 |
| children | 051a3f446ac2 |
| rev | line source |
|---|---|
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
|
2534
bb5286acfee2
client: reduced spacings between and inside boxes and more compact main menu
Markus Kottlaender <markus@intevation.de>
parents:
2355
diff
changeset
|
2 <div class="ml-1"> |
| 1480 | 3 <div |
| 4 :class=" | |
| 5 'rounded-top toolbar toolbar-' + | |
| 6 (expandToolbar ? 'expanded' : 'collapsed') | |
| 7 " | |
| 8 > | |
|
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
9 <Identify /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
10 <Layers /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
11 <Profiles /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
12 <Gauges /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
13 <Linetool /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
14 <Polygontool /> |
|
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
15 <Pdftool /> |
|
3028
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
16 <PaneControl /> |
|
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
17 </div> |
| 1449 | 18 <div |
| 19 @click="$store.commit('application/expandToolbar', !expandToolbar)" | |
| 20 class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" | |
| 21 > | |
| 1480 | 22 <font-awesome-icon |
|
2154
a08e0f532304
staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
23 class="pointer" |
| 1480 | 24 :icon="expandToolbar ? 'angle-up' : 'angle-down'" |
|
2919
6c5364ff0abb
client: removed a lot of unnecessary closing tags
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
25 /> |
|
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
26 </div> |
|
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
27 </div> |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 </template> |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 |
| 1449 | 30 <style lang="scss"> |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 // not scoped to affect nested components |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 // doen't work when put in application/assets/application.sass... why??? o_O |
| 1449 | 33 .toolbar { |
| 34 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); | |
| 35 overflow: hidden; | |
| 36 transition: max-height 0.4s; | |
| 37 margin-bottom: auto; | |
|
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
38 cursor: pointer; |
| 1449 | 39 } |
| 40 | |
| 41 .toolbar-collapsed { | |
| 42 max-height: 6rem; | |
| 43 } | |
| 44 | |
| 45 .toolbar-expanded { | |
| 46 max-height: 100%; | |
| 47 } | |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 |
| 1449 | 49 .toolbar-button { |
| 50 opacity: 0.96; | |
| 51 color: #666; | |
| 52 height: 2rem; | |
| 53 width: 2rem; | |
| 54 align-items: center; | |
| 55 justify-content: center; | |
| 56 display: flex; | |
| 57 background: #fff; | |
| 58 border-bottom: 1px solid #dee2e6; | |
| 59 z-index: 2; | |
| 60 pointer-events: auto; | |
| 61 position: relative; | |
| 62 overflow: hidden; | |
|
3028
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
63 &.disabled { |
|
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
64 color: #ccc; |
|
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
65 cursor: default; |
|
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
66 } |
| 1449 | 67 } |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 |
| 1449 | 69 .toolbar-button:last-child { |
| 70 border-bottom: none; | |
| 71 } | |
| 72 | |
| 73 .toolbar-button .inverted { | |
| 74 color: #17a2b8; | |
| 75 } | |
| 76 | |
| 77 .toolbar-button .grey { | |
| 78 color: #ddd; | |
| 79 } | |
|
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
80 |
| 1449 | 81 .toolbar-button .indicator { |
| 82 color: #fff; | |
| 83 background: #17a2b8; | |
| 84 position: absolute; | |
| 85 bottom: -14px; | |
| 86 left: -14px; | |
| 87 padding: 2px 4px 1px; | |
| 88 font-size: 11px; | |
| 89 line-height: 11px; | |
| 90 border-top-right-radius: 0.25rem; | |
| 91 transition: bottom 0.3s, left 0.3s; | |
| 92 } | |
| 93 | |
| 94 .toolbar-button .indicator.show { | |
| 95 left: 0; | |
| 96 bottom: 0; | |
| 97 } | |
| 98 | |
| 99 .toolbar-toggle { | |
| 100 height: 1.2rem; | |
| 101 border-bottom: none; | |
| 102 } | |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 </style> |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 <script> |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 /* 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
|
107 * without warranty, see README.md and license for details. |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 * |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 * SPDX-License-Identifier: AGPL-3.0-or-later |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 * License-Filename: LICENSES/AGPL-3.0.txt |
|
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 * Copyright (C) 2018 by via donau |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 * – Österreichische Wasserstraßen-Gesellschaft mbH |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 * Software engineering by Intevation GmbH |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 * |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 * Author(s): |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 * Markus Kottländer <markus.kottlaender@intevation.de> |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 */ |
|
3044
c71373594719
client: map: prepared store to hold multiple map objects
Markus Kottlaender <markus@intevation.de>
parents:
3028
diff
changeset
|
119 import { mapState, mapGetters } from "vuex"; |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 export default { |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 name: "toolbar", |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 components: { |
|
3028
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
124 PaneControl: () => import("./PaneControl"), |
|
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
125 Identify: () => import("./Identify"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
126 Layers: () => import("./Layers"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
127 Linetool: () => import("./Linetool"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
128 Polygontool: () => import("./Polygontool"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
129 Profiles: () => import("./Profiles"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
130 Gauges: () => import("./Gauges"), |
|
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
131 Pdftool: () => import("./Pdftool") |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 }, |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 computed: { |
|
3044
c71373594719
client: map: prepared store to hold multiple map objects
Markus Kottlaender <markus@intevation.de>
parents:
3028
diff
changeset
|
134 ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), |
|
c71373594719
client: map: prepared store to hold multiple map objects
Markus Kottlaender <markus@intevation.de>
parents:
3028
diff
changeset
|
135 ...mapState("application", ["expandToolbar", "panes"]), |
|
c71373594719
client: map: prepared store to hold multiple map objects
Markus Kottlaender <markus@intevation.de>
parents:
3028
diff
changeset
|
136 ...mapGetters("map", ["openLayersMap"]) |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 }, |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 mounted() { |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 window.addEventListener("keydown", e => { |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 // Escape |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 if (e.keyCode === 27) { |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 this.lineTool.setActive(false); |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 this.polygonTool.setActive(false); |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 this.cutTool.setActive(false); |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 this.$store.commit("map/setCurrentMeasurement", null); |
|
1435
7fa030127b05
fixed panning problem
Markus Kottlaender <markus@intevation.de>
parents:
1434
diff
changeset
|
146 this.$store.dispatch("map/enableIdentifyTool"); |
|
3006
44493664d40e
client: refactored layers config
Markus Kottlaender <markus@intevation.de>
parents:
2985
diff
changeset
|
147 this.openLayersMap |
|
44493664d40e
client: refactored layers config
Markus Kottlaender <markus@intevation.de>
parents:
2985
diff
changeset
|
148 .getLayer("DRAWTOOL") |
|
44493664d40e
client: refactored layers config
Markus Kottlaender <markus@intevation.de>
parents:
2985
diff
changeset
|
149 .getSource() |
|
44493664d40e
client: refactored layers config
Markus Kottlaender <markus@intevation.de>
parents:
2985
diff
changeset
|
150 .clear(); |
|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 } |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 }); |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 } |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 }; |
|
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 </script> |