Mercurial > gemma

comparison client/src/components/Popup.vue @ 2384:c06b001dc26b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
2383:8d025f85a3fe 2384:c06b001dc26b
1 <template>
2 <transition name="fade">
3 <div
4 class="overlay d-flex justify-content-center align-items-center"
5 v-if="popup"
6 >
7 <div class="popup">
8 <h6 class="popup-header">
9 <span class="popup-title">
10 <font-awesome-icon :icon="popup.icon" class="popup-icon" />
11 {{ popup.title }}
12 </span>
13 <span class="popup-close" @click="close()">
14 <font-awesome-icon icon="times" />
15 </span>
16 </h6>
17 <div class="popup-content" v-html="popup.content"></div>
18 <div class="popup-footer" v-if="popup.cancel || popup.confirm">
19 <button
20 class="btn btn-sm btn-warning"
21 @click="cancel"
22 v-if="popup.cancel"
23 >
24 <font-awesome-icon
25 :icon="popup.cancel.icon"
26 class="fa-fw"
27 v-if="popup.cancel.icon"
28 />
29 {{ popup.cancel.label || $gettext("Cancel") }}
30 </button>
31 <span />
32 <button
33 class="btn btn-sm btn-info"
34 @click="confirm"
35 v-if="popup.confirm"
36 >
37 <font-awesome-icon
38 :icon="popup.confirm.icon"
39 class="fa-fw"
40 v-if="popup.confirm.icon"
41 />
42 {{ popup.confirm.label || $gettext("Confirm") }}
43 </button>
44 </div>
45 </div>
46 </div>
47 </transition>
48 </template>
49
50 <style lang="sass" scoped>
51 .overlay
52 position: fixed
53 z-index: 9
54 top: 0
55 right: 0
56 bottom: 0
57 left: 0
58 background: rgba(0, 0, 0, .3)
59 .popup
60 display: flex
61 flex-direction: column
62 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
63 background-color: #fff
64 border-radius: 0.25rem
65 max-width: 320px
66 .popup-header
67 display: flex
68 justify-content: space-between
69 align-items: center
70 padding-left: .5rem
71 border-bottom: 1px solid #dee2e6
72 color: $color-info
73 margin-bottom: 0
74 padding: 0.25rem
75 font-weight: bold
76 .popup-title
77 padding-left: 0.25rem
78 .popup-icon
79 margin-right: 0.25rem
80 .popup-close
81 color: #aaa
82 padding: 3px 5px
83 border-radius: 0.25rem
84 cursor: pointer
85 transition: background-color 0.3s, color 0.3s
86 &:hover
87 color: #888
88 background-color: #eee
89 .popup-content
90 padding: 1rem
91 .popup-footer
92 display: flex
93 justify-content: space-between
94 align-items: center
95 border-top: 1px solid #dee2e6
96 padding: 0.25rem
97 </style>
98
99 <script>
100 /* This is Free Software under GNU Affero General Public License v >= 3.0
101 * without warranty, see README.md and license for details.
102 *
103 * SPDX-License-Identifier: AGPL-3.0-or-later
104 * License-Filename: LICENSES/AGPL-3.0.txt
105 *
106 * Copyright (C) 2018 by via donau
107 * – Österreichische Wasserstraßen-Gesellschaft mbH
108 * Software engineering by Intevation GmbH
109 *
110 * Author(s):
111 * Markus Kottländer <markus.kottlaender@intevation.de>
112 */
113
114 import { mapState } from "vuex";
115
116 export default {
117 name: "popup",
118 computed: {
119 ...mapState("application", ["popup"])
120 },
121 methods: {
122 confirm() {
123 if (this.popup.confirm && this.popup.confirm.callback)
124 this.popup.confirm.callback();
125 this.close();
126 },
127 cancel() {
128 if (this.popup.cancel && this.popup.cancel.callback)
129 this.popup.cancel.callback();
130 this.close();
131 },
132 close() {
133 this.$store.commit("application/popup", null);
134 }
135 }
136 };
137 </script>