Mercurial > gemma
view client/src/components/ui/UIBoxHeader.vue @ 5736:55892008ec96 default tip
Fixed a bunch of corner cases in WG import.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Wed, 29 May 2024 19:02:42 +0200 |
parents | 84d01a536bec |
children |
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> .box-header { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding-left: 0.5rem; border-bottom: 1px solid #dee2e6; color: var(--color-info); margin-bottom: 0; padding: 0.25rem; font-weight: bold; background: white; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .box-header .box-title { padding-left: 0.25rem; } .box-header .box-title .box-icon { margin-right: 0.25rem; } .box-header .box-control { margin-left: 3px; } .box-header.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>