Mercurial > gemma
view client/src/components/map/contextbox/Contextbox.vue @ 1276:aec9ed491dad
more cleanup in client/src
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 07:40:23 +0100 |
parents | |
children | 8f4bf8576acd |
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> <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks> <Imports v-if="showInContextBox === 'imports'"></Imports> <Staging v-if="showInContextBox === 'staging'"></Staging> </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/Imports.vue"), Staging: () => import("./Staging.vue") }, computed: { ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), style() { return [ "ui-element shadow-xs contextbox ml-3", { contextboxcollapsed: !this.showInContextBox, contextboxextended: this.showInContextBox, "rounded-bottom": this.showInContextBox !== "imports", rounded: this.showInContextBox === "imports" } ]; } }, methods: { close() { this.$store.commit("application/showInContextBox", null); this.$store.commit( "application/showSearchbar", this.showSearchbarLastState ); } } }; </script> <style lang="sass" scoped> .contextbox position: relative background-color: #ffffff opacity: $slight-transparent transition: left 0.3s ease overflow: hidden background: #fff .contextboxcollapsed width: 0 height: 0 transition: $transition-fast .contextboxextended min-width: 600px .close-contextbox position: absolute z-index: 2 right: 0 top: 7px height: $icon-width width: $icon-height display: none .contextboxextended .close-contextbox display: block </style>