Mercurial > gemma
view client/src/components/Contextbox.vue @ 3330:0e442b547f6d
mocking fairway_availability
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 20 May 2019 15:52:49 +0200 |
parents | ec27ee21f7bc |
children | 982816fca381 |
line wrap: on
line source
<template> <div :class="style"> <Bottlenecks v-if="contextBoxContent === 'bottlenecks'" /> <Staging v-if="contextBoxContent === 'staging'" /> <Stretches v-if="contextBoxContent === 'stretches'" /> <Sections v-if="contextBoxContent === 'sections'" /> <ImportOverview v-if="contextBoxContent === 'importoverview'" /> <ImportConfiguration v-if="contextBoxContent === 'importconfiguration'" /> </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("@/components/Bottlenecks"), Stretches: () => import("@/components/stretches/Stretches"), Sections: () => import("@/components/sections/Sections"), ImportOverview: () => import("@/components/importoverview/ImportOverview"), ImportConfiguration: () => import("@/components/importconfiguration/Import") }, 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("map/mapPopupEnabled", true); this.$store.commit("application/searchQuery", ""); this.$store.commit("application/showContextBox", false); this.$store.commit( "application/showSearchbar", this.showSearchbarLastState ); this.$router.push("/"); } } }; </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: 668px; } .contextboxcollapsed { max-width: 0; max-height: 0; } .contextboxextended { max-width: 668px; } .close-contextbox { position: absolute; z-index: 2; right: 0; top: 7px; height: $icon-width; width: $icon-height; } </style>