Merge pull request #994 from nextcloud-libraries/fix/stable4-alignment

[stable4] Fix table alignment

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;
+		}
 	}
 }

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;
 			}

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;
+}

lib/components/FilePicker/FileListRow.vue

@@ -21,7 +21,7 @@
 		</td>
 		<td class="row-name">
 			<div class="file-picker__name-container" data-testid="row-name">
-				<div class="file-picker__file-icon" :style="{ backgroundImage }" />
+				<div :class="fileListIconStyles['file-picker__file-icon']" :style="{ backgroundImage }" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
 				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 import { t } from '../../utils/l10n'
 
 import NcDatetime from './NcDatetime.vue'
+import fileListIconStyles from './FileListIcon.module.scss'
 
 const props = defineProps<{
 	/** Can directories be picked */
@@ -137,15 +138,6 @@ function handleKeyDown(event: KeyboardEvent) {
 		height: 100%;
 	}
 
-	&__file-icon {
-		width: 32px;
-		height: 32px;
-		min-width: 32px;
-		min-height: 32px;
-		background-repeat: no-repeat;
-		background-size: contain;
-	}
-
 	&__file-name {
 		padding-inline-start: 6px;
 		min-width: 0;

lib/components/FilePicker/FilePicker.vue

@@ -282,6 +282,8 @@ export default {
 		// Auto fit height
 		min-height: 0;
 		flex: 1;
+		// align with navigation on smaller screens
+		padding-inline: 2px;
 
 		* {
 			box-sizing: border-box;

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;
 	}
 

lib/global.d.ts

@@ -1 +1,5 @@
-declare const __TRANSLATIONS__: {locale: string, json: any}[]
+declare const __TRANSLATIONS__: {locale: string, json: any}[]
+
+// Allow css modules
+declare module '*.module.css';
+declare module '*.module.scss';