Mercurial > gemma

annotate client/src/components/Splitscreen.vue @ 2551:298087ae22b3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: splitscreen: fixed z-index and animation bug
author Markus Kottlaender <markus@intevation.de>
date Fri, 08 Mar 2019 09:23:56 +0100
parents 9bf6b767a56a
children cea572694617
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 :class="[
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 'splitscreen bg-white d-flex flex-column ui-element',
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 { show: showSplitscreen }
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 ]"
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 >
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 <UIBoxHeader
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
9 :icon="config.icon"
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
10 :title="config.title"
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 :closeCallback="close"
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 :collapseCallback="collapse"
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 />
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 <div class="d-flex flex-fill">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 <transition name="fade">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 <div
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 class="loading d-flex justify-content-center align-items-center"
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 v-if="splitscreenLoading"
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 >
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 <font-awesome-icon icon="spinner" spin />
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 </div>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 </transition>
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
23 <component :is="config.component" />
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </div>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </div>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 </template>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 <style lang="sass" scoped>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 .splitscreen
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 position: absolute
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 bottom: -50vh
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 left: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 right: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 height: 50vh
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 overflow: hidden
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
36 z-index: 1
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 transition: bottom 0.3s
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 &.show
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 bottom: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 .loading
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 background: rgba(255, 255, 255, 0.96)
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 position: absolute
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 z-index: 99
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 top: 34px
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 right: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 bottom: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 left: 0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 </style>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 <script>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 /* This is Free Software under GNU Affero General Public License v >= 3.0
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 * without warranty, see README.md and license for details.
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 *
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * SPDX-License-Identifier: AGPL-3.0-or-later
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 * License-Filename: LICENSES/AGPL-3.0.txt
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 *
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * Copyright (C) 2018 by via donau
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * – Österreichische Wasserstraßen-Gesellschaft mbH
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * Software engineering by Intevation GmbH
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 *
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Author(s):
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * Markus Kottländer <markus.kottlaender@intevation.de>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 */
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 import { mapState } from "vuex";
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 export default {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 components: {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 Fairwayprofile: () => import("@/components/fairway/Fairwayprofile")
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 },
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 computed: {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 ...mapState("application", [
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 "splitscreen",
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 "showSplitscreen",
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 "splitscreenLoading"
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
77 ]),
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
78 config() {
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
79 return this.splitscreen || { title: "", icon: "", component: "" };
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
80 }
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 },
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 methods: {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 collapse() {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 this.$store.commit("application/showSplitscreen", false);
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
85 if (this.config.collapseCallback) this.config.collapseCallback();
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 },
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 close() {
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 this.$store.commit("application/showSplitscreen", false);
2551
298087ae22b3 client: splitscreen: fixed z-index and animation bug
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
89 if (this.config.closeCallback) this.config.closeCallback();
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 }
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 }
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 };
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 </script>