mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 2016-10-17 14:26:25 +02:00
parent 590016a978
commit 14f78369d7
No known key found for this signature in database
GPG Key ID: 425003AC385454C5
4 changed files with 57 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/css/mobile.css
View File

@ -141,6 +141,7 @@ table.multiselect thead {
/* do not show dates in filepicker */ /* do not show dates in filepicker */
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date { #oc-dialog-filepicker-content .filelist .date {
display: none; display: none;
} }

41
core/css/styles.css
View File

@ -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:not(:last-child) { cursor: pointer; }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; } #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 .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
#oc-dialog-filepicker-content .filelist { #oc-dialog-filepicker-content .filelist-container {
overflow-y:auto; display: inline-block;
overflow-y: auto;
height: 290px; height: 290px;
width: 100%;
border-top: 1px solid #eee;
}
#oc-dialog-filepicker-content .filelist {
background-color:white; background-color:white;
width:100%; width:100%;
} }
#oc-dialog-filepicker-content .filelist li:first-child { #oc-dialog-filepicker-content .filelist td {
border-top: 1px solid #eee; padding: 14px;
}
#oc-dialog-filepicker-content .filelist li {
position: relative;
height: 40px;
padding: 5px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
#oc-dialog-filepicker-content .filelist .filename { #oc-dialog-filepicker-content .filelist .filename {
position: absolute;
padding-top: 9px;
max-width: 60%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; 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; #oc-dialog-filepicker-content .filelist .filesize,
width: 32px;
}
#oc-dialog-filepicker-content .filelist .date { #oc-dialog-filepicker-content .filelist .date {
float: right; width: 80px;
margin-right: 10px; }
margin-top: 0;
padding-top: 9px; #oc-dialog-filepicker-content .filelist .filesize {
text-align: right;
} }
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;} #oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
.ui-dialog {position:fixed !important;} .ui-dialog {position:fixed !important;}

33
core/js/oc-dialogs.js
View File

@ -173,10 +173,10 @@ var OCdialogs = {
$('body').append(self.$filePicker); $('body').append(self.$filePicker);
self.$filePicker.ready(function() { 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 = self.$filePicker.find('.dirtree');
self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self)); 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._handlePickerClick(event, $(this));
}); });
self._fillFilePicker(''); self._fillFilePicker('');
@ -188,12 +188,12 @@ var OCdialogs = {
var datapath; var datapath;
if (multiselect === true) { if (multiselect === true) {
datapath = []; datapath = [];
self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) { self.$filelist.find('tr.filepicker_element_selected').each(function(index, element) {
datapath.push(self.$filePicker.data('path') + '/' + $(element).text()); datapath.push(self.$filePicker.data('path') + '/' + $(element).data('entryname'));
}); });
} else { } else {
datapath = self.$filePicker.data('path'); 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); callback(datapath);
self.$filePicker.ocdialog('close'); self.$filePicker.ocdialog('close');
@ -685,7 +685,7 @@ var OCdialogs = {
var self = this; var self = this;
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) { $.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
self.$filePickerTemplate = $(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); defer.resolve(self.$filePickerTemplate);
}) })
.fail(function(jqXHR, textStatus, errorThrown) { .fail(function(jqXHR, textStatus, errorThrown) {
@ -770,30 +770,35 @@ var OCdialogs = {
$.each(files, function(idx, entry) { $.each(files, function(idx, entry) {
entry.icon = OC.MimeType.getIconUrl(entry.mimetype); 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, type: entry.type,
dir: dir, dir: dir,
filename: entry.name, 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') { if (entry.type === 'file') {
var urlSpec = { var urlSpec = {
file: dir + '/' + entry.name, file: dir + '/' + entry.name,
}; };
$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
var img = new Image(); var img = new Image();
var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec); var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
img.onload = function() { img.onload = function() {
if (img.width > 5) { if (img.width > 5) {
$li.find('img').attr('src', previewUrl); $row.find('td.filename').attr('style', 'background-image:url(' + previewUrl + ')');
} }
}; };
img.src = previewUrl; img.src = previewUrl;
} }
else { self.$filelist.append($row);
$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
}
self.$filelist.append($li);
}); });
self.$filelist.removeClass('icon-loading'); self.$filelist.removeClass('icon-loading');

23
core/templates/filepicker.html
View File

@ -1,10 +1,19 @@
<div id="{dialog_name}" title="{title}"> <div id="{dialog_name}" title="{title}">
<span class="dirtree breadcrumb"></span> <span class="dirtree breadcrumb"></span>
<ul class="filelist"> <div class="filelist-container">
<li data-entryname="{filename}" data-type="{type}"> <table id="filestable" class="filelist">
<img /> <tbody>
<span class="filename">{filename}</span> <tr data-entryname="{filename}" data-type="{type}">
<span class="date">{date}</span> <td class="filename"
</li> style="background-image:url({icon})">{filename}
</ul> </td>
<td class="filesize"
style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
{size}
</td>
<td class="date">{date}</td>
</tr>
</tbody>
</table>
</div>
</div> </div>