Mercurial > gemma
view client/src/components/map/contextbox/Contextbox.vue @ 1282:a7dd8a3356fc
fixed contextBox animations
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 10:20:21 +0100 |
parents | 8f4bf8576acd |
children | 09dfbead8d70 |
line wrap: on
line source
<template> <div :class="style"> <div @click="close" class="ui-element close-contextbox text-muted"> <i class="fa fa-close"></i> </div> <transition name="fade" mode="out-in"> <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> <Imports v-if="contextBoxContent === 'imports'"></Imports> <Staging v-if="contextBoxContent === 'staging'"></Staging> </transition> </div> </template> <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 } from "vuex"; export default { name: "contextbox", components: { Bottlenecks: () => import("./Bottlenecks"), Imports: () => import("./Imports.vue"), Staging: () => import("./Staging.vue") }, computed: { ...mapState("application", [ "showSearchbarLastState", "contextBoxContent", "showContextBox" ]), style() { return [ "ui-element shadow-xs contextbox", { contextboxcollapsed: !this.showContextBox, contextboxextended: this.showContextBox, "rounded-bottom": this.contextBoxContent !== "imports", rounded: this.contextBoxContent === "imports" } ]; } }, methods: { close() { this.$store.commit("application/showContextBox", false); this.$store.commit( "application/showSearchbar", this.showSearchbarLastState ); } } }; </script> <style lang="sass" scoped> .contextbox position: relative background-color: #ffffff opacity: $slight-transparent transition: max-width 0.3s, max-height 0.3s overflow: hidden background: #fff > div:last-child width: 600px .contextboxcollapsed max-width: 0 max-height: 0 .contextboxextended max-width: 600px max-height: 600px .close-contextbox position: absolute z-index: 2 right: 0 top: 7px height: $icon-width width: $icon-height </style>