pikvm/pikvm#531: improved fullscreen focus

5 files changed, 17 insertions, 0 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 147d2180..0aeb33e7 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -599,6 +599,7 @@
       <div id="stream-info"></div>
       <div class="stream-box-offline" id="stream-box"><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>
       <div class="keypad" id="stream-mouse-buttons" align="center">
         <div class="keypad-block">
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index d304ff5e..36bca291 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -11,6 +11,7 @@ div(id="stream-window" class="window window-resizable")
 	div(id="stream-box" class="stream-box-offline")
 		img(id="stream-image" src=`${png_dir}/blank-stream.png`)
 		video(id="stream-video" class="hidden" autoplay playsinline muted)
+		div(id="stream-fullscreen-active")
 
 	div(id="stream-mouse-buttons" class="keypad" align="center")
 		div(class="keypad-block")
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 0df306f2..f754ae26 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -64,6 +64,19 @@ video#stream-video {
 	display: block;
 	background-color: black;
 }
+div#stream-window.window-active:fullscreen {
+	border: 0px !important;
+	border-radius: 0px !important;
+}
+div#stream-window.window-active:fullscreen div#stream-box div#stream-fullscreen-active {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	border: 0;
+	box-shadow: var(--shadow-window-fullscreen-active);
+}
 
 div#stream-mouse-buttons {
 	display: none;
diff --git a/web/share/css/vars.css b/web/share/css/vars.css
index beee09d8..c75e82a8 100644
--- a/web/share/css/vars.css
+++ b/web/share/css/vars.css
@@ -72,6 +72,7 @@
 	--shadow-small: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 	--shadow-big: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
 	--shadow-navbar-item-pressed: 0 5px 0 #5b90bb inset;
+	--shadow-window-fullscreen-active: 0 0 0 2px #5b90bb inset;
 
 	--border-default-thin: thin solid #36393f;
 	--border-default-2px: 2px solid #36393f;
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index f45dabd0..0a7d303d 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -115,6 +115,7 @@ function __WindowManager() {
 				el_full_screen_button.title = "Go to full-screen mode";
 				tools.el.setOnClick(el_full_screen_button, function() {
 					__fullScreenWindow(el_window);
+					el_window.focus(el_window); // Почему-то теряется фокус
 					__activateLastWindow(el_window);
 				});
 			}