From c12545b58120423c31241cbd88b376eb756d109c Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Sat, 30 Mar 2019 10:28:42 +0100
Subject: Truncate filename in the middle on filepicker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/styles.scss           | 13 +++++++++++++
 core/js/oc-dialogs.js          | 15 +++++++++++++++
 core/templates/filepicker.html |  6 +++++-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/core/css/styles.scss b/core/css/styles.scss
index da84befd16c..88361111d92 100644
--- a/core/css/styles.scss
+++ b/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;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index c08b72bf183..aa291006eb8 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -1060,10 +1060,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,
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 49e2baa82ec..6d55689fe3d 100644
--- a/core/templates/filepicker.html
+++ b/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})">
-- 
cgit v1.2.3