GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 01:00:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

some ui fixes

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-31 23:04:31 +03:00
parent 3a748859ff
commit d9dbddeb2f
5 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
kvmd/web/css/main.css
View File

@ -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);

12
kvmd/web/css/msd.css
View File

@ -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,

26
kvmd/web/index.html
View File

@ -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">

1
kvmd/web/js/stream.js
View File

@ -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");
}
});
};

13
kvmd/web/js/ui.js
View File

@ -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);
};