Mercurial > gemma
annotate client/src/components/toolbar/Toolbar.vue @ 3140:91556825d95c
client: implement geting templates from backend for waterlevel diagram
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 02 May 2019 12:59:52 +0200 |
parents | 18ab67c7241a |
children | 4f4905b57fcf |
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 /> |
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
16 </div> |
1449 | 17 <div |
18 @click="$store.commit('application/expandToolbar', !expandToolbar)" | |
19 class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" | |
20 > | |
1480 | 21 <font-awesome-icon |
2154
a08e0f532304
staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
22 class="pointer" |
1480 | 23 :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
|
24 /> |
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
25 </div> |
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
26 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 |
1449 | 29 <style lang="scss"> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 // not scoped to affect nested components |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 // doen't work when put in application/assets/application.sass... why??? o_O |
1449 | 32 .toolbar { |
33 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); | |
34 overflow: hidden; | |
35 transition: max-height 0.4s; | |
36 margin-bottom: auto; | |
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
37 cursor: pointer; |
1449 | 38 } |
39 | |
40 .toolbar-collapsed { | |
41 max-height: 6rem; | |
42 } | |
43 | |
44 .toolbar-expanded { | |
45 max-height: 100%; | |
46 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
1449 | 48 .toolbar-button { |
49 opacity: 0.96; | |
50 color: #666; | |
51 height: 2rem; | |
52 width: 2rem; | |
53 align-items: center; | |
54 justify-content: center; | |
55 display: flex; | |
56 background: #fff; | |
57 border-bottom: 1px solid #dee2e6; | |
58 z-index: 2; | |
59 pointer-events: auto; | |
60 position: relative; | |
61 overflow: hidden; | |
3028
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
62 &.disabled { |
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
63 color: #ccc; |
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
64 cursor: default; |
188fb0133e50
client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
65 } |
1449 | 66 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
1449 | 68 .toolbar-button:last-child { |
69 border-bottom: none; | |
70 } | |
71 | |
72 .toolbar-button .inverted { | |
73 color: #17a2b8; | |
74 } | |
75 | |
76 .toolbar-button .grey { | |
77 color: #ddd; | |
78 } | |
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
79 |
1449 | 80 .toolbar-button .indicator { |
81 color: #fff; | |
82 background: #17a2b8; | |
83 position: absolute; | |
84 bottom: -14px; | |
85 left: -14px; | |
86 padding: 2px 4px 1px; | |
87 font-size: 11px; | |
88 line-height: 11px; | |
89 border-top-right-radius: 0.25rem; | |
90 transition: bottom 0.3s, left 0.3s; | |
91 } | |
92 | |
93 .toolbar-button .indicator.show { | |
94 left: 0; | |
95 bottom: 0; | |
96 } | |
97 | |
98 .toolbar-toggle { | |
99 height: 1.2rem; | |
100 border-bottom: none; | |
101 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 </style> |
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 <script> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 /* 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
|
106 * without warranty, see README.md and license for details. |
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 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 * License-Filename: LICENSES/AGPL-3.0.txt |
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 * Copyright (C) 2018 by via donau |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 * Software engineering by Intevation GmbH |
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 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 * Markus Kottländer <markus.kottlaender@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 */ |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
118 import { mapState } from "vuex"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 name: "toolbar", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 components: { |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
123 Identify: () => import("./Identify"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
124 Layers: () => import("./Layers"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
125 Linetool: () => import("./Linetool"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
126 Polygontool: () => import("./Polygontool"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
127 Profiles: () => import("./Profiles"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
128 Gauges: () => import("./Gauges"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
129 Pdftool: () => import("./Pdftool") |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 computed: { |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
132 ...mapState("map", ["openLayersMaps"]), |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
133 ...mapState("application", ["expandToolbar"]) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 mounted() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 window.addEventListener("keydown", e => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 // Escape |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 if (e.keyCode === 27) { |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
139 this.$store.commit("map/lineToolEnabled", false); |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
140 this.$store.commit("map/polygonToolEnabled", false); |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
141 this.$store.commit("map/cutToolEnabled", false); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 this.$store.commit("map/setCurrentMeasurement", null); |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
143 this.openLayersMaps.forEach(m => { |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
144 m.getLayer("DRAWTOOL") |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
145 .getSource() |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
146 .clear(); |
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
147 }); |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 } |
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 </script> |