Mercurial > gemma
view client/src/components/splitscreen/Splitscreen.vue @ 2676:906e9a13592f
sidebar: only update staging info for appropriate usergroups
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 15 Mar 2019 11:14:21 +0100 |
parents | 1686ec185155 |
children | 85de42146bdb |
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"> <transition name="fade"> <div class="loading d-flex justify-content-center align-items-center" v-if="splitscreenLoading" > <font-awesome-icon icon="spinner" spin /> </div> </transition> <component :is="activeSplitscreen.component" v-if="activeSplitscreen" /> </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 background: rgba(255, 255, 255, 0.96) position: absolute z-index: 99 top: 34px right: 0 bottom: 0 left: 0 </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") }, 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>