Mercurial > gemma

comparison client/src/components/Contextbox.vue @ 1558:0ded4c56978e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: component filestructure. remove admin/map hierarchy
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:22:20 +0100
parents client/src/components/map/contextbox/Contextbox.vue@bb47531bdd22
children 38f91897ca69
comparison
equal deleted inserted replaced
1557:62171cd9a42b 1558:0ded4c56978e
1 <template>
2 <div :class="style">
3 <div @click="close" class="ui-element close-contextbox text-muted">
4 <font-awesome-icon icon="times"></font-awesome-icon>
5 </div>
6 <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
7 <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
8 <Staging v-if="contextBoxContent === 'staging'"></Staging>
9 </div>
10 </template>
11
12 <script>
13 /* This is Free Software under GNU Affero General Public License v >= 3.0
14 * without warranty, see README.md and license for details.
15 *
16 * SPDX-License-Identifier: AGPL-3.0-or-later
17 * License-Filename: LICENSES/AGPL-3.0.txt
18 *
19 * Copyright (C) 2018 by via donau
20 * – Österreichische Wasserstraßen-Gesellschaft mbH
21 * Software engineering by Intevation GmbH
22 *
23 * Author(s):
24 * Markus Kottländer <markus.kottlaender@intevation.de>
25 */
26 import { mapState } from "vuex";
27
28 export default {
29 name: "contextbox",
30 components: {
31 Bottlenecks: () => import("./Bottlenecks"),
32 Importsounding: () => import("./ImportSoundingresults.vue"),
33 Staging: () => import("./Staging.vue")
34 },
35 computed: {
36 ...mapState("application", [
37 "showSearchbarLastState",
38 "contextBoxContent",
39 "showContextBox"
40 ]),
41 style() {
42 return [
43 "ui-element shadow-xs contextbox",
44 {
45 contextboxcollapsed: !this.showContextBox,
46 contextboxextended: this.showContextBox,
47 "rounded-bottom": this.contextBoxContent !== "imports",
48 rounded: this.contextBoxContent === "imports"
49 }
50 ];
51 }
52 },
53 methods: {
54 close() {
55 this.$store.commit("application/showContextBox", false);
56 this.$store.commit(
57 "application/showSearchbar",
58 this.showSearchbarLastState
59 );
60 }
61 }
62 };
63 </script>
64
65 <style lang="scss" scoped>
66 .contextbox {
67 position: relative;
68 background-color: #ffffff;
69 opacity: $slight-transparent;
70 transition: max-width 0.3s, max-height 0.3s;
71 overflow: hidden;
72 background: #fff;
73 }
74 .contextbox > div:last-child {
75 width: 600px;
76 }
77
78 .contextboxcollapsed {
79 max-width: 0;
80 max-height: 0;
81 }
82
83 .contextboxextended {
84 max-width: 600px;
85 max-height: 640px;
86 }
87
88 .close-contextbox {
89 position: absolute;
90 z-index: 2;
91 right: 0;
92 top: 7px;
93 height: $icon-width;
94 width: $icon-height;
95 }
96 </style>