diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 287dedc23f..4a8bd5bb30 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -152,16 +152,20 @@ table th .columntitle.name { padding-right: 80px; margin-left: 50px; } -/* hover effect on sortable column */ -table th a.columntitle:hover { - color: #000; -} + +.sort-indicator.hidden { visibility: hidden; } table th .sort-indicator { width: 10px; height: 8px; margin-left: 10px; display: inline-block; } +table th:hover .sort-indicator.hidden { + width: 10px; + height: 8px; + margin-left: 10px; + visibility: visible; +} table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; } table td { padding: 0 15px; @@ -367,7 +371,6 @@ table td.filename .uploadtext { left: 18px; } - #fileList tr td.filename { position: relative; width: 100%; @@ -432,7 +435,6 @@ a.action>img { margin-bottom: -1px; } - #fileList a.action { display: inline; padding: 18px 8px; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 61e73b7beb..4ff7d0c3fa 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -18,8 +18,8 @@ this.initialize($el, options); }; FileList.prototype = { - SORT_INDICATOR_ASC_CLASS: 'icon-triangle-s', - SORT_INDICATOR_DESC_CLASS: 'icon-triangle-n', + SORT_INDICATOR_ASC_CLASS: 'icon-triangle-n', + SORT_INDICATOR_DESC_CLASS: 'icon-triangle-s', id: 'files', appName: t('files', 'Files'), @@ -371,7 +371,12 @@ this.setSort(sort, (this._sortDirection === 'desc')?'asc':'desc'); } else { - this.setSort(sort, 'asc'); + if ( sort === 'name' ) { //default sorting of name is opposite to size and mtime + this.setSort(sort, 'asc'); + } + else { + this.setSort(sort, 'desc'); + } } this.reload(); } @@ -914,16 +919,25 @@ this._sort = sort; this._sortDirection = (direction === 'desc')?'desc':'asc'; this._sortComparator = comparator; + if (direction === 'desc') { this._sortComparator = function(fileInfo1, fileInfo2) { return -comparator(fileInfo1, fileInfo2); }; } this.$el.find('thead th .sort-indicator') - .removeClass(this.SORT_INDICATOR_ASC_CLASS + ' ' + this.SORT_INDICATOR_DESC_CLASS); + .removeClass(this.SORT_INDICATOR_ASC_CLASS) + .removeClass(this.SORT_INDICATOR_DESC_CLASS) + .toggleClass('hidden', true) + .addClass(this.SORT_INDICATOR_DESC_CLASS); + this.$el.find('thead th.column-' + sort + ' .sort-indicator') + .removeClass(this.SORT_INDICATOR_ASC_CLASS) + .removeClass(this.SORT_INDICATOR_DESC_CLASS) + .toggleClass('hidden', false) .addClass(direction === 'desc' ? this.SORT_INDICATOR_DESC_CLASS : this.SORT_INDICATOR_ASC_CLASS); }, + /** * Reloads the file list using ajax call * diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index ae22ae0123..0580177c5f 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -1696,7 +1696,7 @@ describe('OCA.Files.FileList tests', function() { var url = fakeServer.requests[0].url; var query = OC.parseQueryString(url.substr(url.indexOf('?') + 1)); expect(query.sort).toEqual('size'); - expect(query.sortdirection).toEqual('asc'); + expect(query.sortdirection).toEqual('desc'); }); it('Toggles sort direction when clicking on already sorted column', function() { fileList.$el.find('.column-name .columntitle').click(); @@ -1710,37 +1710,51 @@ describe('OCA.Files.FileList tests', function() { var ASC_CLASS = fileList.SORT_INDICATOR_ASC_CLASS; var DESC_CLASS = fileList.SORT_INDICATOR_DESC_CLASS; fileList.$el.find('.column-size .columntitle').click(); - // moves triangle to size column + // moves triangle to size column, check indicator on name is hidden expect( - fileList.$el.find('.column-name .sort-indicator').hasClass(ASC_CLASS + ' ' + DESC_CLASS) - ).toEqual(false); - expect( - fileList.$el.find('.column-size .sort-indicator').hasClass(ASC_CLASS) + fileList.$el.find('.column-name .sort-indicator').hasClass('hidden') ).toEqual(true); - - // click again on size column, reverses direction - fileList.$el.find('.column-size .columntitle').click(); + // check indicator on size is visible and defaults to descending + expect( + fileList.$el.find('.column-size .sort-indicator').hasClass('hidden') + ).toEqual(false); expect( fileList.$el.find('.column-size .sort-indicator').hasClass(DESC_CLASS) ).toEqual(true); // click again on size column, reverses direction fileList.$el.find('.column-size .columntitle').click(); + expect( + fileList.$el.find('.column-size .sort-indicator').hasClass('hidden') + ).toEqual(false); expect( fileList.$el.find('.column-size .sort-indicator').hasClass(ASC_CLASS) ).toEqual(true); + // click again on size column, reverses direction + fileList.$el.find('.column-size .columntitle').click(); + expect( + fileList.$el.find('.column-size .sort-indicator').hasClass('hidden') + ).toEqual(false); + expect( + fileList.$el.find('.column-size .sort-indicator').hasClass(DESC_CLASS) + ).toEqual(true); + // click on mtime column, moves indicator there fileList.$el.find('.column-mtime .columntitle').click(); expect( - fileList.$el.find('.column-size .sort-indicator').hasClass(ASC_CLASS + ' ' + DESC_CLASS) + fileList.$el.find('.column-size .sort-indicator').hasClass('hidden') + ).toEqual(true); + expect( + fileList.$el.find('.column-mtime .sort-indicator').hasClass('hidden') ).toEqual(false); expect( - fileList.$el.find('.column-mtime .sort-indicator').hasClass(ASC_CLASS) + fileList.$el.find('.column-mtime .sort-indicator').hasClass(DESC_CLASS) ).toEqual(true); }); it('Uses correct sort comparator when inserting files', function() { testFiles.sort(OCA.Files.FileList.Comparators.size); + testFiles.reverse(); //default is descending // this will make it reload the testFiles with the correct sorting fileList.$el.find('.column-size .columntitle').click(); expect(fakeServer.requests.length).toEqual(1); @@ -1764,17 +1778,16 @@ describe('OCA.Files.FileList tests', function() { etag: '999' }; fileList.add(newFileData); + expect(fileList.findFileEl('Three.pdf').index()).toEqual(0); + expect(fileList.findFileEl('new file.txt').index()).toEqual(1); + expect(fileList.findFileEl('Two.jpg').index()).toEqual(2); + expect(fileList.findFileEl('somedir').index()).toEqual(3); + expect(fileList.findFileEl('One.txt').index()).toEqual(4); expect(fileList.files.length).toEqual(5); expect(fileList.$fileList.find('tr').length).toEqual(5); - expect(fileList.findFileEl('One.txt').index()).toEqual(0); - expect(fileList.findFileEl('somedir').index()).toEqual(1); - expect(fileList.findFileEl('Two.jpg').index()).toEqual(2); - expect(fileList.findFileEl('new file.txt').index()).toEqual(3); - expect(fileList.findFileEl('Three.pdf').index()).toEqual(4); }); it('Uses correct reversed sort comparator when inserting files', function() { testFiles.sort(OCA.Files.FileList.Comparators.size); - testFiles.reverse(); // this will make it reload the testFiles with the correct sorting fileList.$el.find('.column-size .columntitle').click(); expect(fakeServer.requests.length).toEqual(1); @@ -1811,13 +1824,13 @@ describe('OCA.Files.FileList tests', function() { etag: '999' }; fileList.add(newFileData); + expect(fileList.findFileEl('One.txt').index()).toEqual(0); + expect(fileList.findFileEl('somedir').index()).toEqual(1); + expect(fileList.findFileEl('Two.jpg').index()).toEqual(2); + expect(fileList.findFileEl('new file.txt').index()).toEqual(3); + expect(fileList.findFileEl('Three.pdf').index()).toEqual(4); expect(fileList.files.length).toEqual(5); expect(fileList.$fileList.find('tr').length).toEqual(5); - expect(fileList.findFileEl('One.txt').index()).toEqual(4); - expect(fileList.findFileEl('somedir').index()).toEqual(3); - expect(fileList.findFileEl('Two.jpg').index()).toEqual(2); - expect(fileList.findFileEl('new file.txt').index()).toEqual(1); - expect(fileList.findFileEl('Three.pdf').index()).toEqual(0); }); }); /**