Mercurial > gemma

comparison client/src/components/splitscreen/Splitscreen.vue @ 2566:83b938bf4da9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>