From 43fff9805942f9a4b94c12621068472e12c51cd2 Mon Sep 17 00:00:00 2001
From: Maxim Devaev <mdevaev@gmail.com>
Date: Sat, 20 Aug 2022 05:06:59 +0300
Subject: [PATCH] spoiler for mouse settings

---
 web/kvm/index.html        | 71 +++++++++++++++++++++------------------
 web/kvm/navbar-system.pug | 28 ++++++++-------
 web/share/css/navbar.css  |  9 ++++-
 web/share/css/vars.css    |  1 +
 4 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 4269a279..7b2a67b0 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -250,39 +250,46 @@
               </tr>
             </table>
           </div>
+          <details>
+            <summary>Mouse settings</summary>
+            <div class="spoiler">
+              <table class="kv">
+                <tr>
+                  <td>Mouse polling rate:</td>
+                  <td>
+                    <input class="slider" type="range" id="hid-mouse-rate-slider">
+                  </td>
+                  <td class="value" id="hid-mouse-rate-value" style="min-width: 30px; max-width:30px"></td>
+                </tr>
+                <tr class="feature-disabled" id="hid-mouse-sens">
+                  <td>Relative mouse sensitivity:</td>
+                  <td>
+                    <input class="slider" disabled type="range" id="hid-mouse-sens-slider">
+                  </td>
+                  <td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
+                </tr>
+                <tr class="feature-disabled" id="hid-mouse-squash">
+                      <td>Squash relative mouse moves:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input checked type="checkbox" id="hid-mouse-squash-switch">
+                          <label for="hid-mouse-squash-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+                <tr>
+                      <td>Reverse mouse scrolling:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input type="checkbox" id="hid-mouse-reverse-scrolling-switch">
+                          <label for="hid-mouse-reverse-scrolling-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+              </table>
+            </div>
+          </details>
           <table class="kv">
-            <tr>
-              <td>Mouse polling rate:</td>
-              <td>
-                <input class="slider" type="range" id="hid-mouse-rate-slider">
-              </td>
-              <td class="value" id="hid-mouse-rate-value" style="min-width: 30px; max-width:30px"></td>
-            </tr>
-            <tr class="feature-disabled" id="hid-mouse-sens">
-              <td>Relative mouse sensitivity:</td>
-              <td>
-                <input class="slider" disabled type="range" id="hid-mouse-sens-slider">
-              </td>
-              <td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
-            </tr>
-            <tr class="feature-disabled" id="hid-mouse-squash">
-                  <td>Squash relative mouse moves:</td>
-                  <td align="right">
-                    <div class="switch-box">
-                      <input checked type="checkbox" id="hid-mouse-squash-switch">
-                      <label for="hid-mouse-squash-switch"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
-                  </td>
-            </tr>
-            <tr>
-                  <td>Reverse mouse scrolling:</td>
-                  <td align="right">
-                    <div class="switch-box">
-                      <input type="checkbox" id="hid-mouse-reverse-scrolling-switch">
-                      <label for="hid-mouse-reverse-scrolling-switch"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
-                  </td>
-            </tr>
             <tr class="feature-disabled" id="hid-connect">
                   <td>Connect HID to Server:</td>
                   <td align="right">
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 55ec99ab..bf53fd9f 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -64,19 +64,23 @@ li(class="right")
 				tr(id="hid-outputs-mouse", class="feature-disabled")
 					td Mouse #[a(target="_blank" href="https://docs.pikvm.org/mouse") mode]:
 					td #[div(id="hid-outputs-mouse-box" class="radio-box")]
+		details
+			summary Mouse settings
+			div(class="spoiler")
+				table(class="kv")
+					tr
+						td Mouse polling rate:
+						td #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
+						td(id="hid-mouse-rate-value" class="value" style="min-width: 30px; max-width:30px")
+					tr(id="hid-mouse-sens" class="feature-disabled")
+						td Relative mouse sensitivity:
+						td #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
+						td(id="hid-mouse-sens-value" class="value" style="min-width: 30px; max-width:30px")
+					tr(id="hid-mouse-squash" class="feature-disabled")
+						+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
+					tr
+						+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
 		table(class="kv")
-			tr
-				td Mouse polling rate:
-				td #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
-				td(id="hid-mouse-rate-value" class="value" style="min-width: 30px; max-width:30px")
-			tr(id="hid-mouse-sens" class="feature-disabled")
-				td Relative mouse sensitivity:
-				td #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
-				td(id="hid-mouse-sens-value" class="value" style="min-width: 30px; max-width:30px")
-			tr(id="hid-mouse-squash" class="feature-disabled")
-				+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
-			tr
-				+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
 			tr(id="hid-connect" class="feature-disabled")
 				+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
 			tr
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index 08ca3e0d..7169acc3 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -127,9 +127,16 @@ ul#navbar li div.menu details summary {
 	cursor: pointer;
 	outline: none;
 	text-decoration: underline;
-	margin: 0 15px 0 15px;
+	margin: 8px 15px 8px 15px;
 	font-size: 12px;
 }
+ul#navbar li div.menu details div.spoiler {
+	margin-left: 20px !important;
+	border-left: var(--border-default-thin);
+}
+ul#navbar li div.menu details summary::marker {
+	color: var(--cs-marker-fg);
+}
 
 ul#navbar li div.menu div.buttons {
 	background-color: var(--cs-control-default-bg);
diff --git a/web/share/css/vars.css b/web/share/css/vars.css
index 93931696..93459d4b 100644
--- a/web/share/css/vars.css
+++ b/web/share/css/vars.css
@@ -66,6 +66,7 @@
 	--cs-key-pressed-fg: #6c7481;
 	--cs-key-holded-bg: #436a8a;
 
+	--cs-marker-fg: #5b90bb;
 	--cs-corner-bg: #5b90bb;
 
 	--shadow-micro: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);