Mercurial > gemma
view client/src/components/ui/UIBoxHeader.vue @ 2625:fd93babdf8e6
client: popup: made content padding optional (for full-width tables)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 16:24:35 +0100 |
parents | 83b938bf4da9 |
children | 85927d27c84e |
line wrap: on
line source
<template> <h6 :class="['box-header', { 'rounded border-0 shadow-xs': collapsed }]"> <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="!collapsed && collapseCallback"> <font-awesome-icon :icon="['far', 'window-minimize']" /> </span> <span @click="expandCallback" v-if="collapsed && expandCallback"> <font-awesome-icon :icon="['far', 'window-maximize']" /> </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 background: white .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", "expandCallback", "collapsed" ] }; </script>