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 {
@apply !overflow-x-visible
}
/* 蓋住 inline style 的 overflow-auto，才能使 thead 定位 */
.p-datatable-wrapper {
overflow: unset !important;
}

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

@@ -159,8 +159,8 @@
</ul>
</div>
<!-- All Files type of List -->
<div class="overflow-y-scroll overflow-x-hidden scrollbar max-h-[calc(100vh_-_440px)]" 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">
<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" >
<Column field="name" header="Name" bodyClass="font-medium fileName" 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>
@@ -179,7 +179,7 @@
</div>
<!-- All Files type of grid -->
<ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" v-else>
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
<div>
<span class="material-symbols-outlined mb-2 !text-[32px] block">
{{ file.icon }}
@@ -557,18 +557,20 @@
const clickedLi = e.target.closest('li');
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;
// document.onmousemove = (e) => {
// console.log('x:', e.pageX);
// console.log('y:', e.pageY);
// }
},
}
</script>
<style scoped>
: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) {
@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
}
: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) {
@apply focus:!shadow-none !text-neutral-900