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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>