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