imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Issues #138 files page thead sticky and only tbody have scrollbar done.

Browse Source
This commit is contained in:
chiayin
2024-03-07 12:29:08 +08:00
parent 5b62799efb
commit c0ad84169a
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/vendors.css
View File

@@ -103,3 +103,7 @@ p-radiobutton-icon */
.p-datatable-resizable > .p-datatable-wrapper { .p-datatable-resizable > .p-datatable-wrapper {
@apply !overflow-x-visible @apply !overflow-x-visible
} }
/* 蓋住 inline style 的 overflow-auto，才能使 thead 定位 */
.p-datatable-wrapper {
overflow: unset !important;
}

18
src/views/Files/index.vue
View File

@@ -159,8 +159,8 @@
</ul> </ul>
</div> </div>
<!-- All Files type of List --> <!-- All Files type of List -->
<div class="overflow-y-scroll overflow-x-hidden scrollbar max-h-[calc(100vh_-_440px)]" v-if="!switchListOrGrid"> <div class=" " v-if="!switchListOrGrid">
<DataTable :value="allFiles" dataKey="id" tableClass="w-full text-sm cursor-pointer relative table-fixed" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable"> <DataTable :value="allFiles" dataKey="id" tableClass="w-full text-sm cursor-pointer relative table-fixed" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable" >
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column> <Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column> <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column> <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
@@ -557,18 +557,20 @@
const clickedLi = e.target.closest('li'); const clickedLi = e.target.closest('li');
if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null; if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
}) })
// 為 DataTable tbody 加入 .scrollbar 選擇器
const tbodyElement = document.querySelector('.p-datatable-tbody');
tbodyElement.classList.add('scrollbar');
this.isLoading = false; this.isLoading = false;
// document.onmousemove = (e) => {
// console.log('x:', e.pageX);
// console.log('y:', e.pageY);
// }
}, },
} }
</script> </script>
<style scoped> <style scoped>
:deep(thead) { :deep(thead) {
@apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute @apply sticky top-0 bg-neutral-10 after:border-b after:border-neutral-500 after:w-full after:left-0 after:bottom-0 after:absolute table table-fixed w-full
}
:deep(tbody) {
@apply overflow-y-auto overflow-x-hidden max-h-[calc(100vh_-_480px)] block
} }
:deep(table th) { :deep(table th) {
@apply border-b !border-neutral-500 !p-2 text-left font-bold !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis @apply border-b !border-neutral-500 !p-2 text-left font-bold !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
@@ -577,7 +579,7 @@
@apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis @apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis
} }
:deep(tbody > tr) { :deep(tbody > tr) {
@apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none table table-fixed w-full
} }
:deep(.p-sortable-column) { :deep(.p-sortable-column) {
@apply focus:!shadow-none !text-neutral-900 @apply focus:!shadow-none !text-neutral-900