upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

Merge pull request #12350 from nextcloud/filepicker-sorting

Browse source 
Enable sorting in file picker
This commit is contained in:
Morris Jobke 2018-11-20 13:34:51 +01:00 committed by GitHub
commit a9de88e96e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 128 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
core/css/styles.scss
View file

@ -773,6 +773,47 @@ code {
margin-bottom: 50px;
}
.filelist {
thead {
tr {
border-bottom: 1px solid var(--color-border);
background-color: var(--color-main-background);
th {
width: 80%;
border: none;
}
}
}
th .columntitle {
display: block;
padding: 15px;
height: 50px;
box-sizing: border-box;
-moz-box-sizing: border-box;
vertical-align: middle;
}
th .columntitle.name {
padding-left: 5px;
margin-left: 50px;
}
th .sort-indicator {
width: 10px;
height: 8px;
margin-left: 5px;
display: inline-block;
vertical-align: text-bottom;
opacity: .3;
}
.sort-indicator.hidden,
th:hover .sort-indicator.hidden,
th:focus .sort-indicator.hidden {
visibility: hidden;
}
th:hover .sort-indicator.hidden,
th:focus .sort-indicator.hidden {
visibility: visible;
}
td {
padding: 14px;
border-bottom: 1px solid var(--color-border);

65
core/js/oc-dialogs.js
View file

@ -192,6 +192,9 @@ var OCdialogs = {
*/
filepicker:function(title, callback, multiselect, mimetypeFilter, modal, type) {
var self = this;
this.filepicker.sortField = 'name';
this.filepicker.sortOrder = 'asc';
// avoid opening the picker twice
if (this.filepicker.loading) {
return;
@ -252,7 +255,9 @@ var OCdialogs = {
}
self.$filePicker.ready(function() {
self.$fileListHeader = self.$filePicker.find('.filelist thead tr');
self.$filelist = self.$filePicker.find('.filelist tbody');
self.$filelistContainer = self.$filePicker.find('.filelist-container');
self.$dirTree = self.$filePicker.find('.dirtree');
self.$dirTree.on('click', 'div:not(:last-child)', self, function (event) {
self._handleTreeListSelect(event, type);
@ -260,6 +265,12 @@ var OCdialogs = {
self.$filelist.on('click', 'tr', function(event) {
self._handlePickerClick(event, $(this), type);
});
self.$fileListHeader.on('click', 'a', function(event) {
var dir = self.$filePicker.data('path');
self.filepicker.sortField = $(event.currentTarget).data('sort');
self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc';
self._fillFilePicker(dir);
});
self._fillFilePicker('');
});
@ -824,7 +835,7 @@ var OCdialogs = {
var self = this;
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
self.$filePickerTemplate = $(tmpl);
self.$listTmpl = self.$filePickerTemplate.find('.filelist tr:first-child').detach();
self.$listTmpl = self.$filePickerTemplate.find('.filelist tbody tr:first-child').detach();
defer.resolve(self.$filePickerTemplate);
})
.fail(function(jqXHR, textStatus, errorThrown) {
@ -886,34 +897,68 @@ var OCdialogs = {
*/
_fillFilePicker:function(dir) {
var self = this;
this.$filelist.empty().addClass('icon-loading');
this.$filelist.empty();
this.$filePicker.find('.emptycontent').hide();
this.$filelistContainer.addClass('icon-loading');
this.$filePicker.data('path', dir);
var filter = this.$filePicker.data('mimetype');
if (typeof(filter) === "string") {
filter = [filter];
}
self.$fileListHeader.find('.sort-indicator').addClass('hidden').removeClass('icon-triangle-n').removeClass('icon-triangle-s');
self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').removeClass('hidden');
if (self.filepicker.sortOrder === 'asc') {
self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').addClass('icon-triangle-n');
} else {
self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').addClass('icon-triangle-s');
}
self.filepicker.filesClient.getFolderContents(dir).then(function(status, files) {
if (filter && filter.length > 0 && filter.indexOf('*') === -1) {
files = files.filter(function (file) {
return file.type === 'dir' || filter.indexOf(file.mimetype) !== -1;
});
}
files = files.sort(function(a, b) {
if (a.type === 'dir' && b.type !== 'dir') {
return -1;
} else if(a.type !== 'dir' && b.type === 'dir') {
return 1;
} else {
return a.name.localeCompare(b.name, undefined, {numeric: true});
var Comparators = {
name: function(fileInfo1, fileInfo2) {
if (fileInfo1.type === 'dir' && fileInfo2.type !== 'dir') {
return -1;
}
if (fileInfo1.type !== 'dir' && fileInfo2.type === 'dir') {
return 1;
}
return OC.Util.naturalSortCompare(fileInfo1.name, fileInfo2.name);
},
size: function(fileInfo1, fileInfo2) {
return fileInfo1.size - fileInfo2.size;
},
mtime: function(fileInfo1, fileInfo2) {
return fileInfo1.mtime - fileInfo2.mtime;
}
};
var comparator = Comparators[self.filepicker.sortField] || Comparators.name;
files = files.sort(function(file1, file2) {
var isFavorite = function(fileInfo) {
return fileInfo.tags && fileInfo.tags.indexOf(OC.TAG_FAVORITE) >= 0;
};
if (isFavorite(file1) && !isFavorite(file2)) {
return -1;
} else if (!isFavorite(file1) && isFavorite(file2)) {
return 1;
}
return self.filepicker.sortOrder === 'asc' ? comparator(file1, file2) : -comparator(file1, file2);
});
self._fillSlug();
if (files.length === 0) {
self.$filePicker.find('.emptycontent').show();
self.$fileListHeader.hide();
} else {
self.$filePicker.find('.emptycontent').hide();
self.$fileListHeader.show();
}
$.each(files, function(idx, entry) {
@ -953,7 +998,7 @@ var OCdialogs = {
self.$filelist.append($row);
});
self.$filelist.removeClass('icon-loading');
self.$filelistContainer.removeClass('icon-loading');
});
},
/**

42
core/templates/filepicker.html
View file

@ -8,17 +8,39 @@
<h2>{emptytext}</h2>
</div>
<table id="filestable" class="filelist list-container view-grid">
<thead>
<tr>
<th id="headerName" class="column-name">
<div id="headerName-container">
<a class="name sort columntitle" data-sort="name">
<span>Name</span>
<span class="sort-indicator hidden icon-triangle-n"></span>
</a>
</div>
</th>
<th id="headerSize" class="column-size">
<a class="size sort columntitle" data-sort="size">
<span>Size</span>
<span class="sort-indicator hidden icon-triangle-n"></span></a>
</th>
<th id="headerDate" class="column-mtime">
<a id="modified" class="columntitle" data-sort="mtime">
<span>Modified</span>
<span class="sort-indicator hidden icon-triangle-n"></span></a>
</th>
</tr>
</thead>
<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>
<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>