Mercurial > gemma
annotate client/src/components/toolbar/Toolbar.vue @ 3937:de4c557bbc47
hydrological_conditions: leverage mixin
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 10:03:11 +0200 |
parents | 869505c5087b |
children | 8f421cd3c746 |
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 /> |
3400
dc91d2b71a58
Reordered toll bar and collapse to info+layers only.
Sascha Wilde <wilde@intevation.de>
parents:
3233
diff
changeset
|
13 <AvailableFairwayDepth /> |
2940
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
14 <Linetool /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
15 <Polygontool /> |
601797a85a86
client: toolbar: merged pointer class into toolbar-button class
Markus Kottlaender <markus@intevation.de>
parents:
2919
diff
changeset
|
16 <Pdftool /> |
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 { | |
3400
dc91d2b71a58
Reordered toll bar and collapse to info+layers only.
Sascha Wilde <wilde@intevation.de>
parents:
3233
diff
changeset
|
42 max-height: 4rem; |
1449 | 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 */ |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
119 import { mapState } 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: { |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
124 Identify: () => import("./Identify"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
125 Layers: () => import("./Layers"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
126 Linetool: () => import("./Linetool"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
127 Polygontool: () => import("./Polygontool"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
128 Profiles: () => import("./Profiles"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
129 Gauges: () => import("./Gauges"), |
3159
4f4905b57fcf
toolbar: added statistics dialog component
Thomas Junk <thomas.junk@intevation.de>
parents:
3083
diff
changeset
|
130 Pdftool: () => import("./Pdftool"), |
3233
9a02b770c2e6
show_statistics: refac to fairwayavailability
Thomas Junk <thomas.junk@intevation.de>
parents:
3159
diff
changeset
|
131 AvailableFairwayDepth: () => import("./AvailableFairwayDepth") |
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: { |
3062
87e0422cffa7
client: draw/cut tools work now with multiple maps
Markus Kottlaender <markus@intevation.de>
parents:
3051
diff
changeset
|
134 ...mapState("application", ["expandToolbar"]) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 </script> |