fix(FilePicker): Align table header for "name" with the file name (pr…

…eviously the preview icon) Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud-libraries · Sep 12, 2023 · 5d1cc1d · 5d1cc1d
1 parent 3263047
commit 5d1cc1d
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 30 deletions.
diff --git a/lib/components/FilePicker/FileList.scss b/lib/components/FilePicker/FileList.scss
@@ -5,13 +5,21 @@ tr.file-picker__row {
 		cursor: pointer;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		padding-inline: 14px 0;
 		border-bottom: none; // remove lines between elements
 
+		// checkbox is always fully left aligned
+		&:not(.row-checkbox) {
+			padding-inline: 14px 0;
+		}
+
 		// Make column "size" end aligned
 		&.row-size {
 			text-align: end;
 			padding-inline: 0 14px; // align with header
 		}
+		// column "name" already has the padding (the preview icon)
+		&.row-name {
+			padding-inline: 2px 0;
+		}
 	}
 }
diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
@@ -14,18 +14,21 @@
 							@update:checked="onSelectAll" />
 					</th>
 					<th :aria-sort="sortByName" class="row-name">
-						<NcButton
-							:wide="true"
-							type="tertiary"
-							data-test="file-picker_sort-name"
-							@click="toggleSortByName">
-							<template #icon>
-								<IconSortAscending v-if="sortByName === 'ascending'" :size="20" />
-								<IconSortDescending v-else-if="sortByName === 'descending'" :size="20" />
-								<span v-else style="width: 44px" />
-							</template>
-							{{ t('Name') }}
-						</NcButton>
+						<div class="header-wrapper">
+							<span class="file-picker__header-preview" />
+							<NcButton
+								:wide="true"
+								type="tertiary"
+								data-test="file-picker_sort-name"
+								@click="toggleSortByName">
+								<template #icon>
+									<IconSortAscending v-if="sortByName === 'ascending'" :size="20" />
+									<IconSortDescending v-else-if="sortByName === 'descending'" :size="20" />
+									<span v-else style="width: 44px" />
+								</template>
+								{{ t('Name') }}
+							</NcButton>
+						</div>
 					</th>
 					<th :aria-sort="sortBySize" class="row-size">
 						<NcButton :wide="true" type="tertiary" @click="toggleSortBySize">
@@ -214,6 +217,12 @@ const fileContainer = ref<HTMLDivElement>()
 
 <style scoped lang="scss">
 .file-picker {
+	&__header-preview {
+		width: 22px; // 32px - 16px padding of button + 6px padding in file list rows
+		height: 32px;
+		flex: 0 0 auto; // do not shrink or grow
+	}
+
 	&__files {
 		// ensure focus outlines are visible
 		margin: 2px;
@@ -232,6 +241,10 @@ const fileContainer = ref<HTMLDivElement>()
 			// ensure focus outline of buttons is visible
 			padding: 2px;
 
+			.header-wrapper {
+				display: flex;
+			}
+
 			&.row-checkbox {
 				width: 44px;
 			}

diff --git a/lib/components/FilePicker/FileListIcon.module.scss b/lib/components/FilePicker/FileListIcon.module.scss
@@ -0,0 +1,15 @@
+/**
+ * Icon styling of the file list row preview or fallback icon
+ * (leading icon on the name row and header)
+ */
+.file-picker__file-icon {
+	width: 32px;
+	height: 32px;
+	min-width: 32px;
+	min-height: 32px;
+	background-repeat: no-repeat;
+	background-size: contain;
+	// for the fallback
+	display: flex;
+	justify-content: center;
+}
diff --git a/lib/components/FilePicker/FilePreview.vue b/lib/components/FilePicker/FilePreview.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :style="canLoadPreview ? { backgroundImage: `url(${previewURL})`} : undefined"
 		:aria-label="t('Mime type {mime}', { mime: node.mime || t('unknown') })"
-		class="file-picker__file-icon">
+		:class="fileListIconStyles['file-picker__file-icon']">
 		<template v-if="!canLoadPreview">
 			<IconFile v-if="isFile" :size="20" />
 			<IconFolder v-else :size="20" />
@@ -18,6 +18,11 @@ import { t } from '../../utils/l10n'
 import IconFile from 'vue-material-design-icons/File.vue'
 import IconFolder from 'vue-material-design-icons/Folder.vue'
 
+// CSS modules
+import fileListIconStylesModule from './FileListIcon.module.scss'
+// workaround for vue2.7 bug, can be removed with vue3
+const fileListIconStyles = ref(fileListIconStylesModule)
+
 const props = defineProps<{
 	node: Node
 }>()
@@ -39,17 +44,3 @@ watch(previewURL, () => {
 	}
 }, { immediate: true })
 </script>
-
-<style scoped lang="scss">
-.file-picker__file-icon {
-	width: 32px;
-	height: 32px;
-	min-width: 32px;
-	min-height: 32px;
-	background-repeat: no-repeat;
-	background-size: contain;
-	// for the fallback
-	display: flex;
-	justify-content: center;
-}
-</style>
diff --git a/lib/components/FilePicker/LoadingTableRow.vue b/lib/components/FilePicker/LoadingTableRow.vue
@@ -5,7 +5,10 @@
 			<span />
 		</td>
 		<td class="row-name">
-			<span />
+			<div class="row-wrapper">
+				<span :class="fileListIconStyles['file-picker__file-icon']" />
+				<span />
+			</div>
 		</td>
 		<td class="row-size">
 			<span />
@@ -17,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import fileListIconStyles from './FileListIcon.module.scss'
+
 defineProps<{
 	/**
 	 * Does the filelist use the checkbox column
@@ -55,11 +60,17 @@ defineProps<{
 		animation: gradient 12s ease infinite;
 	}
 
+	.row-wrapper {
+		display: inline-flex;
+		align-items: center;
+	}
+
 	.row-checkbox span {
 		width: 24px;
 	}
 
-	.row-name span {
+	.row-name span:last-of-type {
+		margin-inline-start: 6px;
 		width: 130px;
 	}