Mercurial > gemma

annotate client/src/components/Popup.vue @ 2387:f185503ef35a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: unified box's header styles by creating a reusable component The clients html/css and resulting look and feel of the app is partially very inconsistent. By moving code to more small and reusable components consistency will hopefully be increased.
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Feb 2019 15:02:34 +0100
parents c06b001dc26b
children dda4cec8e67b
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 />
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>