Mercurial > gemma
view client/src/components/Contextbox.vue @ 2416:706121185e63 staging_consolidation
wip
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 28 Feb 2019 13:46:09 +0100 |
parents | e120631797f6 |
children | f374ca26a337 |
line wrap: on
line source
<template> <div :class="style"> <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> <Staging v-if="contextBoxContent === 'staging'"></Staging> <Stretches v-if="contextBoxContent === 'stretches'"></Stretches> <ImportOverview v-if="contextBoxContent === 'importoverview'" ></ImportOverview> </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"), Staging: () => import("@/components/staging/Staging.vue"), Stretches: () => import("@/components/ImportStretches.vue"), ImportOverview: () => import("@/components/importoverview/ImportOverview.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/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: 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>