fix(FilePicker): Fix design review comments about column alignment an…

…d overflow Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud-libraries · Aug 10, 2023 · 1154e4e · 1154e4e
1 parent 7f4bb9a
commit 1154e4e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/lib/components/FilePicker/FileList.scss b/lib/components/FilePicker/FileList.scss
@@ -8,8 +8,8 @@ tr.file-picker__row {
 		padding-inline: 14px 0;
 		border-bottom: none; // remove lines between elements
 
-		// Make "size" and "modified" rows end aligned
-		&:not(:nth-of-type(2)) {
+		// Make column "size" end aligned
+		&.row-size {
 			text-align: end;
 			padding-inline: 0 14px; // align with header
 		}

diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
@@ -186,7 +186,7 @@ function onChangeDirectory(dir: Node) {
 				width: 44px;
 			}
 			&.row-name {
-				width: 150px;
+				width: 230px;
 			}
 			&.row-size {
 				width: 100px;
@@ -198,7 +198,7 @@ function onChangeDirectory(dir: Node) {
 
 		// >> begin of hacks for table header sorting buttons
 		// TODO: Remove this hack after ... is available
-		th:nth-of-type(2) {
+		th:not(.row-size) {
 			:deep(.button-vue__wrapper) {
 				justify-content: start;
 				flex-direction: row-reverse;
@@ -207,7 +207,7 @@ function onChangeDirectory(dir: Node) {
 				padding-inline: 16px 4px;
 			}
 		}
-		th:not(:nth-of-type(2)) :deep(.button-vue__wrapper) {
+		th.row-size :deep(.button-vue__wrapper) {
 			justify-content: end;
 		}
 		th :deep(.button-vue__wrapper) {

diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue
@@ -11,7 +11,7 @@
 		<td class="row-name" @click="handleClick">
 			<div class="file-picker__name-container">
 				<div class="file-picker__file-icon" :style="{ backgroundImage }" />
-				<div class="file-picker__file-name" v-text="displayName" />
+				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
 			</div>
 		</td>
 		<td class="row-size">
@@ -112,6 +112,9 @@ function handleKeyDown(event: KeyboardEvent) {
 
 	&__file-name {
 		padding-inline-start: 6px;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 }
 </style>