Mercurial > gemma

annotate client/src/components/Popup.vue @ 2625:fd93babdf8e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: popup: made content padding optional (for full-width tables)
author Markus Kottlaender <markus@intevation.de>
date Wed, 13 Mar 2019 16:24:35 +0100
parents 145f2b89287c
children 8763da6bef4a
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">
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>