Mercurial > gemma

changeset 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 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();
     }
   }
 };