Mercurial > gemma

comparison client/src/components/ui/UITableHeader.vue @ 2720:305af1e2975d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: table headers: improved component to accept specific widths for columns
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Mar 2019 12:26:52 +0100
parents 7ac90c4db14a
children 7e97337054b9
comparison
equal deleted inserted replaced
2719:2b6f73c30016 2720:305af1e2975d
3 <a 3 <a
4 v-for="column in columns" 4 v-for="column in columns"
5 @click.prevent="sortBy(column.id)" 5 @click.prevent="sortBy(column.id)"
6 :key="column.id" 6 :key="column.id"
7 :class="[ 7 :class="[
8 'd-flex py-1 align-items-center justify-content-center small col ' + 8 'd-flex py-1 align-items-center justify-content-center small ' +
9 column.class, 9 column.class || '',
10 { active: sortColumn === column.id } 10 { active: sortColumn === column.id }
11 ]" 11 ]"
12 :style="`width: ${column.width};`"
12 > 13 >
13 <span 14 <span
14 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')" 15 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
15 v-if="sortable" 16 v-if="sortable"
16 > 17 >
17 <font-awesome-icon 18 <font-awesome-icon :icon="sortIcon(column.id)" fixed-width />
18 :icon="sortIcon(column.id)"
19 class="ml-1"
20 fixed-width
21 />
22 </span> 19 </span>
23 {{ $gettext(column.title) }} 20 <font-awesome-icon v-if="column.icon" :icon="column.icon" fixed-width />
21 <span v-if="column.title">
22 {{ $gettext(column.title) }}
23 </span>
24 </a> 24 </a>
25 <div v-if="extraColumnForButtons" class="col"></div> 25 <div v-if="extraColumnForButtons" class="col"></div>
26 </div> 26 </div>
27 </template> 27 </template>
28 28