Merge pull request #14912 from nextcloud/fix/filepicker/truncated-filename
Truncate filename in the middle on filepicker
This commit is contained in:
commit
0f2490d740
|
@ -874,6 +874,16 @@ code {
|
||||||
padding-left: 51px;
|
padding-left: 51px;
|
||||||
background-position: 7px 7px;
|
background-position: 7px 7px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
// avoid taking full width
|
||||||
|
max-width: 0;
|
||||||
|
.filename-parts {
|
||||||
|
display: flex;
|
||||||
|
&__first {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.filesize, .date {
|
.filesize, .date {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
@ -917,6 +927,9 @@ code {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
line-height: $name-height;
|
line-height: $name-height;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
|
.filename-parts {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.filesize {
|
&.filesize {
|
||||||
line-height: $name-height / 3;
|
line-height: $name-height / 3;
|
||||||
|
|
|
@ -1063,10 +1063,25 @@ var OCdialogs = {
|
||||||
simpleSize = t('files', 'Pending');
|
simpleSize = t('files', 'Pending');
|
||||||
sizeColor = 80;
|
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({
|
var $row = self.$listTmpl.octemplate({
|
||||||
type: entry.type,
|
type: entry.type,
|
||||||
dir: dir,
|
dir: dir,
|
||||||
filename: entry.name,
|
filename: entry.name,
|
||||||
|
filename1: filename1,
|
||||||
|
filename2: filename2,
|
||||||
date: OC.Util.relativeModifiedDate(entry.mtime),
|
date: OC.Util.relativeModifiedDate(entry.mtime),
|
||||||
size: simpleSize,
|
size: simpleSize,
|
||||||
sizeColor: sizeColor,
|
sizeColor: sizeColor,
|
||||||
|
|
|
@ -43,7 +43,11 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr data-entryname="{filename}" data-type="{type}">
|
<tr data-entryname="{filename}" data-type="{type}">
|
||||||
<td class="filename"
|
<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>
|
||||||
<td class="filesize"
|
<td class="filesize"
|
||||||
style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
|
style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
|
||||||
|
|
Loading…
Reference in New Issue