diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/css/kvm/about.css | 8 | ||||
-rw-r--r-- | web/css/kvm/hid.css | 2 | ||||
-rw-r--r-- | web/css/main.css | 23 | ||||
-rw-r--r-- | web/js/kvm/hid.js | 15 | ||||
-rw-r--r-- | web/js/kvm/keyboard.js | 5 | ||||
-rw-r--r-- | web/js/kvm/msd.js | 2 | ||||
-rw-r--r-- | web/js/kvm/session.js | 11 | ||||
-rw-r--r-- | web/js/kvm/stream.js | 6 | ||||
-rw-r--r-- | web/kvm/index.html | 4 |
9 files changed, 48 insertions, 28 deletions
diff --git a/web/css/kvm/about.css b/web/css/kvm/about.css index ccb3ad53..a841c3a6 100644 --- a/web/css/kvm/about.css +++ b/web/css/kvm/about.css @@ -30,8 +30,8 @@ div#about textarea { width: 100%; height: 200px; padding: 0; - color: var(--fg-color-normal); - background-color: var(--bg-color-menu); + color: var(--fg-color-light); + background-color: var(--bg-color-dark); border: none; border-radius: 4px; outline: 0 !important; @@ -42,11 +42,11 @@ div#about textarea { } div#about textarea::-moz-placeholder { - line-height: 150px; + line-height: 190px; text-align: center; } div#about textarea::-webkit-input-placeholder { - line-height: 150px; + line-height: 190px; text-align: center; } diff --git a/web/css/kvm/hid.css b/web/css/kvm/hid.css index 8c420fe9..28f4291e 100644 --- a/web/css/kvm/hid.css +++ b/web/css/kvm/hid.css @@ -3,7 +3,7 @@ textarea#hid-pak-text { resize: none; width: 100%; height: 40px; - color: var(--fg-color-dark); + color: var(--fg-color-intensive); background-color: var(--bg-color-light); border: none; outline: 0 !important; diff --git a/web/css/main.css b/web/css/main.css index 953e4f3c..8f37f6bd 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -22,17 +22,34 @@ hr { } p.text { - display: table-cell; text-align: justify; } +p:not(:first-child).text { + margin-top: 0; +} +p:last-child.text { + margin-bottom: 0; +} -pre.code { +div.code { + white-space: nowrap; overflow-x: auto; + font-family: monospace; + border-radius: 4px; color: var(--fg-color-dark); background-color: var(--bg-color-dark); padding: 10px; } -pre.code span.code-comment { +div.code::-webkit-scrollbar { + width: 8px; + height: 8px; +} +div.code::-webkit-scrollbar-thumb { + border-radius: 4px; + background: var(--fg-color-inactive); +} + +div.code span.code-comment { color: var(--fg-color-inactive); } diff --git a/web/js/kvm/hid.js b/web/js/kvm/hid.js index 5b13480f..69b34144 100644 --- a/web/js/kvm/hid.js +++ b/web/js/kvm/hid.js @@ -141,13 +141,14 @@ function Hid() { clipboard_codes.push(codes); } }); - - var confirm_msg = ( - "You are going to automatically type " + codes_count - + " characters from the system clipboard." - + " It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>" - + "<br>Are you sure you want to continue?<br>" - ); + var time = __codes_delay * codes_count * 2 / 1000; + + var confirm_msg = ` + You are going to automatically type ${codes_count} characters from the system clipboard. + It will take ${time} seconds.<br> + <br> + Are you sure you want to continue? + `; ui.confirm(confirm_msg).then(function(ok) { if (ok) { diff --git a/web/js/kvm/keyboard.js b/web/js/kvm/keyboard.js index ee9a7ba1..8a08a8aa 100644 --- a/web/js/kvm/keyboard.js +++ b/web/js/kvm/keyboard.js @@ -83,7 +83,7 @@ function Keyboard() { if (event.preventDefault) { event.preventDefault(); } - var el_key = document.querySelector("[data-key='" + event.code + "']"); + var el_key = document.querySelector(`[data-key='${event.code}']`); if (el_key && !event.repeat) { __commonHandler(el_key, state, "pressed"); if (__mac_cmd_hook) { @@ -168,7 +168,8 @@ function Keyboard() { }; var __resolveKeys = function(el_key) { - return document.querySelectorAll("[data-key='" + el_key.getAttribute("data-key") + "']"); + var code = el_key.getAttribute("data-key"); + return document.querySelectorAll(`[data-key='${code}']`); }; var __sendKey = function(el_key, state) { diff --git a/web/js/kvm/msd.js b/web/js/kvm/msd.js index bbc86370..c59563b7 100644 --- a/web/js/kvm/msd.js +++ b/web/js/kvm/msd.js @@ -73,7 +73,7 @@ function Msd() { __applyState(); }); __applyState(); - $("msd-switch-to-" + to + "-button").disabled = true; + $(`msd-switch-to-${to}-button`).disabled = true; }; var __selectNewImageFile = function() { diff --git a/web/js/kvm/session.js b/web/js/kvm/session.js index 19166a9a..ebddff7b 100644 --- a/web/js/kvm/session.js +++ b/web/js/kvm/session.js @@ -15,13 +15,13 @@ function Session() { var __init__ = function() { $("link-led").title = "Not connected yet..."; - __loadKvmdVersion(); + __loadKvmdInfo(); __startPoller(); }; /********************************************************************************/ - var __loadKvmdVersion = function() { + var __loadKvmdInfo = function() { var http = tools.makeRequest("GET", "/kvmd/info", function() { if (http.readyState === 4) { if (http.status === 200) { @@ -40,9 +40,9 @@ function Session() { } } $("about-version-kvmd").innerHTML = info.version.kvmd; - $("about-version-streamer").innerHTML = info.version.streamer + " (" + info.streamer + ")"; + $("about-version-streamer").innerHTML = `${info.version.streamer} (${info.streamer})`; } else { - setTimeout(__loadKvmdVersion, 1000); + setTimeout(__loadKvmdInfo, 1000); } } }); @@ -54,7 +54,8 @@ function Session() { var http = tools.makeRequest("GET", "/ws_auth", function() { if (http.readyState === 4) { if (http.status === 200) { - __ws = new WebSocket((location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws"); + var proto = (location.protocol === "https:" ? "wss" : "ws"); + __ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`); __ws.onopen = __wsOpenHandler; __ws.onmessage = __wsMessageHandler; __ws.onerror = __wsErrorHandler; diff --git a/web/js/kvm/stream.js b/web/js/kvm/stream.js index 32a8cad8..d543701f 100644 --- a/web/js/kvm/stream.js +++ b/web/js/kvm/stream.js @@ -156,8 +156,8 @@ function Streamer() { var el_grab = document.querySelector("#stream-window-header .window-grab"); var el_info = $("stream-info"); if (online) { - var fps_suffix = (__client_fps >= 0 ? " / " + __client_fps + " fps" : ""); - el_grab.innerHTML = el_info.innerHTML = "Stream – " + __resolution.width + "x" + __resolution.height + fps_suffix; + var fps_suffix = (__client_fps >= 0 ? ` / ${__client_fps} fps` : ""); + el_grab.innerHTML = el_info.innerHTML = `Stream – ${__resolution.width}x${__resolution.height}${fps_suffix}`; } else { el_grab.innerHTML = el_info.innerHTML = "Stream – offline"; } @@ -183,7 +183,7 @@ function Streamer() { }; var __sendParam = function(name, value) { - var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?" + name + "=" + value, function() { + var http = tools.makeRequest("POST", `/kvmd/streamer/set_params?${name}=${value}`, function() { if (http.readyState === 4) { if (http.status !== 200) { ui.error("Can't configure stream:<br>", http.responseText); diff --git a/web/kvm/index.html b/web/kvm/index.html index 20c0340d..e67654a6 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -576,8 +576,8 @@ <textarea readonly placeholder="No data" id="about-meta"></textarea> <hr> <p class="text"> - Please visit our site <a target="_blank" href="https://github.com/pi-kvm">https://github.com/pi-kvm</a> to get documentation, - source codes, hardware schematics and legal information. + Full documentation, source code, hardware schematics and legal information + can be found in our <a target="_blank" href="https://github.com/pi-kvm">official website</a>. </p> </div> </div> |