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