Mercurial > gemma
view client/src/components/Contextbox.vue @ 2640:4bcb26542767
client: use new btn-xs class in tables
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 11:23:42 +0100 |
parents | d9e1db955d49 |
children | 9f3856337f55 |
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> <ImportOverviewAlt v-if="contextBoxContent === 'importoverview2'" ></ImportOverviewAlt> </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/ImportStretches.vue"), ImportOverview: () => import("@/components/importoverview/ImportOverview.vue"), ImportOverviewAlt: () => import("@/components/importoverview/ImportOverviewAlt.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: 660px; } .contextboxcollapsed { max-width: 0; max-height: 0; } .contextboxextended { max-width: 660px; } .close-contextbox { position: absolute; z-index: 2; right: 0; top: 7px; height: $icon-width; width: $icon-height; } </style>