Rework of #39 (#40)

* Rework of #39 patch from @arykov (thanks)

* styled resize corner

* fixed squashing of resizaable window on moving

* keep window size and opsition after full screen

* not necessary

* attempt to fix desktop overflow

* improved

* ios fixes

* refactoring

web/kvm/navbar-system.pug

@@ -22,12 +22,6 @@ li(class="right")
 				td Max FPS:
 				td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
 				td(id="stream-desired-fps-value" class="value") 0
-			tr
-				td Stream size:
-				td #[input(type="range" id="stream-size-slider" class="slider")]
-				td(id="stream-size-value" class="value" style="width: 4em") 100%
-		hr
-		+menu_switch("stream-auto-resize-switch", "Auto-resize stream window", true, true)
 		hr
 		div(class="buttons buttons-row")
 			button(data-force-hide-menu id="show-stream-button" class="row33") • Show stream

web/kvm/window-about.pug

@@ -9,7 +9,11 @@ mixin about_tab(name, title, checked=false)
 			else
 				span(class="code-comment") No data
 
-+window("about-window", "About", false)
+div(id="about-window" class="window")
+	div(class="window-header")
+		div(class="window-grab") About
+		button(class="window-button-close") ×
+
 	div(id="about")
 		table
 			tr

web/kvm/window-keyboard.pug

@@ -15,7 +15,11 @@ mixin empty_key(width=0)
 mixin lamp(cls)
 	img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
 
-+window("keyboard-window", "Virtual Keyboard", true)
+div(id="keyboard-window" class="window")
+	div(id="keyboard-window-header" class="window-header")
+		div(class="window-grab") Virtual Keyboard
+		button(class="window-button-close") ×
+
 	div(id="keyboard-desktop" class="keypad" align="center")
 		div(class="keypad-block")
 			div(class="keypad-row")

web/kvm/window-stream.pug

@@ -1,10 +1,25 @@
 - let confirm_msg = "Do you want to close the stream? This action will temporarily stop<br>";
 - confirm_msg += "the video transmission until you open the broadcast again.<br>";
 - confirm_msg += "This can be useful for saving traffic.";
-+window("stream-window", "Stream", true, confirm_msg)
+
+div(id="stream-window" class="window window-resizable" data-close-confirm=confirm_msg)
+	div(id="stream-window-header" class="window-header")
+		div(class="window-grab") Stream
+		button(class="window-button-close") &times;
+		button(class="window-button-maximize") &#9744;
+		button(class="window-button-full-screen") &#10530;
+
 	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")
 		div(class="keypad-block")
 			div(class="keypad-row")

web/kvm/windows.pug

@@ -1,10 +1,3 @@
-mixin window(id, title, with_header_id=false, close_confirm_msg="")
-	div(id=id class="window" data-close-confirm=close_confirm_msg)
-		div(id=(with_header_id ? `${id}-header` : "") class="window-header")
-			div(class="window-grab") #{title}
-			button(class="window-button-close") ×
-		block
-
 include window-stream.pug
 include window-keyboard.pug
 include window-about.pug