Mercurial > gemma

annotate client/src/components/toolbar/Toolbar.vue @ 5267:aca4bf7af270

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: remove mapState from import statement
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 10 Jun 2020 16:33:10 +0200
parents 066b76ef5e6a
children 84d01a536bec
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
3 <div
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
4 :class="
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
5 'rounded-top toolbar toolbar-' +
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
6 (expandToolbar ? 'expanded' : 'collapsed')
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
7 "
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
19 <div
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
20 @click="$store.commit('application/expandToolbar', !expandToolbar)"
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
21 class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
22 >
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
23 <font-awesome-icon
2154
a08e0f532304 staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents: 1558
diff changeset
24 class="pointer"
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
31 <style lang="scss">
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 // not scoped to affect nested components
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 // doen't work when put in application/assets/application.sass... why??? o_O
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
34 .toolbar {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
35 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
36 overflow: hidden;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
37 transition: max-height 0.4s;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
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
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
40 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
41
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
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
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
44 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
45
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
46 .toolbar-expanded {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
47 max-height: 100%;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
48 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
50 .toolbar-button {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
51 opacity: 0.96;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
52 color: #666;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
53 height: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
54 width: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
55 align-items: center;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
56 justify-content: center;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
57 display: flex;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
58 background: #fff;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
59 border-bottom: 1px solid #dee2e6;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
60 z-index: 2;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
61 pointer-events: auto;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
62 position: relative;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
63 overflow: hidden;
3028
188fb0133e50 client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents: 3006
diff changeset
64 &.disabled {
188fb0133e50 client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents: 3006
diff changeset
65 color: #ccc;
188fb0133e50 client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents: 3006
diff changeset
66 cursor: default;
188fb0133e50 client: panes: moved pane controls to toolbar
Markus Kottlaender <markus@intevation.de>
parents: 3006
diff changeset
67 }
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
68 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
70 .toolbar-button:last-child {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
71 border-bottom: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
72 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
73
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
74 .toolbar-button .inverted {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
75 color: #17a2b8;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
76 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
77
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
78 .toolbar-button .grey {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
79 color: #ddd;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
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
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
82 .toolbar-button .indicator {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
83 color: #fff;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
84 background: #17a2b8;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
85 position: absolute;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
86 bottom: -14px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
87 left: -14px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
88 padding: 2px 4px 1px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
89 font-size: 11px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
90 line-height: 11px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
91 border-top-right-radius: 0.25rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
92 transition: bottom 0.3s, left 0.3s;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
93 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
94
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
95 .toolbar-button .indicator.show {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
96 left: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
97 bottom: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
98 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
99
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
100 .toolbar-toggle {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
101 height: 1.2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
102 border-bottom: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1436
diff changeset
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>