Updated popover rules to allow form inputs and added input submit for new File

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files/css/files.scss

@@ -696,14 +696,6 @@ table.dragshadow td.size {
 	z-index: 1001;
 }
 
-.newFileMenu .filenameform {
-	display: inline-block;
-}
-
-.newFileMenu .filenameform input {
-	margin: 2px 0;
-}
-
 #filestable .filename .action .icon,
 #filestable .selectedActions a .icon,
 #filestable .filename .favorite-mark .icon,

apps/files/js/newfilemenu.js

@@ -28,6 +28,7 @@
 		'<form class="filenameform">' +
 		'<label class="hidden-visually" for="{{cid}}-input-{{fileType}}">{{fileName}}</label>' +
 		'<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">' +
+		'<input type="submit" value=" " class="primary icon-checkmark-white" />'
 		'</form>';
 
 	/**
@@ -116,7 +117,7 @@
 			}
 
 			if ($target.find('form').length) {
-				$target.find('input').focus();
+				$target.find('input[type=\'text\']').focus();
 				return;
 			}
 
@@ -138,7 +139,8 @@
 			$target.append($form);
 
 			// here comes the OLD code
-			var $input = $form.find('input');
+			var $input = $form.find('input[type=\'text\']');
+			var $submit = $form.find('input[type=\'submit\']');
 
 			var lastPos;
 			var checkInput = function () {
@@ -171,6 +173,10 @@
 				}
 			});
 
+			$submit.click(function(){
+				$form.submit();
+			});
+
 			$input.focus();
 			// pre select name up to the extension
 			lastPos = newName.lastIndexOf('.');

core/css/apps.scss

@@ -811,10 +811,9 @@ kbd {
 		flex: 0 0 auto;
 		> button,
 		> a,
-		> .menuitem,
-		> label {
+		> .menuitem {
 			cursor: pointer;
-			line-height: 36px;
+			line-height: 38px;
 			border: 0;
 			background-color: transparent;
 			display: flex;
@@ -827,8 +826,8 @@ kbd {
 			color: $color-main-text;
 			/* Override the app-navigation li opacity */
 			opacity: .7 !important;
-			[class^='icon-'],
-			[class*=' icon-'],
+			span[class^='icon-'],
+			span[class*=' icon-'],
 			&[class^='icon-'],
 			&[class*=' icon-'] {
 				min-width: 0; /* Overwrite icons*/
@@ -836,8 +835,8 @@ kbd {
 				background-position: 10px center;
 				background-size: 16px;
 			}
-			[class^='icon-'],
-			[class*=' icon-'] {
+			span[class^='icon-'],
+			span[class*=' icon-'] {
 				/* Keep padding to define the width to
 				 assure correct position of a possible text */
 				padding: 18px 0 18px 36px;
@@ -889,6 +888,14 @@ kbd {
 			> input:not([type=radio]):not([type=checkbox]):not([type=image]) {
 				width: 150px;
 			}
+			input {
+				min-width: 34px;
+				max-height: 34px;
+				margin: 2px 0;
+				~ input {
+					margin-left: 5px;
+				}
+			}
 		}
 		> button {
 			padding: 0;