diff options
| -rw-r--r-- | web/kvm/index.html | 9 | ||||
| -rw-r--r-- | web/kvm/window-stream.pug | 6 | ||||
| -rw-r--r-- | web/share/css/window.css | 16 | ||||
| -rw-r--r-- | web/share/js/wm.js | 29 |
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">⤢</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); } }; |