Mercurial > gemma
annotate client/src/components/ui/UITableBody.vue @ 4238:fe24cdde614d
styles-config: prepare components for WMS-Layer styling and set default color values
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 17:21:14 +0200 |
parents | d2dba0638ef1 |
children | 7768f14f6535 |
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 |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
25 <style lang="sass"> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
26 .table-body |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
27 .row-container |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
28 > .row |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
29 &:hover |
2880
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
30 background-color: #fcfcfc |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
31 .table-cell |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
32 display: flex |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
33 align-items: center |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
34 padding: 1.5px 3px |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
35 border-right: solid 1px #dee2e6 |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
36 &:last-child |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
37 border-right: none |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
38 &.center |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
39 justify-content: center |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
40 .expand |
2924
d2dba0638ef1
client: ui: made expaneded table rows more clearly separated
Markus Kottlaender <markus@intevation.de>
parents:
2880
diff
changeset
|
41 border-bottom: solid 2px $color-info |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
42 |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
43 &.active |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
44 > .row |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
45 color: #fff |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
46 .table-cell |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
47 border-right-color: rgba(255, 255, 255, 0.3) |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
48 background-color: $color-info |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
49 color: #fff |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
50 a |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
51 color: #fff !important |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
52 </style> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
53 |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 <script> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 /* 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
|
56 * without warranty, see README.md and license for details. |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * SPDX-License-Identifier: AGPL-3.0-or-later |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 * License-Filename: LICENSES/AGPL-3.0.txt |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 * Copyright (C) 2018 by via donau |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 * – Österreichische Wasserstraßen-Gesellschaft mbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 * Software engineering by Intevation GmbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 * Author(s): |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 * Markus Kottländer <markus.kottlaender@intevation.de> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 */ |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 export default { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 props: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 data: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 type: Array |
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 maxHeight: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 type: String, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 default: "18rem" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 }, |
2880
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
78 isActive: { |
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
79 type: Function, |
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
80 default: () => false |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 } |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
82 }, |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
83 methods: { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
84 key(index) { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
85 return index; |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
86 } |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 }; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 </script> |