Mercurial > gemma
view client/src/components/Popup.vue @ 3330:0e442b547f6d
mocking fairway_availability
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 20 May 2019 15:52:49 +0200 |
parents | fd93babdf8e6 |
children | 8763da6bef4a |
line wrap: on
line source
<template> <transition name="fade"> <div class="overlay d-flex justify-content-center align-items-center" v-if="popup" > <div class="popup"> <UIBoxHeader :icon="popup.icon" :title="popup.title" :closeCallback="close" /> <div :class="{ 'p-3': popup.padding !== false }" v-html="popup.content" ></div> <div class="popup-footer" v-if="popup.cancel || popup.confirm"> <button class="btn btn-sm btn-warning" @click="cancel" v-if="popup.cancel" > <font-awesome-icon :icon="popup.cancel.icon" class="fa-fw" v-if="popup.cancel.icon" /> <span v-if="popup.cancel.label">{{ popup.cancel.label }}</span> <translate v-else>Cancel</translate> </button> <span /> <button class="btn btn-sm btn-info" @click="confirm" v-if="popup.confirm" > <font-awesome-icon :icon="popup.confirm.icon" class="fa-fw" v-if="popup.confirm.icon" /> <span v-if="popup.confirm.label">{{ popup.confirm.label }}</span> <translate v-else>Confirm</translate> </button> </div> </div> </div> </transition> </template> <style lang="sass" scoped> .overlay position: fixed z-index: 9 top: 0 right: 0 bottom: 0 left: 0 background: rgba(0, 0, 0, .3) .popup display: flex flex-direction: column box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) background-color: #fff border-radius: 0.25rem max-width: 320px .popup-header display: flex justify-content: space-between align-items: center padding-left: .5rem border-bottom: 1px solid #dee2e6 color: $color-info margin-bottom: 0 padding: 0.25rem font-weight: bold .popup-title padding-left: 0.25rem .popup-icon margin-right: 0.25rem .popup-close color: #aaa padding: 3px 5px border-radius: 0.25rem cursor: pointer transition: background-color 0.3s, color 0.3s &:hover color: #888 background-color: #eee .popup-footer display: flex justify-content: space-between align-items: center border-top: 1px solid #dee2e6 padding: 0.25rem </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> */ import { mapState } from "vuex"; export default { name: "popup", computed: { ...mapState("application", ["popup"]) }, methods: { confirm() { if (this.popup.confirm && this.popup.confirm.callback) this.popup.confirm.callback(); this.close(); }, cancel() { if (this.popup.cancel && this.popup.cancel.callback) this.popup.cancel.callback(); this.close(); }, close() { this.$store.commit("application/popup", null); } } }; </script>