pikvm/pikvm#631: option to hide navbar

4 files changed, 55 insertions, 1 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index f64a5f34..8c777e31 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -743,10 +743,12 @@
         <button class="window-button-close"><b>&times;</b></button>
         <button class="window-button-maximize">&#9744;</button>
         <button class="window-button-original">&bull;</button>
+        <button class="window-button-enter-full-tab">&#9650;</button>
         <button class="window-button-full-screen">&#10530;</button>
       </div>
       <div id="stream-info"></div>
-      <div class="stream-box-offline" id="stream-box"><img id="stream-image" src="/share/png/blank-stream.png">
+      <div class="stream-box-offline" id="stream-box">
+        <button class="window-button-exit-full-tab">&#9660;</button><img id="stream-image" src="/share/png/blank-stream.png">
         <video class="hidden" id="stream-video" autoplay playsinline muted></video>
         <div id="stream-fullscreen-active"></div>
       </div>
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index e5ba9bf1..451a3108 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -7,11 +7,13 @@ div(id="stream-window" class="window window-resizable")
 		button(class="window-button-close") #[b &times;]
 		button(class="window-button-maximize") &#9744;
 		button(class="window-button-original") &bull;
+		button(class="window-button-enter-full-tab") &#9650;
 		button(class="window-button-full-screen") &#10530;
 
 	div(id="stream-info")
 
 	div(id="stream-box" class="stream-box-offline")
+		button(class="window-button-exit-full-tab") &#9660;
 		img(id="stream-image" src=`${png_dir}/blank-stream.png`)
 		video(id="stream-video" class="hidden" autoplay playsinline muted)
 		div(id="stream-fullscreen-active")
diff --git a/web/share/css/window.css b/web/share/css/window.css
index 7ce5e0cb..2d063528 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -74,6 +74,16 @@ div.window:-webkit-full-screen {
 	height: 100% !important;
 	padding: 0px !important;
 }
+div.window.window-full-tab {
+	border: 0px;
+	border-radius: 0px;
+	resize: none !important;
+	top: 0px !important;
+	left: 0px !important;
+	width: 100% !important;
+	height: 100% !important;
+	padding: 0px !important;
+}
 
 div.window div.window-header {
 	overflow: hidden;
@@ -112,6 +122,7 @@ div.window div.window-header-grabbed {
 }
 
 div.window div.window-header button.window-button-full-screen,
+div.window div.window-header button.window-button-enter-full-tab,
 div.window div.window-header button.window-button-original,
 div.window div.window-header button.window-button-maximize,
 div.window div.window-header button.window-button-close {
@@ -126,6 +137,9 @@ div.window div.window-header button.window-button-close {
 	display: inline-block;
 }
 div.window div.window-header button.window-button-full-screen {
+	right: 180px;
+}
+div.window div.window-header button.window-button-enter-full-tab {
 	right: 135px;
 }
 div.window div.window-header button.window-button-original {
@@ -138,6 +152,23 @@ div.window div.window-header button.window-button-close {
 	right: 0px;
 }
 
+div.window button.window-button-exit-full-tab {
+	width: 50px;
+	height: 10px;
+	left: calc(50% - 25px);
+	font-size: 8px;
+	position: absolute;
+	opacity: 0.5;
+	border-radius: 0px;
+	visibility: hidden;
+}
+div.window button.window-button-exit-full-tab:hover {
+	opacity: 1;
+}
+div.window.window-full-tab button.window-button-exit-full-tab {
+	visibility: visible !important;
+}
+
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 	/* iPad */
 	div.window {
@@ -150,6 +181,9 @@ div.window div.window-header button.window-button-close {
 		height: 35px !important;
 	}
 	div.window div.window-header button.window-button-full-screen,
+	div.window div.window-header button.window-button-enter-full-tab,
+	div.window div.window-header button.window-button-original,
+	div.window div.window-header button.window-button-maximize,
 	div.window div.window-header button.window-button-close {
 		height: 40px !important;
 	}
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index c6c71b9b..791ab36b 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -107,6 +107,22 @@ function __WindowManager() {
 				});
 			}
 
+			let el_enter_full_tab_button = el_window.querySelector(".window-header .window-button-enter-full-tab");
+			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";
+				let toggle_full_tab = function(enabled) {
+					el_window.classList.toggle("window-full-tab", enabled);
+					__activateLastWindow(el_window);
+					let el_navbar = $("navbar");
+					if (el_navbar) {
+						tools.hidden.setVisible(el_navbar, !enabled);
+					}
+				};
+				tools.el.setOnClick(el_enter_full_tab_button, () => toggle_full_tab(true));
+				tools.el.setOnClick(el_exit_full_tab_button, () => toggle_full_tab(false));
+			}
+
 			let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
 			if (el_full_screen_button && __getFullScreenFunction(el_window)) {
 				el_full_screen_button.title = "Go to full-screen mode";