Mercurial > gemma

annotate client/src/components/map/contextbox/Contextbox.vue @ 1282:a7dd8a3356fc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed contextBox animations
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 10:20:21 +0100
parents 8f4bf8576acd
children 09dfbead8d70
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div :class="style">
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <div @click="close" class="ui-element close-contextbox text-muted">
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <i class="fa fa-close"></i>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
6 <transition name="fade" mode="out-in">
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
7 <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
8 <Imports v-if="contextBoxContent === 'imports'"></Imports>
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
9 <Staging v-if="contextBoxContent === 'staging'"></Staging>
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
10 </transition>
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </div>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 </template>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 <script>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 /*
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 * This is Free Software under GNU Affero General Public License v >= 3.0
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 * without warranty, see README.md and license for details.
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 *
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 * SPDX-License-Identifier: AGPL-3.0-or-later
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 * License-Filename: LICENSES/AGPL-3.0.txt
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 *
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 * Copyright (C) 2018 by via donau
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 * – Österreichische Wasserstraßen-Gesellschaft mbH
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 * Software engineering by Intevation GmbH
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 *
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 * Author(s):
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 * Markus Kottländer <markus.kottlaender@intevation.de>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 */
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 import { mapState } from "vuex";
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 export default {
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 name: "contextbox",
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 components: {
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 Bottlenecks: () => import("./Bottlenecks"),
1278
8f4bf8576acd removed directory with only one file
Markus Kottlaender <markus@intevation.de>
parents: 1276
diff changeset
35 Imports: () => import("./Imports.vue"),
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 Staging: () => import("./Staging.vue")
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 },
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 computed: {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
39 ...mapState("application", [
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
40 "showSearchbarLastState",
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
41 "contextBoxContent",
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
42 "showContextBox"
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
43 ]),
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 style() {
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 return [
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
46 "ui-element shadow-xs contextbox",
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
48 contextboxcollapsed: !this.showContextBox,
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
49 contextboxextended: this.showContextBox,
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
50 "rounded-bottom": this.contextBoxContent !== "imports",
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
51 rounded: this.contextBoxContent === "imports"
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 }
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 ];
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 }
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 },
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 methods: {
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 close() {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
58 this.$store.commit("application/showContextBox", false);
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 this.$store.commit(
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 "application/showSearchbar",
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 this.showSearchbarLastState
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 );
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 }
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 }
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 };
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 </script>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 <style lang="sass" scoped>
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 .contextbox
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 position: relative
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 background-color: #ffffff
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 opacity: $slight-transparent
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
73 transition: max-width 0.3s, max-height 0.3s
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 overflow: hidden
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 background: #fff
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
76 > div:last-child
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
77 width: 600px
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 .contextboxcollapsed
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
80 max-width: 0
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
81 max-height: 0
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 .contextboxextended
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
84 max-width: 600px
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1278
diff changeset
85 max-height: 600px
1276
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 .close-contextbox
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 position: absolute
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 z-index: 2
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 right: 0
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 top: 7px
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 height: $icon-width
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 width: $icon-height
aec9ed491dad more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 </style>