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