Mercurial > gemma
changeset 2551:298087ae22b3
client: splitscreen: fixed z-index and animation bug
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 08 Mar 2019 09:23:56 +0100 |
parents | dc42faf90e1d |
children | 2d2b7fdc0c01 |
files | client/src/components/Splitscreen.vue |
diffstat | 1 files changed, 10 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Splitscreen.vue Fri Mar 08 09:10:17 2019 +0100 +++ b/client/src/components/Splitscreen.vue Fri Mar 08 09:23:56 2019 +0100 @@ -4,11 +4,10 @@ 'splitscreen bg-white d-flex flex-column ui-element', { show: showSplitscreen } ]" - v-if="splitscreen" > <UIBoxHeader - :icon="splitscreen.icon" - :title="splitscreen.title" + :icon="config.icon" + :title="config.title" :closeCallback="close" :collapseCallback="collapse" /> @@ -21,7 +20,7 @@ <font-awesome-icon icon="spinner" spin /> </div> </transition> - <component :is="splitscreen.component" /> + <component :is="config.component" /> </div> </div> </template> @@ -34,7 +33,7 @@ right: 0 height: 50vh overflow: hidden - z-index: 3 + z-index: 1 transition: bottom 0.3s &.show bottom: 0 @@ -75,17 +74,19 @@ "splitscreen", "showSplitscreen", "splitscreenLoading" - ]) + ]), + config() { + return this.splitscreen || { title: "", icon: "", component: "" }; + } }, methods: { collapse() { this.$store.commit("application/showSplitscreen", false); - if (this.splitscreen.collapseCallback) - this.splitscreen.collapseCallback(); + if (this.config.collapseCallback) this.config.collapseCallback(); }, close() { this.$store.commit("application/showSplitscreen", false); - if (this.splitscreen.closeCallback) this.splitscreen.closeCallback(); + if (this.config.closeCallback) this.config.closeCallback(); } } };