Mercurial > gemma
view client/src/components/splitscreen/Splitscreen.vue @ 2907:ab0a829735f6
client: import stretches: removed unnecessary wrapper method
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 16:55:55 +0200 |
parents | 95e40c87a943 |
children |
line wrap: on
line source
<template> <div> <div :class="[ 'splitscreen bg-white d-flex flex-column ui-element', { show: showSplitscreen } ]" > <UIBoxHeader :icon="activeSplitscreen.icon" :title="activeSplitscreen.title" :closeCallback="close" :collapseCallback="collapse" v-if="activeSplitscreen" /> <div class="d-flex flex-fill"> <UISpinnerOverlay v-if="splitscreenLoading" /> <transition name="fade" mode="out-in"> <component :is="activeSplitscreen.component" v-if="activeSplitscreen" /> </transition> </div> </div> </div> </template> <style lang="sass" scoped> .splitscreen position: absolute bottom: -50vh left: 0 right: 0 height: 50vh overflow: hidden z-index: 1 box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075) transition: bottom 0.3s &.show bottom: 0 .loading top: 34px </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; export default { components: { Fairwayprofile: () => import("@/components/fairway/Fairwayprofile"), Waterlevel: () => import("@/components/gauge/Waterlevel"), HydrologicalConditions: () => import("@/components/gauge/HydrologicalConditions") }, computed: { ...mapState("application", ["showSplitscreen", "splitscreenLoading"]), ...mapGetters("application", ["activeSplitscreen"]) }, methods: { collapse() { if (this.activeSplitscreen.collapseCallback) this.activeSplitscreen.collapseCallback(); this.$store.commit("application/showSplitscreen", false); }, close() { this.$store.commit("application/showSplitscreen", false); setTimeout(() => { let removeId = this.activeSplitscreen.id; let callback = this.activeSplitscreen.closeCallback; this.$store.commit("application/activeSplitscreenId", null); if (callback) callback(); this.$store.commit("application/removeSplitscreen", removeId); }, 350); } } }; </script>