Mercurial > gemma
view client/src/application/Contextbox.vue @ 1256:3c84035b1f1b
adjusted box shadows
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 12:36:06 +0100 |
parents | 957907eaaa72 |
children | 29036b3916ab |
line wrap: on
line source
<template> <div :class="style"> <div @click="close" class="ui-element close-contextbox"> <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/Bottlenecks"), Imports: () => import("../imports/Imports.vue"), Staging: () => import("../staging/Staging.vue") }, computed: { ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), style() { return [ "ui-element shadow-xs contextbox pt-3 ml-3 rounded-bottom border-top", { contextboxcollapsed: !this.showInContextBox, contextboxextended: this.showInContextBox } ]; } }, 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>