Merge pull request #965 from nextcloud/master-files-render-hidden-files-hidden

Fix hidden files handling

4 files changed, 82 insertions, 31 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index b1759abfb1d..acd7f4af25d 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 f50322953d2..f191ade240b 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -214,12 +214,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;
 			}
@@ -241,6 +235,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);
@@ -881,10 +890,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,
@@ -932,9 +937,6 @@
 				}, 0);
 			}
 
-			// Restore full files list after rendering
-			this.files = allFiles;
-
 			return newTrs;
 		},
 
@@ -973,8 +975,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();
@@ -988,9 +988,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'));
@@ -998,18 +995,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) === '.';
 		},
 
 		/**
@@ -1334,6 +1327,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 8542bd50476..53e07ddb090 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 651ba6eef1e..cf9f43f2d59 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;