Mercurial > gemma
annotate client/src/components/Popup.vue @ 4837:3b0ec9b56d7c
Merged
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Fri, 08 Nov 2019 13:10:56 +0100 |
parents | 8763da6bef4a |
children | 7768f14f6535 |
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> |
4498 | 17 <div |
18 v-if="popup.dateSelection" | |
19 class="dateselection d-flex flex-column mx-2" | |
20 > | |
21 <div class="d-flex flex-column text-left"> | |
22 <small class="my-auto text-muted"> | |
23 <translate>From</translate> | |
24 </small> | |
25 <input type="date" v-model="from" /> | |
26 </div> | |
27 <div class="text-left d-flex flex-column"> | |
28 <small class="my-auto text-muted"> | |
29 <translate>To</translate> | |
30 </small> | |
31 <input type="date" v-model="to" /> | |
32 </div> | |
33 </div> | |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 <div class="popup-footer" v-if="popup.cancel || popup.confirm"> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 <button |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 class="btn btn-sm btn-warning" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 @click="cancel" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 v-if="popup.cancel" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 > |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 <font-awesome-icon |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 :icon="popup.cancel.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 class="fa-fw" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 v-if="popup.cancel.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 /> |
2595
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
45 <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
|
46 <translate v-else>Cancel</translate> |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 </button> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 <span /> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 <button |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 class="btn btn-sm btn-info" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 @click="confirm" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 v-if="popup.confirm" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 > |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 <font-awesome-icon |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 :icon="popup.confirm.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 class="fa-fw" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 v-if="popup.confirm.icon" |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 /> |
2595
dda4cec8e67b
client:translations: correct some strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2387
diff
changeset
|
59 <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
|
60 <translate v-else>Confirm</translate> |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 </button> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 </div> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 </div> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 </div> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 </transition> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 </template> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 <style lang="sass" scoped> |
4498 | 69 .dateselection |
70 width: 250px | |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 .overlay |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 position: fixed |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 z-index: 9 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 top: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 right: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 bottom: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 left: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 background: rgba(0, 0, 0, .3) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 .popup |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 flex-direction: column |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 background-color: #fff |
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 max-width: 320px |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 .popup-header |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 justify-content: space-between |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 align-items: center |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 padding-left: .5rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 border-bottom: 1px solid #dee2e6 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 color: $color-info |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 margin-bottom: 0 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 padding: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 font-weight: bold |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 .popup-title |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 padding-left: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 .popup-icon |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 margin-right: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 .popup-close |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 color: #aaa |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 padding: 3px 5px |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 border-radius: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 cursor: pointer |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 transition: background-color 0.3s, color 0.3s |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 &:hover |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 color: #888 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 background-color: #eee |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 .popup-footer |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 display: flex |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 justify-content: space-between |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 align-items: center |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 border-top: 1px solid #dee2e6 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 padding: 0.25rem |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 </style> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 <script> |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 /* 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
|
119 * without warranty, see README.md and license for details. |
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 * SPDX-License-Identifier: AGPL-3.0-or-later |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 * License-Filename: LICENSES/AGPL-3.0.txt |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 * |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 * Copyright (C) 2018 by via donau |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 * – Österreichische Wasserstraßen-Gesellschaft mbH |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 * Software engineering by Intevation GmbH |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 * |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 * Author(s): |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 * Markus Kottländer <markus.kottlaender@intevation.de> |
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 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 import { mapState } from "vuex"; |
4498 | 133 import { format, subMonths } from "date-fns"; |
134 | |
135 const isoFormat = date => { | |
136 return format(date, "YYYY-MM-DD"); | |
137 }; | |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 export default { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 name: "popup", |
4498 | 141 data() { |
142 return { | |
143 from: isoFormat(subMonths(new Date(), 1)), | |
144 to: isoFormat(new Date()) | |
145 }; | |
146 }, | |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 computed: { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 ...mapState("application", ["popup"]) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 methods: { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 confirm() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 if (this.popup.confirm && this.popup.confirm.callback) |
4498 | 153 this.popup.confirm.callback({ |
154 from: this.from, | |
155 to: this.to | |
156 }); | |
2384
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 this.close(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 cancel() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 if (this.popup.cancel && this.popup.cancel.callback) |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 this.popup.cancel.callback(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 this.close(); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
163 }, |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 close() { |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
165 this.$store.commit("application/popup", null); |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 } |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 } |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168 }; |
c06b001dc26b
client: improved popup implementation
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 </script> |