Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
1278:8f4bf8576acd 1282:a7dd8a3356fc
1 <template> 1 <template>
2 <div :class="style"> 2 <div :class="style">
3 <div @click="close" class="ui-element close-contextbox text-muted"> 3 <div @click="close" class="ui-element close-contextbox text-muted">
4 <i class="fa fa-close"></i> 4 <i class="fa fa-close"></i>
5 </div> 5 </div>
6 <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks> 6 <transition name="fade" mode="out-in">
7 <Imports v-if="showInContextBox === 'imports'"></Imports> 7 <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
8 <Staging v-if="showInContextBox === 'staging'"></Staging> 8 <Imports v-if="contextBoxContent === 'imports'"></Imports>
9 <Staging v-if="contextBoxContent === 'staging'"></Staging>
10 </transition>
9 </div> 11 </div>
10 </template> 12 </template>
11 13
12 <script> 14 <script>
13 /* 15 /*
32 Bottlenecks: () => import("./Bottlenecks"), 34 Bottlenecks: () => import("./Bottlenecks"),
33 Imports: () => import("./Imports.vue"), 35 Imports: () => import("./Imports.vue"),
34 Staging: () => import("./Staging.vue") 36 Staging: () => import("./Staging.vue")
35 }, 37 },
36 computed: { 38 computed: {
37 ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), 39 ...mapState("application", [
40 "showSearchbarLastState",
41 "contextBoxContent",
42 "showContextBox"
43 ]),
38 style() { 44 style() {
39 return [ 45 return [
40 "ui-element shadow-xs contextbox ml-3", 46 "ui-element shadow-xs contextbox",
41 { 47 {
42 contextboxcollapsed: !this.showInContextBox, 48 contextboxcollapsed: !this.showContextBox,
43 contextboxextended: this.showInContextBox, 49 contextboxextended: this.showContextBox,
44 "rounded-bottom": this.showInContextBox !== "imports", 50 "rounded-bottom": this.contextBoxContent !== "imports",
45 rounded: this.showInContextBox === "imports" 51 rounded: this.contextBoxContent === "imports"
46 } 52 }
47 ]; 53 ];
48 } 54 }
49 }, 55 },
50 methods: { 56 methods: {
51 close() { 57 close() {
52 this.$store.commit("application/showInContextBox", null); 58 this.$store.commit("application/showContextBox", false);
53 this.$store.commit( 59 this.$store.commit(
54 "application/showSearchbar", 60 "application/showSearchbar",
55 this.showSearchbarLastState 61 this.showSearchbarLastState
56 ); 62 );
57 } 63 }
62 <style lang="sass" scoped> 68 <style lang="sass" scoped>
63 .contextbox 69 .contextbox
64 position: relative 70 position: relative
65 background-color: #ffffff 71 background-color: #ffffff
66 opacity: $slight-transparent 72 opacity: $slight-transparent
67 transition: left 0.3s ease 73 transition: max-width 0.3s, max-height 0.3s
68 overflow: hidden 74 overflow: hidden
69 background: #fff 75 background: #fff
76 > div:last-child
77 width: 600px
70 78
71 .contextboxcollapsed 79 .contextboxcollapsed
72 width: 0 80 max-width: 0
73 height: 0 81 max-height: 0
74 transition: $transition-fast
75 82
76 .contextboxextended 83 .contextboxextended
77 min-width: 600px 84 max-width: 600px
85 max-height: 600px
78 86
79 .close-contextbox 87 .close-contextbox
80 position: absolute 88 position: absolute
81 z-index: 2 89 z-index: 2
82 right: 0 90 right: 0
83 top: 7px 91 top: 7px
84 height: $icon-width 92 height: $icon-width
85 width: $icon-height 93 width: $icon-height
86 display: none
87
88 .contextboxextended .close-contextbox
89 display: block
90 </style> 94 </style>