Mercurial > gemma

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>