fix(files): selected files actions position on scroll/with readme block

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Feb 5, 2024 · 213e74e · 213e74e
1 parent d7b404f
commit 213e74e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
@@ -339,14 +339,21 @@ export default defineComponent({
 
 		.files-list__table {
 			display: block;
+
+			&.files-list__table--with-thead-overlay {
+				// Hide the table header below the overlay
+				margin-top: calc(-1 * var(--row-height));
+			}
 		}
 
 		.files-list__thead-overlay {
-			position: absolute;
+			// Pinned on top when scrolling
+			position: sticky;
 			top: 0;
-			left: var(--row-height); // Save space for a row checkbox
-			right: 0;
-			z-index: 1000;
+			// Save space for a row checkbox
+			margin-left: var(--row-height);
+			// More than .files-list__thead
+			z-index: 20;
 
 			display: flex;
 			align-items: center;

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="files-list" data-cy-files-list>
-		<div v-if="!!$scopedSlots['header-overlay']" class="files-list__thead-overlay">
-			<slot name="header-overlay" />
-		</div>
-
 		<!-- Header -->
 		<div ref="before" class="files-list__before">
 			<slot name="before" />
 		</div>
 
-		<table class="files-list__table">
+		<div v-if="!!$scopedSlots['header-overlay']" class="files-list__thead-overlay">
+			<slot name="header-overlay" />
+		</div>
+
+		<table class="files-list__table" :class="{ 'files-list__table--with-thead-overlay': !!$scopedSlots['header-overlay'] }">
 			<!-- Accessibility table caption for screen readers -->
 			<caption v-if="caption" class="hidden-visually">
 				{{ caption }}