Mercurial > gemma
annotate client/src/components/Contextbox.vue @ 5454:b4216db975e3 uiimprovements
fix layout for contextbox content.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 14 Jul 2021 16:21:27 +0200 |
parents | 62caee603217 |
children | 7768f14f6535 |
rev | line source |
---|---|
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
2 <div :class="style"> |
5454
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
3 <Bottlenecks |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
4 style="min-width: 650px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
5 v-if="contextBoxContent === 'bottlenecks'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
6 /> |
3696
982816fca381
client: keep components in contextboxx alive
Markus Kottlaender <markus@intevation.de>
parents:
3298
diff
changeset
|
7 <keep-alive> |
5454
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
8 <Staging |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
9 style="min-width: 850px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
10 v-if="contextBoxContent === 'staging'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
11 /> |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
12 <Stretches |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
13 style="min-width: 850px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
14 v-if="contextBoxContent === 'stretches'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
15 /> |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
16 <Sections |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
17 style="min-width: 850px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
18 v-if="contextBoxContent === 'sections'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
19 /> |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
20 <ImportConfiguration |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
21 style="min-width: 850px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
22 v-if="contextBoxContent === 'importconfiguration'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
23 /> |
3696
982816fca381
client: keep components in contextboxx alive
Markus Kottlaender <markus@intevation.de>
parents:
3298
diff
changeset
|
24 </keep-alive> |
5454
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
25 <ImportOverview |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
26 style="min-width: 850px" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
27 v-if="contextBoxContent === 'importoverview'" |
b4216db975e3
fix layout for contextbox content.
Thomas Junk <thomas.junk@intevation.de>
parents:
5450
diff
changeset
|
28 /> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
29 </div> |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 </template> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
33 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 * without warranty, see README.md and license for details. |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 * SPDX-License-Identifier: AGPL-3.0-or-later |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 * License-Filename: LICENSES/AGPL-3.0.txt |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 * Copyright (C) 2018 by via donau |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 * – Österreichische Wasserstraßen-Gesellschaft mbH |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 * Software engineering by Intevation GmbH |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 * Author(s): |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 * Markus Kottländer <markus.kottlaender@intevation.de> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 */ |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 import { mapState } from "vuex"; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 export default { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 name: "contextbox", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 components: { |
2399 | 51 Bottlenecks: () => import("@/components/Bottlenecks"), |
3263
d23532a4d0c3
client: define stretches: renamed component file and moved to subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
3262
diff
changeset
|
52 Stretches: () => import("@/components/stretches/Stretches"), |
3298
ec27ee21f7bc
client: define sections: added route and support in context box
Markus Kottlaender <markus@intevation.de>
parents:
3263
diff
changeset
|
53 Sections: () => import("@/components/sections/Sections"), |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2972
diff
changeset
|
54 ImportOverview: () => import("@/components/importoverview/ImportOverview"), |
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2972
diff
changeset
|
55 ImportConfiguration: () => import("@/components/importconfiguration/Import") |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 computed: { |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
58 ...mapState("application", [ |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
59 "showSearchbarLastState", |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
60 "contextBoxContent", |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
61 "showContextBox" |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
62 ]), |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 style() { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 return [ |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
65 "ui-element shadow-xs contextbox", |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 { |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
67 contextboxcollapsed: !this.showContextBox, |
5450
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
68 contextboxextended: |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
69 this.showContextBox && this.contextBoxContent !== "bottlenecks", |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
70 contextboxbottlenecks: |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
71 this.showContextBox && this.contextBoxContent === "bottlenecks", |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
72 "rounded-bottom": this.contextBoxContent !== "imports", |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
73 rounded: this.contextBoxContent === "imports" |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 ]; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 methods: { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 close() { |
3261
916d4c898f08
client: import stretches: prevent map/identify popup from opening when selecting a distance mark on the map
Markus Kottlaender <markus@intevation.de>
parents:
3012
diff
changeset
|
80 this.$store.commit("map/mapPopupEnabled", true); |
2282
2e40909a975d
clean searchbar when context is changed
Thomas Junk <thomas.junk@intevation.de>
parents:
2154
diff
changeset
|
81 this.$store.commit("application/searchQuery", ""); |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1278
diff
changeset
|
82 this.$store.commit("application/showContextBox", false); |
4374
ad2bf9580696
importoverview: review of fairwaydimensions improved
Thomas Junk <thomas.junk@intevation.de>
parents:
3708
diff
changeset
|
83 this.$store.commit("map/reviewActive", false); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 this.$store.commit( |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 "application/showSearchbar", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 this.showSearchbarLastState |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 ); |
2329
514193fd0120
refac: improve routing structure. We now have /bottlenecks, /stretches, /review routes
Thomas Junk <thomas.junk@intevation.de>
parents:
2282
diff
changeset
|
88 this.$router.push("/"); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 }; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 </script> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 |
1449 | 94 <style lang="scss" scoped> |
95 .contextbox { | |
96 position: relative; | |
97 background-color: #ffffff; | |
98 opacity: $slight-transparent; | |
99 transition: max-width 0.3s, max-height 0.3s; | |
100 overflow: hidden; | |
101 background: #fff; | |
102 } | |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 |
1449 | 104 .contextboxcollapsed { |
105 max-width: 0; | |
106 max-height: 0; | |
107 } | |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 |
1449 | 109 .contextboxextended { |
5450
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
110 max-width: 858px; |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
111 transition: 0.1s; |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
112 transition-timing-function: ease; |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
113 } |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
114 |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
115 .contextboxbottlenecks { |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
116 max-width: 650px; |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
117 transition: 0.1s; |
62caee603217
Make BN-Overview smaller.
Thomas Junk <thomas.junk@intevation.de>
parents:
4981
diff
changeset
|
118 transition-timing-function: ease; |
1449 | 119 } |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 |
1449 | 121 .close-contextbox { |
122 position: absolute; | |
123 z-index: 2; | |
124 right: 0; | |
125 top: 7px; | |
126 height: $icon-width; | |
127 width: $icon-height; | |
128 } | |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 </style> |