Mercurial > gemma
view client/src/components/ui/UIBoxHeader.vue @ 5567:88cb635c122a
Added tag v5.5.1 for changeset f1fb8c4f6587
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Mon, 07 Mar 2022 18:40:09 +0100 |
parents | ba014cc5f969 |
children | 7768f14f6535 |
line wrap: on
line source
<template> <h6 :class="['box-header', { small }]"> <span class="box-title"> <font-awesome-icon :icon="icon" class="box-icon" v-if="icon" fixed-width /> {{ title }} </span> <div class="d-flex flex-row"> <span class="box-control" v-if="checkBox" style="cursor: default;"> <input id="checkboxID" type="checkbox" class="checkbox-header" :checked="checkBox.value" @change="checkBox.callback" /> <label for="checkboxID" class="ml-1 small mb-0 checkbox-header"> {{ checkBox.label }} </label> </span> <span class="box-control" v-for="(action, index) in actions" :key="index" @click="action.callback" > <font-awesome-icon :icon="action.icon" :spin="action.icon === 'spinner'" /> </span> <span class="box-control" @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 border-top-left-radius: .25rem border-top-right-radius: .25rem .box-title padding-left: 0.25rem .box-icon margin-right: 0.25rem .box-control margin-left: 3px &.small padding: 0.1rem 0.1rem 0.1rem 0.25rem min-height: 27px .checkbox-header cursor: pointer </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: String, title: String, closeCallback: Function, actions: Array, small: Boolean, checkBox: Object } }; </script>