Mercurial > gemma
annotate client/src/components/toolbar/Toolbar.vue @ 5736:55892008ec96 default tip
Fixed a bunch of corner cases in WG import.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Wed, 29 May 2024 19:02:42 +0200 |
parents | 84d01a536bec |
children |
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 /> |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5036
diff
changeset
|
10 <TimeSlider /> |
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
11 <Layers /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
12 <Profiles /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
13 <Gauges /> |
3400
dc91d2b71a58
Reordered toll bar and collapse to info+layers only.
Sascha Wilde <wilde@intevation.de>
parents:
3233
diff
changeset
|
14 <AvailableFairwayDepth /> |
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
15 <Linetool /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
16 <Polygontool /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
17 <Pdftool /> |
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
18 </div> |
1449 | 19 <div |
20 @click="$store.commit('application/expandToolbar', !expandToolbar)" | |
21 class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" | |
22 > | |
1480 | 23 <font-awesome-icon |
2154
a08e0f532304
staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
24 class="pointer" |
1480 | 25 :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
|
26 /> |
1436
59c9dbb26bb0
moved toolbar toggle button to bottom
Markus Kottlaender <markus@intevation.de>
parents:
1435
diff
changeset
|
27 </div> |
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
28 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
31 <style> |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
32 /* not scoped to affect nested components |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
33 // doen't work when put in application/assets/application.sass... why??? o_O */ |
1449 | 34 .toolbar { |
35 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); | |
36 overflow: hidden; | |
37 transition: max-height 0.4s; | |
38 margin-bottom: auto; | |
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
39 cursor: pointer; |
1449 | 40 } |
41 | |
42 .toolbar-collapsed { | |
3400
dc91d2b71a58
Reordered toll bar and collapse to info+layers only.
Sascha Wilde <wilde@intevation.de>
parents:
3233
diff
changeset
|
43 max-height: 4rem; |
1449 | 44 } |
45 | |
46 .toolbar-expanded { | |
47 max-height: 100%; | |
48 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 |
1449 | 50 .toolbar-button { |
51 opacity: 0.96; | |
52 color: #666; | |
53 height: 2rem; | |
54 width: 2rem; | |
55 align-items: center; | |
56 justify-content: center; | |
57 display: flex; | |
58 background: #fff; | |
59 border-bottom: 1px solid #dee2e6; | |
60 z-index: 2; | |
61 pointer-events: auto; | |
62 position: relative; | |
63 overflow: hidden; | |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
64 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
65 .toolbar-button.disabled { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
66 color: #ccc; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5040
diff
changeset
|
67 cursor: default; |
1449 | 68 } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 |
1449 | 70 .toolbar-button:last-child { |
71 border-bottom: none; | |
72 } | |
73 | |
74 .toolbar-button .inverted { | |
75 color: #17a2b8; | |
76 } | |
77 | |
78 .toolbar-button .grey { | |
79 color: #ddd; | |
80 } | |
1419
24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
Markus Kottlaender <markus@intevation.de>
parents:
1414
diff
changeset
|
81 |
1449 | 82 .toolbar-button .indicator { |
83 color: #fff; | |
84 background: #17a2b8; | |
85 position: absolute; | |
86 bottom: -14px; | |
87 left: -14px; | |
88 padding: 2px 4px 1px; | |
89 font-size: 11px; | |
90 line-height: 11px; | |
91 border-top-right-radius: 0.25rem; | |
92 transition: bottom 0.3s, left 0.3s; | |
93 } | |
94 | |
95 .toolbar-button .indicator.show { | |
96 left: 0; | |
97 bottom: 0; | |
98 } | |
99 | |
100 .toolbar-toggle { | |
101 height: 1.2rem; | |
102 border-bottom: none; | |
103 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 </style> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 <script> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 /* 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
|
108 * without warranty, see README.md and license for details. |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 * |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 * License-Filename: LICENSES/AGPL-3.0.txt |
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 * Copyright (C) 2018 by via donau |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 * Software engineering by Intevation GmbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 * |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 * Markus Kottländer <markus.kottlaender@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 */ |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
120 import { mapState } from "vuex"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 name: "toolbar", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 components: { |
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"), |
3159
4f4905b57fcf
toolbar: added statistics dialog component
Thomas Junk <thomas.junk@intevation.de>
parents:
3083
diff
changeset
|
131 Pdftool: () => import("./Pdftool"), |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3553
diff
changeset
|
132 AvailableFairwayDepth: () => import("./AvailableFairwayDepth"), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3553
diff
changeset
|
133 TimeSlider: () => import("./TimeSlider") |
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 computed: { |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
136 ...mapState("application", ["expandToolbar"]) |
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 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 </script> |