pikvm/pikvm#1500: web: Paste hotkey

Author: mdevaev

web/kvm/index.html

@@ -46,7 +46,6 @@
     <link rel="stylesheet" href="../share/css/keypad.css">
     <link rel="stylesheet" href="../share/css/tabs.css">
     <link rel="stylesheet" href="../share/css/kvm/stream.css">
-    <link rel="stylesheet" href="../share/css/kvm/hid.css">
     <link rel="stylesheet" href="../share/css/kvm/msd.css">
     <link rel="stylesheet" href="../share/css/kvm/system.css">
     <link rel="stylesheet" href="../share/css/kvm/keyboard.css">
@@ -763,15 +762,15 @@
                 </tr>
               </table>
           <hr>
-          <input id="hid-recorder-new-script-file" type="file">
+          <input id="hid-recorder-new-script-file" type="file" style="display: none">
           <div class="buttons buttons-row">
             <button class="row50" id="hid-recorder-upload" disabled>Upload script</button>
             <button class="row50" id="hid-recorder-download" disabled>Download script</button>
           </div>
         </div>
       </li>
       <li class="right" id="text-dropdown"><a class="menu-button" href="#"><img class="feature-disabled" id="stream-ocr-led" src="../share/svg/led-gear.svg"><span>Text</span></a>
-        <div class="menu" id="text-menu">
+        <div class="menu" id="text-menu" style="width: 360px">
           <div class="text"><b>Paste text as keypress sequence<br></b><sub>Please note that PiKVM cannot switch the keyboard layout</sub></div>
           <hr>
           <div class="text" style="margin-right: 20px">
@@ -780,9 +779,9 @@
           <table class="kv">
             <tr>
               <td>
-                <button id="hid-pak-button" disabled data-force-hide-menu>&bull; Paste</button>
+                <button id="hid-pak-button" disabled data-force-hide-menu title="Ctrl+Enter when the text is focused">&bull; Paste</button>
               </td>
-              <td>using host keymap</td>
+              <td>using a host keymap</td>
               <td>
                 <select id="hid-pak-keymap-selector"></select>
               </td>
@@ -839,10 +838,10 @@
             </table>
             <table class="kv">
               <tr>
-                <td colspan="4">&bull; Press <b>Enter</b> to recognize and copy text to clipboard</td>
+                <td colspan="4">&bull; Next hit the <b>Enter</b> to recognize and copy text to clipboard...</td>
               </tr>
               <tr>
-                <td colspan="4">&bull; Press <b>Esc</b> to cancel selection</td>
+                <td colspan="4">&bull; Or hit the <b>Escape</b> to cancel a selection</td>
               </tr>
               <tr>
                 <td></td>

web/kvm/index.pug

@@ -10,7 +10,7 @@ append vars
 		css_list.push(
 			"navbar", "window", "modal", "led", "slider",
 			"switch", "radio", "progress", "keypad", "tabs",
-			"kvm/stream", "kvm/hid", "kvm/msd",
+			"kvm/stream", "kvm/msd",
 			"kvm/system", "kvm/keyboard", "kvm/about"
 		)
 

web/kvm/navbar-macro.pug

@@ -29,7 +29,7 @@ li.right#macro-dropdown
 		+menu_switch_table("hid-recorder-loop-switch", false, false) Infinite loop playback:
 		hr
 
-		input#hid-recorder-new-script-file(type="file")
+		input#hid-recorder-new-script-file(type="file" style="display: none")
 
 		.buttons.buttons-row
 			button.row50#hid-recorder-upload(disabled) Upload script

web/kvm/navbar-text.pug

@@ -3,7 +3,7 @@ li.right#text-dropdown
 		+navbar_led("stream-ocr-led", "led-gear", "feature-disabled")
 		span Text
 
-	.menu#text-menu
+	.menu#text-menu(style="width: 360px")
 		.text
 			b Paste text as keypress sequence#[br]
 			sub Please note that PiKVM cannot switch the keyboard layout
@@ -12,8 +12,8 @@ li.right#text-dropdown
 			textarea#hid-pak-text(data-focus placeholder="Enter your text here")
 		table.kv
 			tr
-				td #[button#hid-pak-button(disabled data-force-hide-menu) • Paste]
-				td using host keymap
+				td #[button#hid-pak-button(disabled data-force-hide-menu title="Ctrl+Enter when the text is focused") • Paste]
+				td using a host keymap
 				td #[select#hid-pak-keymap-selector]
 		table.kv
 			tr
@@ -39,8 +39,8 @@ li.right#text-dropdown
 					td text recognition
 			table.kv
 				tr
-					td(colspan="4") • Press #[b Enter] to recognize and copy text to clipboard
+					td(colspan="4") • Next hit the #[b Enter] to recognize and copy text to clipboard...
 				tr
-					td(colspan="4") • Press #[b Esc] to cancel selection
+					td(colspan="4") • Or hit the #[b Escape] to cancel a selection
 				tr
 					td

web/share/css/kvm/hid.css

@@ -33,14 +33,23 @@ export function Paste(__recorder) {
 	/************************************************************************/
 
 	var __init__ = function() {
+		$("hid-pak-text").addEventListener("keyup", function(event) {
+			if (event.ctrlKey && event.code == "Enter") {
+				$("hid-pak-button").click();
+			}
+		});
+
 		tools.storage.bindSimpleSwitch($("hid-pak-ask-switch"), "hid.pak.ask", true);
 		tools.storage.bindSimpleSwitch($("hid-pak-slow-switch"), "hid.pak.slow", false);
+
 		tools.storage.bindSimpleSwitch($("hid-pak-secure-switch"), "hid.pak.secure", false, function(value) {
 			$("hid-pak-text").style.setProperty("-webkit-text-security", (value ? "disc" : "none"));
 		});
+
 		$("hid-pak-keymap-selector").addEventListener("change", function() {
 			tools.storage.set("hid.pak.keymap", $("hid-pak-keymap-selector").value);
 		});
+
 		tools.el.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
 	};