Mercurial > gemma
annotate client/src/components/ui/UITableBody.vue @ 2549:9bf6b767a56a
client: refactored and improved splitscreen for diagrams
To make different diagrams possible, the splitscreen view needed to be decoupled from the cross profiles.
Also the style has changed to make it more consistent with the rest of the app. The standard box header
is now used and there are collapse and expand animations.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 08 Mar 2019 08:50:47 +0100 |
parents | 9ae2a2f758bb |
children | 4bcb26542767 |
rev | line source |
---|---|
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
2411
27d3e9eda8b6
client: table component: fade transition for adding/removing items
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
2 <transition-group |
27d3e9eda8b6
client: table component: fade transition for adding/removing items
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
3 name="fade" |
27d3e9eda8b6
client: table component: fade transition for adding/removing items
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
4 tag="div" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 class="table-body text-left small" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 :style="'overflow-y: auto; max-height: ' + maxHeight" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 v-if="data.length" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <div |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 v-for="(item, index) in data" |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
11 :key="key(index)" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 :class="['border-top row mx-0', { active: active === item }]" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 <slot :item="item" :index="index"></slot> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 </div> |
2411
27d3e9eda8b6
client: table component: fade transition for adding/removing items
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
16 </transition-group> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 <div v-else class="small text-center py-3 border-top"> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <translate>No results.</translate> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 </div> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 </template> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 <script> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 * without warranty, see README.md and license for details. |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 * SPDX-License-Identifier: AGPL-3.0-or-later |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 * License-Filename: LICENSES/AGPL-3.0.txt |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 * Copyright (C) 2018 by via donau |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 * – Österreichische Wasserstraßen-Gesellschaft mbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 * Software engineering by Intevation GmbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 * Author(s): |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 * Markus Kottländer <markus.kottlaender@intevation.de> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 */ |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 export default { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 props: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 data: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 type: Array |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 maxHeight: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 type: String, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 default: "18rem" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 active: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 type: [Object, Array] |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 } |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
49 }, |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
50 methods: { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
51 key(index) { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
52 return index; |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
53 } |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 }; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 </script> |