diff options
| author | Roeland Jago Douma <rullzer@users.noreply.github.com> | 2019-04-01 22:29:55 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-04-01 22:29:55 +0200 |
| commit | 0f2490d74069bfe037ffbfc633c95a531b7fdeb7 (patch) | |
| tree | eef822bf562a4d340d43f7906846172c1348806b /core | |
| parent | f34578586516af7c5659a9143c447b67dd50848d (diff) | |
| parent | c12545b58120423c31241cbd88b376eb756d109c (diff) | |
| download | nextcloud-server-0f2490d74069bfe037ffbfc633c95a531b7fdeb7.tar.gz nextcloud-server-0f2490d74069bfe037ffbfc633c95a531b7fdeb7.zip | |
Merge pull request #14912 from nextcloud/fix/filepicker/truncated-filename
Truncate filename in the middle on filepicker
Diffstat (limited to 'core')
| -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 8a311523f4f..8819b3404cc 100644 --- a/core/js/oc-dialogs.js +++ b/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, 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})"> |