From a1f1d2c9e8eec24700ea2d0ecb5cfd7d45cb7529 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 17 Aug 2016 17:34:15 +0200 Subject: [PATCH] Fix hidden files handling Hidden files (dot files) are now always rendered in the DOM to make sure that all file operations and selection still work as expected. Their visibility is now toggled on CSS level. --- apps/files/css/files.css | 15 ++++++++ apps/files/js/filelist.js | 53 ++++++++++++++--------------- apps/files/js/files.js | 8 +++-- apps/files/tests/js/filelistSpec.js | 37 +++++++++++++++++++- 4 files changed, 82 insertions(+), 31 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 2e12d06bd9..1f21e461cf 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -348,6 +348,21 @@ table td.filename .nametext { margin-right: 50px; } +.hide-hidden-files #fileList tr.hidden-file, +.hide-hidden-files #fileList tr.hidden-file.dragging { + display: none; +} + +#fileList tr.animate-opacity { + -webkit-transition:opacity 250ms; + -moz-transition:opacity 250ms; + -o-transition:opacity 250ms; + transition:opacity 250ms; +} +#fileList tr.dragging { + opacity: 0.2; +} + table td.filename .nametext .innernametext { text-overflow: ellipsis; overflow: hidden; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 24aa718872..4a77709962 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -209,12 +209,6 @@ this._filesConfig = OCA.Files.App.getFilesConfig(); } - if (!_.isUndefined(this._filesConfig)) { - this._filesConfig.on('change:showhidden', function() { - self.setFiles(self.files); - }); - } - if (options.dragOptions) { this._dragOptions = options.dragOptions; } @@ -236,6 +230,21 @@ this.$table = $el.find('table:first'); this.$fileList = $el.find('#fileList'); + if (!_.isUndefined(this._filesConfig)) { + this._filesConfig.on('change:showhidden', function() { + var showHidden = this.get('showhidden'); + self.$el.toggleClass('hide-hidden-files', !showHidden); + + if (!showHidden) { + // hiding files could make the page too small, need to try rendering next page + self._onScroll(); + } + }); + + this.$el.toggleClass('hide-hidden-files', !this._filesConfig.get('showhidden')); + } + + if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) { this._detailsView = new OCA.Files.DetailsView(); this._detailsView.$el.insertBefore(this.$el); @@ -876,10 +885,6 @@ * @return array of DOM elements of the newly added files */ _nextPage: function(animate) { - // Save full files list while rendering - var allFiles = this.files; - this.files = this._filterHiddenFiles(this.files); - var index = this.$fileList.children().length, count = this.pageSize(), hidden, @@ -927,9 +932,6 @@ }, 0); } - // Restore full files list after rendering - this.files = allFiles; - return newTrs; }, @@ -968,8 +970,6 @@ this.$el.find('.select-all').prop('checked', false); // Save full files list while rendering - var allFiles = this.files; - this.files = this._filterHiddenFiles(this.files); this.isEmpty = this.files.length === 0; this._nextPage(); @@ -983,9 +983,6 @@ this.updateSelectionSummary(); $(window).scrollTop(0); - // Restore full files list after rendering - this.files = allFiles; - this.$fileList.trigger(jQuery.Event('updated')); _.defer(function() { self.$el.closest('#app-content').trigger(jQuery.Event('apprendered')); @@ -993,18 +990,14 @@ }, /** - * Filter hidden files of the given filesArray (dot-files) + * Returns whether the given file info must be hidden * - * @param filesArray files to be filtered - * @returns {array} + * @param {OC.Files.FileInfo} fileInfo file info + * + * @return {boolean} true if the file is a hidden file, false otherwise */ - _filterHiddenFiles: function(files) { - if (_.isUndefined(this._filesConfig) || this._filesConfig.get('showhidden')) { - return files; - } - return _.filter(files, function(file) { - return file.name.indexOf('.') !== 0; - }); + _isHiddenFile: function(file) { + return file.name && file.name.charAt(0) === '.'; }, /** @@ -1329,6 +1322,10 @@ tr.addClass('hidden'); } + if (this._isHiddenFile(fileData)) { + tr.addClass('hidden-file'); + } + // display actions this.fileActions.display(filenameTd, !options.silent, this); diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 8542bd5047..53e07ddb09 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -391,14 +391,18 @@ var dragOptions={ if (!$selectedFiles.length) { $selectedFiles = $(this); } - $selectedFiles.closest('tr').fadeTo(250, 0.2).addClass('dragging'); + $selectedFiles.closest('tr').addClass('animate-opacity dragging'); }, stop: function(event, ui) { var $selectedFiles = $('td.filename input:checkbox:checked'); if (!$selectedFiles.length) { $selectedFiles = $(this); } - $selectedFiles.closest('tr').fadeTo(250, 1).removeClass('dragging'); + var $tr = $selectedFiles.closest('tr'); + $tr.removeClass('dragging'); + setTimeout(function() { + $tr.removeClass('animate-opacity'); + }, 300); }, drag: function(event, ui) { var scrollingArea = FileList.$container; diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 97fa9804a2..99a2ff9a5e 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -24,6 +24,7 @@ describe('OCA.Files.FileList tests', function() { var testFiles, testRoot, notificationStub, fileList, pageSizeStub; var bcResizeStub; var filesClient; + var filesConfig; var redirectStub; /** @@ -54,6 +55,10 @@ describe('OCA.Files.FileList tests', function() { } beforeEach(function() { + filesConfig = new OC.Backbone.Model({ + showhidden: true + }); + filesClient = new OC.Files.Client({ host: 'localhost', port: 80, @@ -153,7 +158,8 @@ describe('OCA.Files.FileList tests', function() { })]; pageSizeStub = sinon.stub(OCA.Files.FileList.prototype, 'pageSize').returns(20); fileList = new OCA.Files.FileList($('#app-content-files'), { - filesClient: filesClient + filesClient: filesClient, + config: filesConfig }); }); afterEach(function() { @@ -407,6 +413,35 @@ describe('OCA.Files.FileList tests', function() { } }); }); + describe('Hidden files', function() { + it('sets the class hidden-file for hidden files', function() { + var fileData = { + type: 'dir', + name: '.testFolder' + }; + var $tr = fileList.add(fileData); + + expect($tr).toBeDefined(); + expect($tr.hasClass('hidden-file')).toEqual(true); + }); + it('does not set the class hidden-file for visible files', function() { + var fileData = { + type: 'dir', + name: 'testFolder' + }; + var $tr = fileList.add(fileData); + + expect($tr).toBeDefined(); + expect($tr.hasClass('hidden-file')).toEqual(false); + }); + it('toggles the list\'s class when toggling hidden files', function() { + expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(false); + filesConfig.set('showhidden', false); + expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(true); + filesConfig.set('showhidden', true); + expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(false); + }); + }); describe('Removing files from the list', function() { it('Removes file from list when calling remove() and updates summary', function() { var $summary;