using modals over full screen

4 files changed, 16 insertions, 44 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index b3927e7f..aa0e5fce 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -507,14 +507,7 @@
         <button class="window-button-full-screen">&#10530;</button>
       </div>
       <div id="stream-info"></div>
-      <div class="stream-box-inactive" id="stream-box">
-        <div class="window-lock-alert hidden"><b>Failed to acquire keyboard lock.<br>Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.</b><br>
-          <br>
-          For best keyboard handling use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API#Browser_compatibility">browser with keyboard lock support API</a>.<br>
-          In Chrome use HTTPS and enable <i>system-keyboard-lock</i> by putting at URL <i>chrome://flags/#system-keyboard-lock</i>.<br>
-          More details on keyboard lock API are <a href="https://wicg.github.io/keyboard-lock/" target="_blank">here</a>.
-        </div><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png">
-      </div>
+      <div class="stream-box-inactive" id="stream-box"><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png"></div>
       <div class="keypad" id="stream-mouse-buttons" align="center">
         <div class="keypad-block">
           <div class="keypad-row">
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index 1b45571e..5577ab0a 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -8,12 +8,6 @@ div(id="stream-window" class="window window-resizable" data-show-by-button="show
 	div(id="stream-info")
 
 	div(id="stream-box" class="stream-box-inactive")
-		div(class="window-lock-alert hidden")
-			| #[b Failed to acquire keyboard lock.#[br]Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.]#[br]
-			| #[br]
-			| For best keyboard handling use a #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API#Browser_compatibility") browser with keyboard lock support API].#[br]
-			| In Chrome use HTTPS and enable #[i system-keyboard-lock] by putting at URL #[i chrome://flags/#system-keyboard-lock].#[br]
-			| More details on keyboard lock API are #[a(href="https://wicg.github.io/keyboard-lock/" target="_blank") here].
 		img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)
 
 	div(id="stream-mouse-buttons" class="keypad" align="center")
diff --git a/web/share/css/window.css b/web/share/css/window.css
index 77b80bb5..ff74d21b 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -59,6 +59,7 @@ div.window:fullscreen {
 	left: 0px !important;
 	width: 100% !important;
 	height: 100% !important;
+	padding: 0px !important;
 }
 div.window:-webkit-full-screen {
 	resize: none !important;
@@ -129,21 +130,6 @@ div.window div.window-header button.window-button-maximize {
 	right: 45px;
 }
 
-div.window div.window-lock-alert {
-	white-space: normal;
-	text-align: justify;
-	border: var(--border-window-thin);
-	border-radius: 8px;
-	box-sizing: border-box;
-	padding: 5px 5px 5px 5px;
-	background-color: var(--cs-window-default-bg);
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 10000;
-}
-
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 	/* iPad */
 	div.window {
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index c6fe040a..4b3a78a3 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -125,10 +125,10 @@ function __WindowManager() {
 
 	/************************************************************************/
 
-	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
-	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false, null);
+	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true, null);
 
-	var __modalDialog = function(header, text, ok, cancel) {
+	var __modalDialog = function(header, text, ok, cancel, parent) {
 		let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
 
 		let el_modal = document.createElement("div");
@@ -201,7 +201,7 @@ function __WindowManager() {
 		}
 
 		__windows.push(el_modal);
-		document.body.appendChild(el_modal);
+		(parent || document.fullscreenElement || document.body).appendChild(el_modal);
 		__activateWindow(el_modal);
 
 		return promise;
@@ -532,10 +532,7 @@ function __WindowManager() {
 
 	var __onFullScreenChange = function(event) {
 		let el_window = event.target;
-		if (document.fullscreenElement) {
-			el_window.style.padding = "0px 0px 0px 0px";
-		} else {
-			el_window.style.padding = "";
+		if (!document.fullscreenElement) {
 			let rect = el_window.before_full_screen;
 			if (rect) {
 				el_window.style.width = rect.width + "px";
@@ -552,13 +549,15 @@ function __WindowManager() {
 		if (navigator.keyboard && navigator.keyboard.lock) {
 			navigator.keyboard.lock();
 		} else {
-			let el_lock_alert = el_window.querySelector(".window-lock-alert");
-			if (el_lock_alert) {
-				tools.hiddenSetVisible(el_lock_alert, true);
-				setTimeout(function() {
-					tools.hiddenSetVisible(el_lock_alert, false);
-				}, 7000);
-			}
+			let msg = (
+				"Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.<br>"
+				+ "For best keyboard handling use any browser with<br><a target=\"_blank\""
+				+ " href=\"https://developer.mozilla.org/en-US/docs/Web"
+				+ "/API/Keyboard_API#Browser_compatibility\">keyboard lock support from this list</a>.<br><br>"
+				+ "In Chrome use HTTPS and enable <i>system-keyboard-lock</i><br>"
+				+ "by putting at URL <i>chrome://flags/#system-keyboard-lock</i>"
+			);
+			__modalDialog("Keyboard lock is unsupported", msg, true, false, el_window);
 		}
 	};