Mercurial > gemma
comparison client/src/components/splitscreen/Splitscreen.vue @ 2566:83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 11 Mar 2019 11:34:54 +0100 |
parents | |
children | 1686ec185155 |
comparison
equal
deleted
inserted
replaced
2565:114979e97a6c | 2566:83b938bf4da9 |
---|---|
1 <template> | |
2 <div> | |
3 <div | |
4 :class="[ | |
5 'splitscreen bg-white d-flex flex-column ui-element', | |
6 { show: showSplitscreen } | |
7 ]" | |
8 > | |
9 <UIBoxHeader | |
10 :icon="activeSplitscreen.icon" | |
11 :title="activeSplitscreen.title" | |
12 :closeCallback="close" | |
13 :collapseCallback="collapse" | |
14 v-if="activeSplitscreen" | |
15 /> | |
16 <div class="d-flex flex-fill"> | |
17 <transition name="fade"> | |
18 <div | |
19 class="loading d-flex justify-content-center align-items-center" | |
20 v-if="splitscreenLoading" | |
21 > | |
22 <font-awesome-icon icon="spinner" spin /> | |
23 </div> | |
24 </transition> | |
25 <component :is="activeSplitscreen.component" v-if="activeSplitscreen" /> | |
26 </div> | |
27 </div> | |
28 </div> | |
29 </template> | |
30 | |
31 <style lang="sass" scoped> | |
32 .splitscreen | |
33 position: absolute | |
34 bottom: -50vh | |
35 left: 0 | |
36 right: 0 | |
37 height: 50vh | |
38 overflow: hidden | |
39 z-index: 1 | |
40 box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075) | |
41 transition: bottom 0.3s | |
42 &.show | |
43 bottom: 0 | |
44 | |
45 .loading | |
46 background: rgba(255, 255, 255, 0.96) | |
47 position: absolute | |
48 z-index: 99 | |
49 top: 34px | |
50 right: 0 | |
51 bottom: 0 | |
52 left: 0 | |
53 </style> | |
54 | |
55 <script> | |
56 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
57 * without warranty, see README.md and license for details. | |
58 * | |
59 * SPDX-License-Identifier: AGPL-3.0-or-later | |
60 * License-Filename: LICENSES/AGPL-3.0.txt | |
61 * | |
62 * Copyright (C) 2018 by via donau | |
63 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
64 * Software engineering by Intevation GmbH | |
65 * | |
66 * Author(s): | |
67 * Markus Kottländer <markus.kottlaender@intevation.de> | |
68 */ | |
69 | |
70 import { mapState, mapGetters } from "vuex"; | |
71 | |
72 export default { | |
73 components: { | |
74 Fairwayprofile: () => import("@/components/fairway/Fairwayprofile") | |
75 }, | |
76 computed: { | |
77 ...mapState("application", ["showSplitscreen", "splitscreenLoading"]), | |
78 ...mapGetters("application", ["activeSplitscreen"]) | |
79 }, | |
80 methods: { | |
81 collapse() { | |
82 if (this.activeSplitscreen.collapseCallback) | |
83 this.activeSplitscreen.collapseCallback(); | |
84 this.$store.commit("application/showSplitscreen", false); | |
85 }, | |
86 close() { | |
87 if (this.activeSplitscreen.closeCallback) | |
88 this.activeSplitscreen.closeCallback(); | |
89 this.$store.commit("application/showSplitscreen", false); | |
90 setTimeout(() => { | |
91 this.$store.commit( | |
92 "application/removeSplitscreen", | |
93 this.activeSplitscreen.id | |
94 ); | |
95 this.$store.commit("application/activeSplitscreen", null); | |
96 }, 350); | |
97 } | |
98 } | |
99 }; | |
100 </script> |