Mercurial > gemma

annotate client/src/components/ui/UITableHeader.vue @ 5627:7768f14f6535 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss variables into css custom properties
author Luisa Beerboom <lbeerboom@intevation.de>
date Tue, 09 May 2023 13:17:58 +0200
parents b9a6abef9f1c
children 84d01a536bec
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>
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"
2738
add2d47c2567 client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents: 2731
diff changeset
5 @click.prevent="!column.disableSorting && sortTable(column.id)"
2408
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="[
2874
b9a6abef9f1c client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents: 2779
diff changeset
8 'd-inline-block py-1 text-center truncate small ' +
2731
7e97337054b9 client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents: 2720
diff changeset
9 (column.class || '') +
7e97337054b9 client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents: 2720
diff changeset
10 ' ' +
7e97337054b9 client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents: 2720
diff changeset
11 (column.disableSorting ? ' sorting-disabled' : ''),
2408
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 ]"
2720
305af1e2975d client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents: 2635
diff changeset
14 :style="`width: ${column.width};`"
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 >
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 <span
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
2731
7e97337054b9 client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents: 2720
diff changeset
18 v-if="sortable && !column.disableSorting"
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 >
2720
305af1e2975d client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents: 2635
diff changeset
20 <font-awesome-icon :icon="sortIcon(column.id)" fixed-width />
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 </span>
2720
305af1e2975d client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents: 2635
diff changeset
22 <font-awesome-icon v-if="column.icon" :icon="column.icon" fixed-width />
305af1e2975d client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents: 2635
diff changeset
23 <span v-if="column.title">
2779
21eb85cdfe45 Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2738
diff changeset
24 {{ column.title }}
2720
305af1e2975d client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents: 2635
diff changeset
25 </span>
2408
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
2731
7e97337054b9 client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents: 2720
diff changeset
42 a:not(.sorting-disabled)
2408
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 },
2738
add2d47c2567 client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents: 2731
diff changeset
82 sortTable(id) {
2408
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";
2738
add2d47c2567 client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents: 2731
diff changeset
86 this.$parent.sortTable({
2408
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>