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

3 files changed, 67 insertions, 4 deletions

diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 189867a7..cd202eea 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -20,11 +20,19 @@
 *****************************************************************************/
 
 
+div#stream-window {
+	min-width: 400px;
+	min-height: 200px;
+}
+
 div#stream-info {
 	display: none;
 }
 
 div#stream-box {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
 	position: relative;
 	display: inline-block;
 	border: var(--border-window-thin);
@@ -45,8 +53,9 @@ div.stream-box-mouse-enabled {
 }
 
 img#stream-image {
-	width: 640px;
-	height: 480px;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
 	display: block;
 	background-color: black;
 }
@@ -69,9 +78,12 @@ div#stream-mouse-buttons {
 	div#stream-window {
 		padding-top: 3px !important;
 		border-top: 0 !important;
-		border-radius: 0 0 8px 8px !important;
+		border-left: 0 !important;
+		border-right: 0 !important;
+		border-radius: 0 !important;
 		top: 50px !important;
 		left: 50% !important;
+		width: 100% !important;
 		-webkit-transform: translateX(-50%) !important;
 		transform: translateX(-50%) !important;
 	}
diff --git a/web/share/css/vars.css b/web/share/css/vars.css
index bec1f10e..f49f40cc 100644
--- a/web/share/css/vars.css
+++ b/web/share/css/vars.css
@@ -66,6 +66,8 @@
 	--cs-key-pressed-fg: #6c7481;
 	--cs-key-holded-bg: #436a8a;
 
+	--cs-corner-bg: #5b90bb;
+
 	--shadow-micro: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
 	--shadow-small: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 	--shadow-big: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
diff --git a/web/share/css/window.css b/web/share/css/window.css
index 3af2eb0c..e50db8ba 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -34,9 +34,31 @@ div.window {
 	background-color: var(--cs-window-default-bg);
 	padding: 30px 9px 9px 9px;
 }
+div.window-resizable {
+	resize: both;
+}
 div.window-active {
 	border: var(--border-intensive-2px) !important;
 }
+div.window-resizable.window-active::-webkit-resizer {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 0 0 20px 20px;
+	border-color: transparent transparent var(--cs-corner-bg) transparent;
+	/* border-bottom-right-radius: 8px; */
+	/* Size does not work */
+	display:block;
+	width: 20px !important;
+	height: 20px !important;
+}
+div.window-full-screen {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
 
 div.window div.window-header {
 	overflow: hidden;
@@ -68,17 +90,43 @@ div.window div.window-header-grabbed {
 	border-bottom: var(--border-intensive-thin);
 }
 
+div.window div.window-header button.window-button-full-screen,
+div.window div.window-header button.window-button-maximize,
 div.window div.window-header button.window-button-close {
 	border: none;
 	position: absolute;
 	top: -2px;
-	right: -6px;
 	width: 44px;
 	height: 24px;
 	padding-left: 0;
+	padding-right: 0;
 	color: var(--cs-window-closer-default-fg);
 	display: inline-block;
 }
+div.window div.window-header button.window-button-full-screen {
+	right: 90px;
+}
+div.window div.window-header button.window-button-close {
+	right: 0px;
+}
+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 */
@@ -91,6 +139,7 @@ div.window div.window-header button.window-button-close {
 	div.window div.window-header div.window-grab {
 		height: 35px !important;
 	}
+	div.window div.window-header button.window-button-full-screen,
 	div.window div.window-header button.window-button-close {
 		height: 40px !important;
 	}