Mercurial > gemma
annotate client/src/components/Popup.vue @ 2985:1b8bb4f89227
client: removed .js and .vue extention from imports
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 09 Apr 2019 18:38:15 +0200 |
parents | fd93babdf8e6 |
children | 8763da6bef4a |
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"> |
2387
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2384
diff
changeset
|
8 <UIBoxHeader |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2384
diff
changeset
|
9 :icon="popup.icon" |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2384
diff
changeset
|
10 :title="popup.title" |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2384
diff
changeset
|
11 :closeCallback="close" |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2384
diff
changeset
|
12 /> |
2625
fd93babdf8e6
client: popup: made content padding optional (for full-width tables)
Markus Kottlaender <markus@intevation.de>
parents:
2623
diff
changeset
|
13 <div |
fd93babdf8e6
client: popup: made content padding optional (for full-width tables)
Markus Kottlaender <markus@intevation.de>
parents:
2623
diff
changeset
|
14 :class="{ 'p-3': popup.padding !== false }" |
fd93babdf8e6
client: popup: made content padding optional (for full-width tables)
Markus Kottlaender <markus@intevation.de>
parents:
2623
diff
changeset
|
15 v-html="popup.content" |
fd93babdf8e6
client: popup: made content padding optional (for full-width tables)
Markus Kottlaender <markus@intevation.de>
parents:
2623
diff
changeset
|
16 ></div> |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 <div class="popup-footer" v-if="popup.cancel || popup.confirm"> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <button |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 class="btn btn-sm btn-warning" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 @click="cancel" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 v-if="popup.cancel" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 > |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 <font-awesome-icon |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 :icon="popup.cancel.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 class="fa-fw" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 v-if="popup.cancel.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 /> |
2595
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
28 <span v-if="popup.cancel.label">{{ popup.cancel.label }}</span> |
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
29 <translate v-else>Cancel</translate> |
2384
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 /> |
2595
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
42 <span v-if="popup.confirm.label">{{ popup.confirm.label }}</span> |
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
43 <translate v-else>Confirm</translate> |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 </button> |
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 </div> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 </transition> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 </template> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 <style lang="sass" scoped> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 .overlay |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 position: fixed |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 z-index: 9 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 top: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 right: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 bottom: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 left: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 background: rgba(0, 0, 0, .3) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 .popup |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 flex-direction: column |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 background-color: #fff |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 border-radius: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 max-width: 320px |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 .popup-header |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 justify-content: space-between |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 align-items: center |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 padding-left: .5rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 border-bottom: 1px solid #dee2e6 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 color: $color-info |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 margin-bottom: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 padding: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 font-weight: bold |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 .popup-title |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 padding-left: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 .popup-icon |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 margin-right: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 .popup-close |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 color: #aaa |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 padding: 3px 5px |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 border-radius: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 cursor: pointer |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 transition: background-color 0.3s, color 0.3s |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 &:hover |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 color: #888 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 background-color: #eee |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 .popup-footer |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 justify-content: space-between |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 align-items: center |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 border-top: 1px solid #dee2e6 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 padding: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 </style> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 <script> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 /* 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
|
100 * without warranty, see README.md and license for details. |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 * |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 * SPDX-License-Identifier: AGPL-3.0-or-later |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 * License-Filename: LICENSES/AGPL-3.0.txt |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 * |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 * Copyright (C) 2018 by via donau |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 * – Österreichische Wasserstraßen-Gesellschaft mbH |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 * Software engineering by Intevation GmbH |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 * |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 * Author(s): |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 * Markus Kottländer <markus.kottlaender@intevation.de> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 */ |
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 import { mapState } from "vuex"; |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 export default { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 name: "popup", |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 computed: { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 ...mapState("application", ["popup"]) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 methods: { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 confirm() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 if (this.popup.confirm && this.popup.confirm.callback) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 this.popup.confirm.callback(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 this.close(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 cancel() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 if (this.popup.cancel && this.popup.cancel.callback) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 this.popup.cancel.callback(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 this.close(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 close() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 this.$store.commit("application/popup", null); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 } |
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 </script> |