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