Merge pull request #12467 from nextcloud/bugfix/11901/show-thumbnail-on-rename

Show thumbnail on rename

apps/files/css/files.scss

@@ -153,6 +153,7 @@
 #filestable tbody tr.highlighted .name:focus,
 #filestable tbody tr.selected,
 #filestable tbody tr.searchresult,
+#filestable tbody tr:hover .filename form,
 table tr.mouseOver td {
 	transition: background-color 0.3s ease;
 	background-color: var(--color-background-dark);
@@ -332,10 +333,14 @@ table td.filename .thumbnail {
 }
 table td.filename input.filename {
 	width: 70%;
-	margin-top: 9px;
 	margin-left: 48px;
 	cursor: text;
 }
+table td.filename form {
+	margin-top: -40px;
+	position: relative;
+	top: -6px;
+}
 
 table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
 table td.filename .nametext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }
@@ -908,6 +913,16 @@ table.dragshadow td.size {
 						}
 					}
 				}
+
+				form {
+					padding: 3px 14px;
+					border-radius: var(--border-radius);
+
+					input.filename {
+						width: 100%;
+						margin-left: 0;
+					}
+				}
 			}
 
 			/* No space for filesize and date in grid view */

apps/files/js/filelist.js

@@ -2390,7 +2390,7 @@
 			input = $('<input type="text" class="filename"/>').val(oldName);
 			form = $('<form></form>');
 			form.append(input);
-			td.children('a.name').hide();
+			td.children('a.name').children(':not(.thumbnail-wrapper)').hide();
 			td.append(form);
 			input.focus();
 			//preselect input
@@ -2418,7 +2418,7 @@
 				input.tooltip('hide');
 				tr.data('renaming',false);
 				form.remove();
-				td.children('a.name').show();
+				td.children('a.name').children(':not(.thumbnail-wrapper)').show();
 			}
 
 			function updateInList(fileInfo) {
@@ -2449,7 +2449,7 @@
 							basename = newName.substr(0, newName.lastIndexOf('.'));
 						}
 						td.find('a.name span.nametext').text(basename);
-						td.children('a.name').show();
+						td.children('a.name').children(':not(.thumbnail-wrapper)').show();
 
 						var path = tr.attr('data-path') || self.getCurrentDirectory();
 						self.filesClient.move(OC.joinPaths(path, oldName), OC.joinPaths(path, newName))

apps/files/tests/js/filelistSpec.js

@@ -777,7 +777,8 @@ describe('OCA.Files.FileList tests', function() {
 			// trigger rename prompt
 			fileList.rename('One.txt');
 
-			expect($tr.find('a.name').css('display')).toEqual('none');
+			expect($tr.find('a.name .thumbnail-wrapper').css('display')).not.toEqual('none');
+			expect($tr.find('a.name .nametext').css('display')).toEqual('none');
 
 			$input = fileList.$fileList.find('input.filename');
 			$input.val('Two.jpg');