separate shortcuts menu

5 files changed, 32 insertions, 31 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index abe00522..87c904f6 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -449,11 +449,11 @@
           </div>
         </div>
       </li>
-      <li class="right"><a class="menu-button" href="#">Keyboard</a>
+      <li class="right"><a class="menu-button" href="#">Paste</a>
         <div class="menu" data-dont-hide-menu>
-          <div class="text"><b>Paste text as keypress sequence<br></b></div>
+          <div class="text"><b>Paste text as keypress sequence<br></b><sub>Please note that Pi-KVM cannot switch the keyboard layout</sub></div>
           <hr>
-          <div class="text" style="margin-right: 20px">
+          <div class="text">
             <textarea id="hid-pak-text" placeholder="Enter your text here"></textarea>
           </div>
           <table class="kv">
@@ -478,12 +478,11 @@
                       </td>
                 </tr>
               </table>
-          <hr>
-          <div class="text"></div>
-          <hr>
-          <button data-force-hide-menu data-show-window="keyboard-window">&bull; Show keyboard</button>
-          <hr>
-          <div class="text"></div>
+        </div>
+      </li>
+      <li class="right"><a class="menu-button" href="#">Shortcuts</a>
+        <div class="menu" data-dont-hide-menu>
+          <div class="text"><b>Quick keyboard shortcuts<br></b><sub>Also see <i>System &rarr; Show keyboard</i></sub></div>
           <hr>
           <div class="buttons">
             <div class="buttons-row">
diff --git a/web/kvm/navbar-paste.pug b/web/kvm/navbar-paste.pug
new file mode 100644
index 00000000..f593670b
--- /dev/null
+++ b/web/kvm/navbar-paste.pug
@@ -0,0 +1,17 @@
+li(class="right")
+	a(class="menu-button" href="#") Paste
+	div(data-dont-hide-menu class="menu")
+		div(class="text")
+			b Paste text as keypress sequence#[br]
+			sub Please note that Pi-KVM cannot switch the keyboard layout
+		hr
+		div(class="text")
+			textarea(id="hid-pak-text" placeholder="Enter your text here")
+		table(class="kv")
+			tr
+				td
+					button(disabled data-force-hide-menu id="hid-pak-button") &bull; Paste
+				td using host keymap
+				td
+					select(id="hid-pak-keymap-selector")
+		+menu_switch("hid-pak-ask-switch", "Ask paste confirmation", true, true)
diff --git a/web/kvm/navbar-keyboard.pug b/web/kvm/navbar-shortcuts.pug
index d2c11138..f60df5ae 100644
--- a/web/kvm/navbar-keyboard.pug
+++ b/web/kvm/navbar-shortcuts.pug
@@ -1,25 +1,9 @@
 li(class="right")
-	a(class="menu-button" href="#") Keyboard
+	a(class="menu-button" href="#") Shortcuts
 	div(data-dont-hide-menu class="menu")
 		div(class="text")
-			b Paste text as keypress sequence#[br]
-		hr
-		div(class="text" style="margin-right: 20px")
-			textarea(id="hid-pak-text" placeholder="Enter your text here")
-		table(class="kv")
-			tr
-				td
-					button(disabled data-force-hide-menu id="hid-pak-button") &bull; Paste
-				td using host keymap
-				td
-					select(id="hid-pak-keymap-selector")
-		+menu_switch("hid-pak-ask-switch", "Ask paste confirmation", true, true)
-		hr
-		div(class="text")
-		hr
-		button(data-force-hide-menu data-show-window="keyboard-window") &bull; Show keyboard
-		hr
-		div(class="text")
+			b Quick keyboard shortcuts#[br]
+			sub Also see #[i System &rarr; Show keyboard]
 		hr
 		div(class="buttons")
 			div(class="buttons-row")
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index ebe5cb20..cae4d8e9 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -38,5 +38,6 @@ ul(id="navbar")
 	include navbar-atx.pug
 	include navbar-msd.pug
 	include navbar-macro.pug
-	include navbar-keyboard.pug
+	include navbar-paste.pug
+	include navbar-shortcuts.pug
 	include navbar-gpio.pug
diff --git a/web/share/css/kvm/hid.css b/web/share/css/kvm/hid.css
index d32c3d98..2e18046c 100644
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -23,8 +23,8 @@
 textarea#hid-pak-text {
 	display: block;
 	resize: none;
-	height: 60px;
-	width: 100%;
+	height: 150px;
+	width: 300px;
 	border-radius: 4px;
 	color: var(--cs-window-default-fg);
 	background-color: var(--cs-window-default-bg);