Mercurial > gemma
view client/src/components/Contextbox.vue @ 2068:5a898da60b87
dma added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 30 Jan 2019 15:43:08 +0100 |
parents | 67340ceecc5f |
children | a08e0f532304 |
line wrap: on
line source
<template> <div :class="style"> <div @click="close" class="ui-element close-contextbox text-muted"> <font-awesome-icon icon="times"></font-awesome-icon> </div> <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> <Staging v-if="contextBoxContent === 'staging'"></Staging> <Stretches v-if="contextBoxContent === 'stretches'"></Stretches> </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"), Staging: () => import("./staging/Staging.vue"), Stretches: () => import("./ImportStretches.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="scss" scoped> .contextbox { position: relative; background-color: #ffffff; opacity: $slight-transparent; transition: max-width 0.3s, max-height 0.3s; overflow: hidden; background: #fff; } .contextbox > div:last-child { width: 600px; } .contextboxcollapsed { max-width: 0; max-height: 0; } .contextboxextended { max-width: 700px; max-height: 640px; } .close-contextbox { position: absolute; z-index: 2; right: 0; top: 7px; height: $icon-width; width: $icon-height; } </style>