pikvm/pikvm#1341: Web: Switch to maximize tab by default

pikvm · Nov 6, 2024 · 968d95e · 968d95e
1 parent f1503d6
commit 968d95e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 16 deletions.
diff --git a/web/kvm/index.html b/web/kvm/index.html
@@ -362,6 +362,31 @@
               </table>
             </div>
           </details>
+          <details>
+            <summary>Web UI settings</summary>
+            <div class="spoiler">
+              <table class="kv">
+                <tr>
+                      <td>Ask page close confirmation:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input checked type="checkbox" id="page-close-ask-switch">
+                          <label for="page-close-ask-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+                <tr>
+                      <td>Expand for entire tab by default:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input type="checkbox" id="page-full-tab-stream-switch">
+                          <label for="page-full-tab-stream-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+              </table>
+            </div>
+          </details>
           <table class="kv">
             <tr class="feature-disabled" id="hid-connect">
                   <td>Connect HID to Server:</td>
@@ -408,15 +433,6 @@
                     </div>
                   </td>
             </tr>
-            <tr>
-                  <td>Ask page close confirmation:</td>
-                  <td align="right">
-                    <div class="switch-box">
-                      <input checked type="checkbox" id="page-close-ask-switch">
-                      <label for="page-close-ask-switch"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
-                  </td>
-            </tr>
           </table>
           <hr>
           <div class="buttons buttons-row">

diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
@@ -113,6 +113,14 @@ li(id="system-dropdown" class="right")
 						td(id="hid-mouse-scroll-value" class="value-number")
 					tr
 						+menu_switch_notable("hid-mouse-dot-switch", "Show the blue dot", true, true)
+		details
+			summary Web UI settings
+			div(class="spoiler")
+				table(class="kv")
+					tr
+						+menu_switch_notable("page-close-ask-switch", "Ask page close confirmation", true, true)
+					tr
+						+menu_switch_notable("page-full-tab-stream-switch", "Expand for entire tab by default", true, false)
 		table(class="kv")
 			tr(id="hid-connect" class="feature-disabled")
 				+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
@@ -125,8 +133,6 @@ li(id="system-dropdown" class="right")
 					"Turning off this switch will disconnect the main USB from the server.  Are you sure you want to continue?")
 			tr(id="v4-locator" class="feature-disabled")
 				+menu_switch_notable_gpio("__v4_locator__", "Enable locator LED")
-			tr
-				+menu_switch_notable("page-close-ask-switch", "Ask page close confirmation", true, true)
 		hr
 		div(class="buttons buttons-row")
 			button(data-force-hide-menu data-show-window="keyboard-window" class="row50") &bull; Show keyboard

diff --git a/web/share/js/kvm/main.js b/web/share/js/kvm/main.js
@@ -50,9 +50,14 @@ export function main() {
 
 		tools.el.setOnClick($("open-log-button"), () => window.open("/api/log?seek=3600&follow=1", "_blank"));
 
-		if (tools.config.getBool("kvm--full-tab-stream", false)) {
-			wm.toggleFullTabWindow($("stream-window"), true);
+		tools.storage.bindSimpleSwitch(
+			$("page-full-tab-stream-switch"),
+			"page.full_tab_stream",
+			tools.config.getBool("kvm--full-tab-stream", false));
+		if ($("page-full-tab-stream-switch").checked) {
+			wm.setFullTabWindow($("stream-window"), true);
 		}
+
 		wm.showWindow($("stream-window"));
 
 		new Session();

diff --git a/web/share/js/wm.js b/web/share/js/wm.js
@@ -111,8 +111,8 @@ function __WindowManager() {
 			let el_exit_full_tab_button = el_window.querySelector(".window-button-exit-full-tab");
 			if (el_enter_full_tab_button && el_exit_full_tab_button) {
 				el_enter_full_tab_button.title = "Stretch to the entire tab";
-				tools.el.setOnClick(el_enter_full_tab_button, () => self.toggleFullTabWindow(el_window, true));
-				tools.el.setOnClick(el_exit_full_tab_button, () => self.toggleFullTabWindow(el_window, false));
+				tools.el.setOnClick(el_enter_full_tab_button, () => self.setFullTabWindow(el_window, true));
+				tools.el.setOnClick(el_exit_full_tab_button, () => self.setFullTabWindow(el_window, false));
 			}
 
 			let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
@@ -334,7 +334,7 @@ function __WindowManager() {
 		__activateLastWindow(el_window);
 	};
 
-	self.toggleFullTabWindow = function(el_window, enabled) {
+	self.setFullTabWindow = function(el_window, enabled) {
 		el_window.classList.toggle("window-full-tab", enabled);
 		__activateLastWindow(el_window);
 		let el_navbar = $("navbar");