Merge pull request #12902 from owncloud/fix-filelist-thumbnails

Propertly restore thumbnail on cancel/rename/move

apps/files/js/filelist.js

@@ -1307,9 +1307,9 @@
 			}
 			_.each(fileNames, function(fileName) {
 				var $tr = self.findFileEl(fileName);
-				var $td = $tr.children('td.filename');
+				var $thumbEl = $tr.find('.thumbnail');
-				var oldBackgroundImage = $td.css('background-image');
+				var oldBackgroundImage = $thumbEl.css('background-image');
-				$td.css('background-image', 'url('+ OC.imagePath('core', 'loading.gif') + ')');
+				$thumbEl.css('background-image', 'url('+ OC.imagePath('core', 'loading.gif') + ')');
 				// TODO: improve performance by sending all file names in a single call
 				$.post(
 					OC.filePath('files', 'ajax', 'move.php'),
@@ -1351,7 +1351,7 @@
 						} else {
 							OC.dialogs.alert(t('files', 'Error moving file'), t('files', 'Error'));
 						}
-						$td.css('background-image', oldBackgroundImage);
+						$thumbEl.css('background-image', oldBackgroundImage);
 					}
 				);
 			});
@@ -1412,13 +1412,14 @@
 
 				try {
 					var newName = input.val();
+					var $thumbEl = tr.find('.thumbnail');
 					input.tipsy('hide');
 					form.remove();
 
 					if (newName !== oldname) {
 						checkInput();
 						// mark as loading (temp element)
-						td.css('background-image', 'url('+ OC.imagePath('core', 'loading.gif') + ')');
+						$thumbEl.css('background-image', 'url('+ OC.imagePath('core', 'loading.gif') + ')');
 						tr.attr('data-file', newName);
 						var basename = newName;
 						if (newName.indexOf('.') > 0 && tr.data('type') !== 'dir') {
@@ -1841,7 +1842,7 @@
 					var translatedText = n('files', 'Uploading %n file', 'Uploading %n files', currentUploads);
 					if (currentUploads === 1) {
 						var img = OC.imagePath('core', 'loading.gif');
-						data.context.find('td.filename').attr('style','background-image:url('+img+')');
+						data.context.find('.thumbnail').css('background-image', 'url(' + img + ')');
 						uploadText.text(translatedText);
 						uploadText.show();
 					} else {
@@ -1880,7 +1881,7 @@
 						var translatedText = n('files', 'Uploading %n file', 'Uploading %n files', currentUploads);
 						if (currentUploads === 0) {
 							var img = OC.imagePath('core', 'filetypes/folder');
-							data.context.find('td.filename').attr('style','background-image:url('+img+')');
+							data.context.find('.thumbnail').css('background-image', 'url(' + img + ')');
 							uploadText.text(translatedText);
 							uploadText.hide();
 						} else {
@@ -1965,7 +1966,7 @@
 					//cleanup uploading to a dir
 					var uploadText = $('tr .uploadtext');
 					var img = OC.imagePath('core', 'filetypes/folder');
-					uploadText.parents('td.filename').attr('style','background-image:url('+img+')');
+					uploadText.parents('td.filename').find('.thumbnail').css('background-image', 'url(' + img + ')');
 					uploadText.fadeOut();
 					uploadText.attr('currentUploads', 0);
 				}
@@ -1979,7 +1980,7 @@
 					//cleanup uploading to a dir
 					var uploadText = $('tr .uploadtext');
 					var img = OC.imagePath('core', 'filetypes/folder');
-					uploadText.parents('td.filename').attr('style','background-image:url('+img+')');
+					uploadText.parents('td.filename').find('.thumbnail').css('background-image', 'url(' + img + ')');
 					uploadText.fadeOut();
 					uploadText.attr('currentUploads', 0);
 				}

apps/files/js/files.js

@@ -369,19 +369,22 @@ var createDragShadow = function(event) {
 	var dir = FileList.getCurrentDirectory();
 
 	$(selectedFiles).each(function(i,elem) {
+		// TODO: refactor this with the table row creation code
 		var newtr = $('<tr/>')
 			.attr('data-dir', dir)
 			.attr('data-file', elem.name)
 			.attr('data-origin', elem.origin);
-		newtr.append($('<td/>').addClass('filename').text(elem.name));
+		newtr.append($('<td class="filename" />').text(elem.name).css('background-size', 32));
-		newtr.append($('<td/>').addClass('size').text(OC.Util.humanFileSize(elem.size)));
+		newtr.append($('<td class="size" />').text(OC.Util.humanFileSize(elem.size)));
 		tbody.append(newtr);
 		if (elem.type === 'dir') {
-			newtr.find('td.filename').attr('style','background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')');
+			newtr.find('td.filename')
+				.css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder.png') + ')');
 		} else {
 			var path = dir + '/' + elem.name;
 			OCA.Files.App.files.lazyLoadPreview(path, elem.mime, function(previewpath) {
-				newtr.find('td.filename').attr('style','background-image:url('+previewpath+')');
+				newtr.find('td.filename')
+					.css('background-image', 'url(' + previewpath + ')');
 			}, null, null, elem.etag);
 		}
 	});

apps/files/tests/js/filelistSpec.js

@@ -661,6 +661,23 @@ describe('OCA.Files.FileList tests', function() {
 			expect(fileList.$fileList.find('input.filename').length).toEqual(0);
 			expect(fileList.$fileList.find('form').length).toEqual(0);
 		});
+		it('Restores thumbnail when rename was cancelled', function() {
+			doRename();
+
+			expect(OC.TestUtil.getImageUrl(fileList.findFileEl('Tu_after_three.txt').find('.thumbnail')))
+				.toEqual(OC.imagePath('core', 'loading.gif'));
+
+			fakeServer.requests[0].respond(200, {'Content-Type': 'application/json'}, JSON.stringify({
+				status: 'error',
+				data: {
+					message: 'Something went wrong'
+				}
+			}));
+
+			expect(fileList.findFileEl('One.txt').length).toEqual(1);
+			expect(OC.TestUtil.getImageUrl(fileList.findFileEl('One.txt').find('.thumbnail')))
+				.toEqual(OC.imagePath('core', 'filetypes/file.svg'));
+		});
 	});
 	describe('Moving files', function() {
 		beforeEach(function() {
@@ -755,6 +772,31 @@ describe('OCA.Files.FileList tests', function() {
 			expect(notificationStub.calledOnce).toEqual(true);
 			expect(notificationStub.getCall(0).args[0]).toEqual('Error while moving file');
 		});
+		it('Restores thumbnail if a file could not be moved', function() {
+			var request;
+			fileList.move('One.txt', '/somedir');
+
+			expect(OC.TestUtil.getImageUrl(fileList.findFileEl('One.txt').find('.thumbnail')))
+				.toEqual(OC.imagePath('core', 'loading.gif'));
+
+			expect(fakeServer.requests.length).toEqual(1);
+			request = fakeServer.requests[0];
+
+			fakeServer.requests[0].respond(200, {'Content-Type': 'application/json'}, JSON.stringify({
+				status: 'error',
+				data: {
+					message: 'Error while moving file',
+				}
+			}));
+
+			expect(fileList.findFileEl('One.txt').length).toEqual(1);
+
+			expect(notificationStub.calledOnce).toEqual(true);
+			expect(notificationStub.getCall(0).args[0]).toEqual('Error while moving file');
+
+			expect(OC.TestUtil.getImageUrl(fileList.findFileEl('One.txt').find('.thumbnail')))
+				.toEqual(OC.imagePath('core', 'filetypes/file.svg'));
+		});
 	});
 	describe('List rendering', function() {
 		it('renders a list of files using add()', function() {