Mercurial > gemma
annotate client/src/components/ui/UITableHeader.vue @ 2640:4bcb26542767
client: use new btn-xs class in tables
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 11:23:42 +0100 |
parents | 7ac90c4db14a |
children | 305af1e2975d |
rev | line source |
---|---|
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
2635
7ac90c4db14a
client: table headers: more compact / less padding
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
2 <div :class="['table-header row no-gutters bg-light', { sortable }]"> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <a |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 v-for="column in columns" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 @click.prevent="sortBy(column.id)" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 :key="column.id" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 :class="[ |
2635
7ac90c4db14a
client: table headers: more compact / less padding
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
8 'd-flex py-1 align-items-center justify-content-center small col ' + |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 column.class, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 { active: sortColumn === column.id } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 ]" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 <span |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 v-if="sortable" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 <font-awesome-icon |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 :icon="sortIcon(column.id)" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 class="ml-1" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 fixed-width |
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 </span> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 {{ $gettext(column.title) }} |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 </a> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 <div v-if="extraColumnForButtons" class="col"></div> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 </div> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 </template> |
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 <style lang="sass"> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 .table-header |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 > a |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 border-right: solid 1px #e7e8e9 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 background-color: #f8f9fa |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 a |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 outline: none |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 &:hover |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 text-decoration: none |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 background-color: #f8f9fa |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 &.sortable |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 a |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 cursor: pointer |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 &:hover, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 &.active |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 background: #e7e8e9 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 </style> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 <script> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 /* 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
|
49 * without warranty, see README.md and license for details. |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * SPDX-License-Identifier: AGPL-3.0-or-later |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * License-Filename: LICENSES/AGPL-3.0.txt |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * Copyright (C) 2018 by via donau |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * – Österreichische Wasserstraßen-Gesellschaft mbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * Software engineering by Intevation GmbH |
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 * Author(s): |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 * Markus Kottländer <markus.kottlaender@intevation.de> |
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 export default { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 props: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 columns: { type: Array }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 sortable: { type: Boolean, default: true }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 extraColumnForButtons: { type: Boolean, default: true } |
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 data() { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 return { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 sortColumn: null, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 sortDirection: "ASC" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 }; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 methods: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 sortIcon(id) { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 if (this.sortColumn === id) { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 return "sort-" + (this.sortDirection === "ASC" ? "down" : "up"); |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 return "sort"; |
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 sortBy(id) { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 if (this.sortable) { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 this.sortColumn = id; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 this.$emit("sortingChanged", { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 sortColumn: this.sortColumn, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 sortDirection: this.sortDirection |
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 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 }; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 </script> |