Mercurial > gemma

annotate client/src/components/Popup.vue @ 3644:9e91b416d5bb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: cross profile: display arrow in diagram consciously diceded to not draw it in the svg so it will not be exported to pdf since there it does not make sense without the map
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 17:10:49 +0200
parents fd93babdf8e6
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>