using modals over full screen

2 files changed, 15 insertions, 30 deletions

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);
 		}
 	};