Use a table for the filepicker list and add size column
Signed-off-by: Robin Appelman <robin@icewind.nl>
This commit is contained in:
Robin Appelman
parent
590016a978
commit
14f78369d7
4 changed files with 57 additions and 41 deletions
|
|
@ -141,6 +141,7 @@ table.multiselect thead {
|
|||
|
||||
|
||||
/* do not show dates in filepicker */
|
||||
#oc-dialog-filepicker-content .filelist .filesize,
|
||||
#oc-dialog-filepicker-content .filelist .date {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -774,39 +774,40 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
|
|||
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
|
||||
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
|
||||
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
|
||||
#oc-dialog-filepicker-content .filelist {
|
||||
overflow-y:auto;
|
||||
#oc-dialog-filepicker-content .filelist-container {
|
||||
display: inline-block;
|
||||
overflow-y: auto;
|
||||
height: 290px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filelist {
|
||||
background-color:white;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#oc-dialog-filepicker-content .filelist li:first-child {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filelist li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
#oc-dialog-filepicker-content .filelist td {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filelist .filename {
|
||||
position: absolute;
|
||||
padding-top: 9px;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 51px;
|
||||
background-position: 7px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filelist img {
|
||||
margin: 2px 1em 0 4px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#oc-dialog-filepicker-content .filelist .filesize,
|
||||
#oc-dialog-filepicker-content .filelist .date {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-top: 0;
|
||||
padding-top: 9px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#oc-dialog-filepicker-content .filelist .filesize {
|
||||
text-align: right;
|
||||
}
|
||||
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
|
||||
.ui-dialog {position:fixed !important;}
|
||||
|
|
|
|||
|
|
@ -173,10 +173,10 @@ var OCdialogs = {
|
|||
$('body').append(self.$filePicker);
|
||||
|
||||
self.$filePicker.ready(function() {
|
||||
self.$filelist = self.$filePicker.find('.filelist');
|
||||
self.$filelist = self.$filePicker.find('.filelist tbody');
|
||||
self.$dirTree = self.$filePicker.find('.dirtree');
|
||||
self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self));
|
||||
self.$filelist.on('click', 'li', function(event) {
|
||||
self.$filelist.on('click', 'tr', function(event) {
|
||||
self._handlePickerClick(event, $(this));
|
||||
});
|
||||
self._fillFilePicker('');
|
||||
|
|
@ -188,12 +188,12 @@ var OCdialogs = {
|
|||
var datapath;
|
||||
if (multiselect === true) {
|
||||
datapath = [];
|
||||
self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) {
|
||||
datapath.push(self.$filePicker.data('path') + '/' + $(element).text());
|
||||
self.$filelist.find('tr.filepicker_element_selected').each(function(index, element) {
|
||||
datapath.push(self.$filePicker.data('path') + '/' + $(element).data('entryname'));
|
||||
});
|
||||
} else {
|
||||
datapath = self.$filePicker.data('path');
|
||||
datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
|
||||
datapath += '/' + self.$filelist.find('tr.filepicker_element_selected').data('entryname');
|
||||
}
|
||||
callback(datapath);
|
||||
self.$filePicker.ocdialog('close');
|
||||
|
|
@ -685,7 +685,7 @@ var OCdialogs = {
|
|||
var self = this;
|
||||
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
|
||||
self.$filePickerTemplate = $(tmpl);
|
||||
self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach();
|
||||
self.$listTmpl = self.$filePickerTemplate.find('.filelist tr:first-child').detach();
|
||||
defer.resolve(self.$filePickerTemplate);
|
||||
})
|
||||
.fail(function(jqXHR, textStatus, errorThrown) {
|
||||
|
|
@ -770,30 +770,35 @@ var OCdialogs = {
|
|||
|
||||
$.each(files, function(idx, entry) {
|
||||
entry.icon = OC.MimeType.getIconUrl(entry.mimetype);
|
||||
var $li = self.$listTmpl.octemplate({
|
||||
if (typeof(entry.size) !== 'undefined' && entry.size >= 0) {
|
||||
var simpleSize = humanFileSize(parseInt(entry.size, 10), true);
|
||||
var sizeColor = Math.round(160 - Math.pow((entry.size / (1024 * 1024)), 2));
|
||||
} else {
|
||||
simpleSize = t('files', 'Pending');
|
||||
}
|
||||
var $row = self.$listTmpl.octemplate({
|
||||
type: entry.type,
|
||||
dir: dir,
|
||||
filename: entry.name,
|
||||
date: OC.Util.relativeModifiedDate(entry.mtime)
|
||||
date: OC.Util.relativeModifiedDate(entry.mtime),
|
||||
size: simpleSize,
|
||||
sizeColor: sizeColor,
|
||||
icon: entry.icon
|
||||
});
|
||||
if (entry.type === 'file') {
|
||||
var urlSpec = {
|
||||
file: dir + '/' + entry.name,
|
||||
};
|
||||
$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
|
||||
var img = new Image();
|
||||
var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
|
||||
img.onload = function() {
|
||||
if (img.width > 5) {
|
||||
$li.find('img').attr('src', previewUrl);
|
||||
$row.find('td.filename').attr('style', 'background-image:url(' + previewUrl + ')');
|
||||
}
|
||||
};
|
||||
img.src = previewUrl;
|
||||
}
|
||||
else {
|
||||
$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
|
||||
}
|
||||
self.$filelist.append($li);
|
||||
self.$filelist.append($row);
|
||||
});
|
||||
|
||||
self.$filelist.removeClass('icon-loading');
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
<div id="{dialog_name}" title="{title}">
|
||||
<span class="dirtree breadcrumb"></span>
|
||||
<ul class="filelist">
|
||||
<li data-entryname="{filename}" data-type="{type}">
|
||||
<img />
|
||||
<span class="filename">{filename}</span>
|
||||
<span class="date">{date}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="filelist-container">
|
||||
<table id="filestable" class="filelist">
|
||||
<tbody>
|
||||
<tr data-entryname="{filename}" data-type="{type}">
|
||||
<td class="filename"
|
||||
style="background-image:url({icon})">{filename}
|
||||
</td>
|
||||
<td class="filesize"
|
||||
style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
|
||||
{size}
|
||||
</td>
|
||||
<td class="date">{date}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue