Mercurial > gemma

annotate client/src/components/ui/UITableBody.vue @ 5736:55892008ec96 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fixed a bunch of corner cases in WG import.
author Sascha Wilde <wilde@sha-bang.de>
date Wed, 29 May 2024 19:02:42 +0200
parents 84d01a536bec
children
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>
2724
5bc657f60fd3 client: table body component: removed animation
Markus Kottlaender <markus@intevation.de>
parents: 2640
diff changeset
2 <div
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 class="table-body text-left small"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 :style="'overflow-y: auto; max-height: ' + maxHeight"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 v-if="data.length"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 >
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <div
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 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
9 :key="key(index)"
2880
c40540889b53 client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents: 2874
diff changeset
10 :class="['row-container border-top', { active: isActive(item) }]"
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 >
2874
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
12 <div class="row mx-0">
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
13 <slot :item="item" :index="index" name="row"></slot>
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
14 </div>
2880
c40540889b53 client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents: 2874
diff changeset
15 <div class="expand" v-if="isActive(item)">
2874
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
16 <slot :item="item" :index="index" name="expand"></slot>
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
17 </div>
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 </div>
2724
5bc657f60fd3 client: table body component: removed animation
Markus Kottlaender <markus@intevation.de>
parents: 2640
diff changeset
19 </div>
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 <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
21 <translate>No results.</translate>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 </div>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </template>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24
5629
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
25 <style>
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
26 .table-body .row-container > .row:hover {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
27 background-color: #fcfcfc;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
28 }
2874
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
29
5629
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
30 .table-body .row-container > .row .table-cell {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
31 display: flex;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
32 align-items: center;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
33 padding: 1.5px 3px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
34 border-right: solid 1px #dee2e6;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
35 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
36 .table-body .row-container > .row .table-cell:last-child {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
37 border-right: none;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
38 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
39 .table-body .row-container > .row .table-cell.center {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
40 justify-content: center;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
41 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
42
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
43 .table-body .row-container .expand {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
44 border-bottom: solid 2px var(--color-info);
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
45 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
46
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
47 .table-body .row-container.active > .row {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
48 color: #fff;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
49 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
50 .table-body .row-container.active > .row .table-cell {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
51 border-right-color: rgba(255, 255, 255, 0.3);
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
52 background-color: var(--color-info);
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
53 color: #fff;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
54 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
55 .table-body .row-container.active > .row .table-cell a {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
56 color: #fff !important;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5627
diff changeset
57 }
2874
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
58 </style>
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2724
diff changeset
59
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 <script>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 /* 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
62 * without warranty, see README.md and license for details.
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * SPDX-License-Identifier: AGPL-3.0-or-later
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * License-Filename: LICENSES/AGPL-3.0.txt
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * Copyright (C) 2018 by via donau
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 * – Österreichische Wasserstraßen-Gesellschaft mbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 * Software engineering by Intevation GmbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 * Author(s):
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 * Markus Kottländer <markus.kottlaender@intevation.de>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 */
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 export default {
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 props: {
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 data: {
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 type: Array
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 },
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 maxHeight: {
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 type: String,
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 default: "18rem"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 },
2880
c40540889b53 client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents: 2874
diff changeset
84 isActive: {
c40540889b53 client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents: 2874
diff changeset
85 type: Function,
c40540889b53 client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents: 2874
diff changeset
86 default: () => false
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 }
2462
9ae2a2f758bb client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents: 2411
diff changeset
88 },
9ae2a2f758bb client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents: 2411
diff changeset
89 methods: {
9ae2a2f758bb client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents: 2411
diff changeset
90 key(index) {
9ae2a2f758bb client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents: 2411
diff changeset
91 return index;
9ae2a2f758bb client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents: 2411
diff changeset
92 }
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 }
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 };
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 </script>