Merge pull request #14912 from nextcloud/fix/filepicker/truncated-filename

Truncate filename in the middle on filepicker

core/css/styles.scss

@@ -874,6 +874,16 @@ code {
 			padding-left: 51px;
 			background-position: 7px 7px;
 			cursor: pointer;
+			// avoid taking full width
+			max-width: 0;
+			.filename-parts {
+				display: flex;
+				&__first {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
 		}
 		.filesize, .date {
 			width: 80px;
@@ -917,6 +927,9 @@ code {
 							background-size: contain;
 							line-height: $name-height;
 							max-width: none;
+							.filename-parts {
+								justify-content: center;
+							}
 						}
 						&.filesize {
 							line-height: $name-height / 3;

core/js/oc-dialogs.js

@@ -1063,10 +1063,25 @@ var OCdialogs = {
 					simpleSize = t('files', 'Pending');
 					sizeColor = 80;
 				}
+
+				// split the filename in half if the size is bigger than 20 char
+				// for ellipsis
+				if (entry.name.length >= 10) {
+					// leave maximum 10 letters
+					var split = Math.min(Math.floor(entry.name.length / 2), 10)
+					var filename1 = entry.name.substr(0, entry.name.length - split)
+					var filename2 = entry.name.substr(entry.name.length - split)
+				} else {
+					var filename1 = entry.name
+					var filename2 = ''
+				}
+
 				var $row = self.$listTmpl.octemplate({
 					type: entry.type,
 					dir: dir,
 					filename: entry.name,
+					filename1: filename1,
+					filename2: filename2,
 					date: OC.Util.relativeModifiedDate(entry.mtime),
 					size: simpleSize,
 					sizeColor: sizeColor,

core/templates/filepicker.html

@@ -43,7 +43,11 @@
 			<tbody>
 				<tr data-entryname="{filename}" data-type="{type}">
 					<td class="filename"
-						style="background-image:url({icon})">{filename}
+						style="background-image:url({icon})">
+						<span class="filename-parts">
+							<span class="filename-parts__first">{filename1}</span>
+							<span class="filename-parts__last">{filename2}</span>
+						</div>
 					</td>
 					<td class="filesize"
 						style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">