From aa3c80bacb50ba442f43fee7259247ce9d2b41f1 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Mon, 24 Jun 2024 08:28:53 +0000 Subject: [PATCH] fix(nc-gui): make audit log table first column stick --- .../nc-gui/components/workspace/AuditLogs.vue | 174 ++++++++++++------ 1 file changed, 120 insertions(+), 54 deletions(-) diff --git a/packages/nc-gui/components/workspace/AuditLogs.vue b/packages/nc-gui/components/workspace/AuditLogs.vue index 3ba2d2e821..0e2dc2aff7 100644 --- a/packages/nc-gui/components/workspace/AuditLogs.vue +++ b/packages/nc-gui/components/workspace/AuditLogs.vue @@ -70,6 +70,8 @@ const isRowExpanded = ref(false) const selectedAudit = ref(null) +const tableWrapper = ref() + const auditDropdowns = ref({ type: false, subType: false, @@ -324,6 +326,20 @@ onMounted(async () => { await loadAudits(currentPage.value, currentLimit.value, false) } }) + +useEventListener(tableWrapper, 'scroll', () => { + const stickyHeaderCell = tableWrapper.value?.querySelector('th.cell-user') + const nonStickyHeaderFirstCell = tableWrapper.value?.querySelector('th.cell-base') + if (!stickyHeaderCell?.getBoundingClientRect().right || !nonStickyHeaderFirstCell?.getBoundingClientRect().left) { + return + } + + if (nonStickyHeaderFirstCell?.getBoundingClientRect().left < stickyHeaderCell?.getBoundingClientRect().right + 180) { + tableWrapper.value?.classList.add('sticky-shadow') + } else { + tableWrapper.value?.classList.remove('sticky-shadow') + } +})
{ } .nc-audit-logs-table { - .thead { - .th { + &.sticky-shadow { + th, + td { + &.cell-user { + box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.08); + } + } + } + thead { + th { @apply bg-gray-50 text-sm text-gray-600; + + &.cell-user { + @apply sticky left-0 z-4 bg-gray-50; + } } } - .tbody { - .tr { + tbody { + tr { @apply cursor-pointer; .td { @apply text-small leading-[18px] text-gray-600; } + + td { + &.cell-user { + @apply sticky left-0 z-4 bg-white; + } + } } } - .tr { - @apply h-[54px] flex overflow-hidden border-b-1 border-gray-200; + tr { + @apply h-[54px] flex border-b-1 border-gray-200; - &:hover .td { - @apply bg-gray-50; + &:hover td { + @apply !bg-gray-50; } - &.selected .td { - @apply bg-gray-50; + &.selected td { + @apply !bg-gray-50; } - .th, - .td { - @apply px-6 h-full flex items-center; + th, + td { + @apply h-full; + + & > div { + @apply px-6 h-full flex items-center; + } &.cell-user { - @apply w-[220px]; + @apply w-[220px] sticky left-0 z-5; } &.cell-timestamp,