refactoring

2025-12-13 01:30:31 +08:00 · 2018-11-19 06:39:18 +03:00 · 2018-11-19 06:39:18 +03:00 · a9cf03582f
commit a9cf03582f
parent 948c88799f
8 changed files with 256 additions and 251 deletions
--- a/web/css/kvm/msd.css
+++ b/web/css/kvm/msd.css
@ -2,11 +2,11 @@ div#msd-menu {
 	width: 450px;
 }

-div.msd-message, input.msd-message {
+div#msd-menu div.msd-message, input.msd-message {
 	display: none;
 }

-table.msd-info {
+div#msd-menu table.msd-info {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	user-select: text;
@ -15,7 +15,7 @@ table.msd-info {
 	font-size: 12px;
 }

-table.msd-info td.msd-info-value {
+div#msd-menu table.msd-info td.msd-info-value {
 	font-weight: bold;
 	max-width: 310px;
 	overflow: hidden;
--- a/web/css/kvm/stream.css
+++ b/web/css/kvm/stream.css
@ -2,23 +2,6 @@ div#stream-info {
 	display: none;
 }

-img#stream-image {
-	width: 640px;
-	height: 480px;
-	display: block;
-	background-color: black;
-}
-
-img.stream-image-active {
-	-webkit-filter: none;
-	filter: none;
-}
-
-img.stream-image-inactive {
-	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
-	filter: grayscale(100%) brightness(75%) sepia(75%);
-}
-
 div#stream-box {
 	position: relative;
 	display: inline-block;
@ -39,6 +22,23 @@ div.stream-box-mouse-enabled {
 	cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
 }

+img#stream-image {
+	width: 640px;
+	height: 480px;
+	display: block;
+	background-color: black;
+}
+
+img.stream-image-active {
+	-webkit-filter: none;
+	filter: none;
+}
+
+img.stream-image-inactive {
+	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
+	filter: grayscale(100%) brightness(75%) sepia(75%);
+}
+
 div.stream-slider-box {
 	margin-top: 5px;
 	display: flex;
--- a/web/css/main.css
+++ b/web/css/main.css
@ -4,6 +4,8 @@ body {
 	color: var(--fg-color-normal);
 	background-color: var(--bg-color-normal);
 	font-family: sans-serif !important;
+}
+body.body-no-select {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
@ -96,6 +98,12 @@ select:active {
 	}
 }

+div.buttons-row {
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
 .row50 {
 	display: inline-block;
 	width: 50%;
--- a/web/css/menu.css
+++ b/web/css/menu.css
@ -10,20 +10,24 @@ ul.menu {
 	height: 50px;
 	z-index: 2147483646;
 }
+
 ul.menu li.menu-logo {
 	line-height: 50px;
 	margin-top: -2px;
 	margin-left: 16px;
 	float: left;
 }
-ul.menu li.menu-right-actions {
+
+ul.menu li.menu-right-items {
 	float: right;
 }
+
 ul.menu img {
 	vertical-align: middle;
 	margin-right: 10px;
 	height: 20px;
 }
+
 ul.menu li a.menu-item {
 	line-height: 50px;
 	outline: none;
@ -35,6 +39,7 @@ ul.menu li a.menu-item {
 	padding-right: 16px;
 	text-decoration: none;
 }
+
 ul.menu li a.menu-item:hover:not(.active) {
 	background-color: var(--bg-color-hovered);
 }
@ -44,11 +49,13 @@ ul.menu li a.menu-item:hover:not(.active) {
 		background-color: var(--bg-color-menu) !important;
 	}
 }
+
 ul.menu li a.menu-item-selected {
 	box-shadow: 0 5px 0 var(--border-color-intensive) inset;
 	background-color: var(--bg-color-selected) !important;
 }
-div.menu-dropdown-content {
+
+ul.menu li div.menu-item-content {
 	visibility: hidden;
 	overflow: hidden;
 	white-space: nowrap;
@ -61,16 +68,22 @@ div.menu-dropdown-content {
 	box-shadow: var(--shadow-big);
 	z-index: 2147483645;
 }
-div.menu-dropdown-content button, select {
+
+ul.menu li div.menu-item-content-buttons {
+	background-color: var(--bg-color-normal);
+}
+
+ul.menu li div.menu-item-content-text {
+	margin: 10px 15px 10px 15px;
+	font-size: 14px;
+}
+
+ul.menu li div.menu-item-content button, select {
 	text-align: left;
 	padding: 0 16px;
 }
-div.menu-dropdown-content div.buttons-row {
-	margin: 0;
-	padding: 0;
-	font-size: 0;
-}
-div.menu-dropdown-content hr {
+
+ul.menu li div.menu-item-content hr {
 	margin: 0;
 	display: block;
 	height: 0px;
@ -78,11 +91,3 @@ div.menu-dropdown-content hr {
 	border: none;
 	border-top: var(--border-dark-thin);
 }
-div.menu-dropdown-content-buttons {
-	background-color: var(--bg-color-normal);
-}
-div.menu-dropdown-content-text {
-	margin: 10px 15px 10px 15px;
-	font-size: 14px;
-}
-
--- a/web/css/switches.css
+++ b/web/css/switches.css
@ -19,13 +19,13 @@ div.switch-box label.switch-label {
 	border-radius: 15px;
 }

-div.switch-box span.switch-inner {
+div.switch-box label.switch-label span.switch-inner {
 	display: block;
 	width: 200%;
 	margin-left: -100%;
 }

-div.switch-box span.switch-inner:before, span.switch-inner:after {
+div.switch-box label.switch-label span.switch-inner:before, span.switch-inner:after {
 	display: block;
 	float: left;
 	width: 50%;
@ -38,7 +38,7 @@ div.switch-box span.switch-inner:before, span.switch-inner:after {
 	box-sizing: border-box;
 }

-div.switch-box span.switch-inner:before {
+div.switch-box label.switch-label span.switch-inner:before {
 	content: "ON";
 	padding-left: 5px;
 	background-color: var(--bg-color-gray);
@ -46,7 +46,7 @@ div.switch-box span.switch-inner:before {
 	text-align: left;
 }

-div.switch-box span.switch-inner:after {
+div.switch-box label.switch-label span.switch-inner:after {
 	content: "OFF";
 	padding-right: 5px;
 	background-color: var(--bg-color-gray);
@ -54,7 +54,7 @@ div.switch-box span.switch-inner:after {
 	text-align: right;
 }

-div.switch-box span.switch {
+div.switch-box label.switch-label span.switch {
 	display: block;
 	width: 15px;
 	margin: 0px;
--- a/web/js/ui.js
+++ b/web/js/ui.js
@ -155,7 +155,7 @@ function Ui() {
 		var all_hidden = true;

 		__menu_items.forEach(function(el_item) {
-			var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+			var el_menu = el_item.parentElement.querySelector(".menu-item-content");
 			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
 				el_item.focus();
 				el_item.classList.add("menu-item-selected");
@ -184,7 +184,7 @@ function Ui() {
 	var __closeAllMenues = function() {
 		document.onkeyup = null;
 		__menu_items.forEach(function(el_item) {
-			var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+			var el_menu = el_item.parentElement.querySelector(".menu-item-content");
 			el_item.classList.remove("menu-item-selected");
 			el_menu.style.visibility = "hidden";
 		});
--- a/web/kvm.html
+++ b/web/kvm.html
@ -42,7 +42,7 @@
 	<script>window.onload = main;</script>
 </head>

-<body>
+<body class="body-no-select">
 	<div id="bad-browser-modal" class="modal">
 		<div class="modal-window">
 			<div class="modal-content">
@ -66,8 +66,7 @@
 			<img class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" />
 		</li>

-		<li class="menu-right-actions">
-			<div class="menu-dropdown">
+		<li class="menu-right-items">
 			<a class="menu-item" href="#">
 				<img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
 				<img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
@ -75,8 +74,8 @@
 				<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
 				System &#8628;
 			</a>
-				<div data-dont-hide-menu class="menu-dropdown-content">
-					<div class="menu-dropdown-content-buttons">
+			<div data-dont-hide-menu class="menu-item-content">
+				<div class="menu-item-content-buttons">
 					<button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
 					<hr>
 					<button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
@ -84,28 +83,28 @@
 					<button data-force-hide-menu id="show-about-button">&bull; Show about</button>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-text">
+				<div class="menu-item-content-text">
 					Stream quality: <span id="stream-quality-value">80%</span>
 					<div class="stream-slider-box">
 						<input disabled type="range" id="stream-quality-slider" class="slider" />
 					</div>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-text">
+				<div class="menu-item-content-text">
 					Stream FPS: <span id="stream-desired-fps-value">30</span>
 					<div class="stream-slider-box">
 						<input disabled type="range" id="stream-desired-fps-slider" class="slider" />
 					</div>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-text">
+				<div class="menu-item-content-text">
 					Stream size: <span id="stream-size-value">100%</span>
 					<div class="stream-slider-box">
 						<input type="range" id="stream-size-slider" class="slider" />
 					</div>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-text">
+				<div class="menu-item-content-text">
 					<table id="stream-auto-resize-box"><tr>
 						<td>Auto-resize stream:</td>
 						<td align="right">
@ -119,45 +118,41 @@
 						</td>
 					</tr></table>
 				</div>
-					<div class="menu-dropdown-content-buttons">
+				<div class="menu-item-content-buttons">
 					<hr>
 					<button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
 					<button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
 					<button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-buttons">
+				<div class="menu-item-content-buttons">
 					<button data-force-hide-menu id="open-log-button">&bull; Open log</button>
 				</div>
 			</div>
-			</div>
 		</li>

-		<li class="menu-right-actions">
-			<div class="menu-dropdown">
+		<li class="menu-right-items">
 			<a class="menu-item" href="#">
 				<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
 				<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
 				ATX &#8628;
 			</a>
-				<div class="menu-dropdown-content menu-dropdown-content-buttons">
+			<div class="menu-item-content menu-item-content-buttons">
 				<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
 				<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
 				<hr>
 				<button disabled id="atx-reset-button">&bull; Click Reset</button>
 			</div>
-			</div>
 		</li>

-		<li class="menu-right-actions">
-			<div class="menu-dropdown">
+		<li class="menu-right-items">
 			<a class="menu-item" href="#">
 				<img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
 				Mass Storage &#8628;
 			</a>
-				<div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content">
+			<div data-dont-hide-menu id="msd-menu" class="menu-item-content">
 				<div id="msd-not-in-operate" class="msd-message">
-						<div class="menu-dropdown-content-text">
+					<div class="menu-item-content-text">
 						<table>
 							<tr>
 								<td><img src="svg/warning.svg" /></td>
@ -169,7 +164,7 @@
 				</div>

 				<div id="msd-current-image-broken" class="msd-message">
-						<div class="menu-dropdown-content-text">
+					<div class="menu-item-content-text">
 						<table>
 							<tr>
 								<td><img src="svg/warning.svg" /></td>
@ -181,7 +176,7 @@
 				</div>

 				<div id="msd-another-another-user-uploads" class="msd-message">
-						<div class="menu-dropdown-content-text">
+					<div class="menu-item-content-text">
 						<table>
 							<tr>
 								<td><img src="svg/info.svg" /></td>
@ -217,7 +212,7 @@
 				<hr>

 				<input type="file" id="msd-select-new-image-file" class="msd-message" />
-					<div class="menu-dropdown-content-buttons buttons-row">
+				<div class="menu-item-content-buttons buttons-row">
 					<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
 					<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
 					<button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
@ -236,7 +231,7 @@
 						</tr>
 					</table>
 					<hr>
-						<div class="menu-dropdown-content-text">
+					<div class="menu-item-content-text">
 						<div id="msd-progress" class="progress">
 							<span id="msd-progress-value" class="progress-value"></span>
 						</div>
@ -244,22 +239,20 @@
 					<hr>
 				</div>

-					<div class="menu-dropdown-content-buttons buttons-row">
+				<div class="menu-item-content-buttons buttons-row">
 					<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
 					<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
 				</div>
 			</div>
-			</div>
 		</li>

-		<li class="menu-right-actions">
-			<div class="menu-dropdown">
+		<li class="menu-right-items">
 			<a class="menu-item" href="#">
 				<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
 				Shortcuts &#8628;
 			</a>
-				<div data-dont-hide-menu class="menu-dropdown-content">
-					<div class="menu-dropdown-content-buttons">
+			<div data-dont-hide-menu class="menu-item-content">
+				<div class="menu-item-content-buttons">
 					<textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
 					<hr>
 					<button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
@ -282,11 +275,11 @@
 					<button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-text">
+				<div class="menu-item-content-text">
 					&darr; Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup>
 				</div>
 				<hr>
-					<div class="menu-dropdown-content-buttons buttons-row">
+				<div class="menu-item-content-buttons buttons-row">
 					<button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
 					<button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
 					<button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
@ -295,7 +288,6 @@
 					<button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button>
 				</div>
 			</div>
-			</div>
 		</li>
 	</ul>