Mercurial > gemma
view client/src/components/ui/UIBoxHeader.vue @ 2549:9bf6b767a56a
client: refactored and improved splitscreen for diagrams
To make different diagrams possible, the splitscreen view needed to be decoupled from the cross profiles.
Also the style has changed to make it more consistent with the rest of the app. The standard box header
is now used and there are collapse and expand animations.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 08 Mar 2019 08:50:47 +0100 |
parents | 02d30251d594 |
children | 83b938bf4da9 |
line wrap: on
line source
<template> <h6 class="box-header"> <span class="box-title"> <font-awesome-icon :icon="icon" class="box-icon" v-if="icon" fixed-width /> {{ $gettext(title) }} </span> <div class="box-controls"> <span @click="collapseCallback" v-if="collapseCallback"> <font-awesome-icon icon="angle-down" /> </span> <span @click="closeCallback" v-if="closeCallback"> <font-awesome-icon icon="times" /> </span> </div> </h6> </template> <style lang="sass"> .box-header display: flex justify-content: space-between align-items: center min-height: 34px padding-left: .5rem border-bottom: 1px solid #dee2e6 color: $color-info margin-bottom: 0 padding: 0.25rem font-weight: bold .box-title padding-left: 0.25rem .box-icon margin-right: 0.25rem .box-controls span display: inline-block margin-left: 3px color: #888 padding: 3px 7px border-radius: 0.25rem cursor: pointer transition: background-color 0.3s, color 0.3s &:hover color: #666 background-color: #eee </style> <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> */ export default { props: ["icon", "title", "collapseCallback", "closeCallback"] }; </script>