Show thumbnail on rename

* does not hide thumbnail when rename is shown
* fixes layout for grid and list view
* fixes #11901

Signed-off-by: Morris Jobke <hey@morrisjobke.de>

2 files changed, 19 insertions, 4 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index bc99790f500..8ad255a34bf 100644
--- a/apps/files/css/files.scss
+++ b/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 */
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 648a4f02641..83510762c1a 100644
--- a/apps/files/js/filelist.js
+++ b/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))