some ui fixes

5 files changed, 33 insertions, 20 deletions

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 950fbc56..1b0a443b 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -55,6 +55,7 @@ ul#ctl li a.ctl-item-selected {
 	background-color: var(--bg-color-selected) !important;
 }
 div.ctl-dropdown-content {
+	visibility: hidden;
 	overflow: hidden;
 	white-space: nowrap;
 	border: var(--intensive-border);
diff --git a/kvmd/web/css/msd.css b/kvmd/web/css/msd.css
index b5b0a1aa..91c6a280 100644
--- a/kvmd/web/css/msd.css
+++ b/kvmd/web/css/msd.css
@@ -1,8 +1,16 @@
 div#msd-menu {
 	width: 450px;
 }
+div#msd-menu
+div#msd-not-in-operate,
+div#msd-current-image-broken,
+div#msd-another-another-user-uploads,
+input#msd-select-new-image-file,
+div#msd-new-image {
+	display: none;
+}
 
-table#msd-info {
+table.msd-info {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	user-select: text;
@@ -10,7 +18,7 @@ table#msd-info {
 	margin: 0 10px 0 10px;
 	font-size: 12px;
 }
-table#msd-info
+table.msd-info
 td#msd-status,
 td#msd-current-image-name,
 td#msd-current-image-size,
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 8d843fb8..12d764f5 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -45,7 +45,7 @@
 					<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
 					System &#8628;
 				</a>
-				<div class="ctl-dropdown-content" style="display:none">
+				<div class="ctl-dropdown-content">
 					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
 					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
 					<button onclick="ui.showWindow('about-window')">&bull; Show about</button>
@@ -62,7 +62,7 @@
 					<img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
 					ATX &#8628;
 				</a>
-				<div class="ctl-dropdown-content" style="display:none">
+				<div class="ctl-dropdown-content">
 					<button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button>
 					<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button>
 					<hr>
@@ -77,8 +77,8 @@
 					<img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
 					Mass Storage &#8628;
 				</a>
-				<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content" style="display:none">
-					<div id="msd-not-in-operate" style="display:none">
+				<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
+					<div id="msd-not-in-operate">
 						<div class="ctl-dropdown-content-text">
 							<table>
 								<tr>
@@ -90,7 +90,7 @@
 						<hr>
 					</div>
 
-					<div id="msd-current-image-broken" style="display:none">
+					<div id="msd-current-image-broken">
 						<div class="ctl-dropdown-content-text">
 							<table>
 								<tr>
@@ -102,7 +102,7 @@
 						<hr>
 					</div>
 
-					<div id="msd-another-another-user-uploads" style="display:none">
+					<div id="msd-another-another-user-uploads">
 						<div class="ctl-dropdown-content-text">
 							<table>
 								<tr>
@@ -114,7 +114,7 @@
 						<hr>
 					</div>
 
-					<table id="msd-info">
+					<table class="msd-info">
 						<tr>
 							<td>Status: </td>
 							<td id="msd-status"></td>
@@ -122,7 +122,7 @@
 					</table>
 					<hr>
 
-					<table id="msd-info">
+					<table class="msd-info">
 						<tr>
 							<td>Current image:</td>
 							<td id="msd-current-image-name"></td>
@@ -137,7 +137,7 @@
 					</table>
 					<hr>
 
-					<input type="file" id="msd-select-new-image-file" style="display:none;" onchange="msd.selectNewImageFile()" />
+					<input type="file" id="msd-select-new-image-file" onchange="msd.selectNewImageFile()" />
 					<div class="buttons-row">
 						<button disabled id="msd-select-new-image-button" class="row50" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button>
 						<button disabled id="msd-upload-new-image-button" class="row25" onclick="msd.clickButton(this);">Start</button>
@@ -145,8 +145,8 @@
 					</div>
 					<hr>
 
-					<div id="msd-new-image" style="display:none">
-						<table id="msd-info">
+					<div id="msd-new-image">
+						<table class="msd-info">
 							<tr>
 								<td>New name:</td>
 								<td id="msd-new-image-name"></td>
@@ -178,7 +178,7 @@
 				<a class="ctl-item" href="#">
 					Shortcuts &#8628;
 				</a>
-				<div class="ctl-dropdown-content" style="display:none">
+				<div class="ctl-dropdown-content">
 					<button onclick="hid.emitShortcut('ControlLeft', 'AltLeft', 'Delete');">&bull; Ctrl+Alt+Del</button>
 					<hr>
 					<button onclick="hid.emitShortcut('ControlLeft', 'KeyW');">&bull; Ctrl+W</button>
@@ -205,7 +205,7 @@
 
 	<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
 		<div class="window-header"><div class="window-grab">Stream</div></div>
-		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
+		<img id="stream-image" class="stream-image-inactive" alt="Loading..."/>
 	</div>
 
 	<div id="keyboard-window" class="window" tabindex="0">
diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js
index 288762be..feb05d13 100644
--- a/kvmd/web/js/stream.js
+++ b/kvmd/web/js/stream.js
@@ -44,6 +44,7 @@ var stream = new function() {
 				el_stream_image.style.width = size.width + "px";
 				el_stream_image.style.height = size.height + "px";
 				el_stream_image.src = "/streamer/?action=stream&time=" + new Date().getTime();
+				ui.showWindow("stream-window");
 			}
 		});
 	};
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
index c0b07198..06622895 100644
--- a/kvmd/web/js/ui.js
+++ b/kvmd/web/js/ui.js
@@ -58,11 +58,12 @@ var ui = new function() {
 
 	this.showWindow = function(id) {
 		var el_window = $(id);
-		if (!__isWindowOnPage(el_window)) {
+		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
 			var view = __getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
 			el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
 			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
+			el_window.setAttribute("data-centered", "");
 		}
 		el_window.style.visibility = "visible";
 		__raiseWindow(el_window);
@@ -94,13 +95,13 @@ var ui = new function() {
 
 		__ctl_items.forEach(function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
-			if (el_item === el_a && el_menu.style.display === "none") {
+			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
 				el_item.classList.add("ctl-item-selected");
-				el_menu.style.display = "block";
+				el_menu.style.visibility = "visible";
 				all_hidden &= false;
 			} else {
 				el_item.classList.remove("ctl-item-selected");
-				el_menu.style.display = "none";
+				el_menu.style.visibility = "hidden";
 			}
 		});
 
@@ -123,7 +124,7 @@ var ui = new function() {
 		__ctl_items.forEach(function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
 			el_item.classList.remove("ctl-item-selected");
-			el_menu.style.display = "none";
+			el_menu.style.visibility = "hidden";
 		});
 	};
 
@@ -159,6 +160,7 @@ var ui = new function() {
 		}
 
 		function doMoving(event) {
+			el_window.removeAttribute("data-centered");
 			event = (event || window.event);
 			event.preventDefault();
 			x = prev_x - event.clientX;
@@ -174,6 +176,7 @@ var ui = new function() {
 			document.onmouseup = null;
 		}
 
+		el_window.setAttribute("data-centered", "");
 		el_grab.onmousedown = startMoving;
 		el_window.onclick = () => __raiseWindow(el_window);
 	};