DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Fix CResourceList alignment with sort button and add sticky column to th

Browse Source
This commit is contained in:
Jože Fortun 2024-02-27 10:26:00 +01:00
parent 5002d9887b
commit 56170f3b1a
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
lib/vue/src/components/resourceList/CResourceList.vue
View File

@ -67,36 +67,37 @@
class="mh-100 h-100 mb-0"
@row-clicked="$emit('row-clicked', $event)"
>
<template #head()="field">
<div class="d-flex align-items-center" @click.prevent.stop>
<div class="flex-fill text-nowrap">
{{ field.label }}
<template #head()="field">
<div class="d-flex align-items-center" @click.prevent.stop>
<div class="flex-fill text-nowrap">
{{ field.label }}
<b-button
v-if="field.field.sort"
variant="outline-extra-light"
class="text-secondary d-print-none border-0 px-1 ml-1"
style="margin-right: -0.25rem;"
@click="handleSort(field)"
>
<font-awesome-layers
class="d-print-none"
<b-button
v-if="field.field.sort"
variant="outline-extra-light"
class="d-inline-flex align-items-center text-secondary d-print-none border-0 px-1 ml-1"
style="margin-right: -0.25rem;"
@click="handleSort(field)"
>
<font-awesome-icon
:icon="['fas', 'angle-up']"
class="mb-1"
:class="{ 'text-primary': field.column === sorting.sortBy && !sorting.sortDesc }"
/>
<font-awesome-icon
:icon="['fas', 'angle-down']"
class="mt-1"
:class="{ 'text-primary': field.column === sorting.sortBy && sorting.sortDesc }"
/>
</font-awesome-layers>
</b-button>
<font-awesome-layers
class="d-print-none"
>
<font-awesome-icon
:icon="['fas', 'angle-up']"
class="mb-1"
:class="{ 'text-primary': field.column === sorting.sortBy && !sorting.sortDesc }"
/>
<font-awesome-icon
:icon="['fas', 'angle-down']"
class="mt-1"
:class="{ 'text-primary': field.column === sorting.sortBy && sorting.sortDesc }"
/>
</font-awesome-layers>
</b-button>
</div>
</div>
</div>
</template>
</template>
<template #empty>
<p
data-test-id="no-matches"
@ -360,7 +361,7 @@ export default {
...select,
...this.fields,
].map(f => {
return { ...f, thClass: `${f.thClass || 'border-0'}`, sortable: false, sort: f.sortable }
return { ...f, thClass: `${f.thClass || 'border-0'} table-b-table-default b-table-sticky-column`, sortable: false, sort: f.sortable }
})
},