Mercurial > gemma
annotate client/src/components/toolbar/Toolbar.vue @ 3553:869505c5087b
client: fairway profile: close compare view with ESC key
also added a notice at the top of the screen that indicates when ESC key can be used to either cancel drawing (line,
polygon, crosscut) or to close the compare split view for two sounding results
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Fri, 31 May 2019 14:32:24 +0200 |
| parents | dc91d2b71a58 |
| 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> |