diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-30 10:28:42 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-30 10:28:59 +0100 |
| commit | c12545b58120423c31241cbd88b376eb756d109c (patch) | |
| tree | 8d025a5d09a1386b2ed6487c7b442d1e4a4407a8 | |
| parent | 809058cb3ca68c74307b056c1581836f2b51b260 (diff) | |
| download | nextcloud-server-c12545b58120423c31241cbd88b376eb756d109c.tar.gz nextcloud-server-c12545b58120423c31241cbd88b376eb756d109c.zip | |
Truncate filename in the middle on filepicker
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
| -rw-r--r-- | core/css/styles.scss | 13 | ||||
| -rw-r--r-- | core/js/oc-dialogs.js | 15 | ||||
| -rw-r--r-- | core/templates/filepicker.html | 6 |
3 files changed, 33 insertions, 1 deletions
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})"> |