Mercurial > gemma
diff client/src/components/Popup.vue @ 2384:c06b001dc26b
client: improved popup implementation
For deleting users and templates there was a more or less quick n' dirty implementation of
a confirmation dialog/popup. Since we need this kind of dialog in several more places I
generalized the implementation a bit and made it more robust.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 25 Feb 2019 13:11:30 +0100 |
parents | |
children | f185503ef35a |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Popup.vue Mon Feb 25 13:11:30 2019 +0100 @@ -0,0 +1,137 @@ +<template> + <transition name="fade"> + <div + class="overlay d-flex justify-content-center align-items-center" + v-if="popup" + > + <div class="popup"> + <h6 class="popup-header"> + <span class="popup-title"> + <font-awesome-icon :icon="popup.icon" class="popup-icon" /> + {{ popup.title }} + </span> + <span class="popup-close" @click="close()"> + <font-awesome-icon icon="times" /> + </span> + </h6> + <div class="popup-content" 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" + /> + {{ popup.cancel.label || $gettext("Cancel") }} + </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" + /> + {{ popup.confirm.label || $gettext("Confirm") }} + </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-content + padding: 1rem + .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>