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 @@
+

+
+
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 ×]
button(class="window-button-maximize") ☐
button(class="window-button-original") •
+ button(class="window-button-enter-full-tab") ▲
button(class="window-button-full-screen") ⤢
div(id="stream-info")
div(id="stream-box" class="stream-box-offline")
+ button(class="window-button-exit-full-tab") ▼
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";