summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/share/css/kvm/hid.css22
-rw-r--r--web/share/css/main.css74
-rw-r--r--web/share/css/navbar.css24
-rw-r--r--web/share/css/x-desktop.css6
-rw-r--r--web/share/js/tools.js19
-rw-r--r--web/share/js/wm.js78
6 files changed, 135 insertions, 88 deletions
diff --git a/web/share/css/kvm/hid.css b/web/share/css/kvm/hid.css
index 5c710ac2..32a92e0f 100644
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -24,28 +24,6 @@ div#text-menu {
width: 340px;
}
-textarea#hid-pak-text {
- display: block;
- resize: none;
- height: 120px;
- width: 100%;
- border: var(--border-default-thin);
- border-radius: 4px;
- color: var(--cs-code-default-fg);
- background-color: var(--cs-code-default-bg);
- -webkit-appearance:none;
-}
-
-textarea#hid-pak-text::-moz-placeholder {
- line-height: 60px;
- text-align: center;
-}
-
-textarea#hid-pak-text::-webkit-input-placeholder {
- line-height: 60px;
- text-align: center;
-}
-
input#hid-recorder-new-script-file {
display: none;
}
diff --git a/web/share/css/main.css b/web/share/css/main.css
index 8e6af465..cd8b6342 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -123,6 +123,26 @@ select {
display: block;
width: 100%;
padding-left: 5px;
+}
+select[size] {
+ height: auto;
+ padding: 5px;
+}
+select[size]::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+select[size]::-webkit-scrollbar-thumb {
+ border-radius: 4px;
+ background: var(--cs-scroll-default-bg);
+}
+@-moz-document url-prefix() {
+ select[size] {
+ scrollbar-width: 8px;
+ scrollbar-color: var(--cs-scroll-default-bg) var(--cs-code-default-bg);
+ }
+}
+select:not([size]) {
padding-right: 25px;
}
button.small {
@@ -149,22 +169,24 @@ select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
+}
+select:not([size]) {
background-image: url("../svg/select-arrow-normal.svg");
background-position: center right;
background-repeat: no-repeat;
}
-select:disabled {
+select:not([size]):disabled {
background-image: url("../svg/select-arrow-inactive.svg") !important;
}
-select:active {
+select:not([size]):active {
color: var(--cs-control-intensive-fg) !important;
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
-select option {
+select:not([size]) option {
color: var(--cs-control-default-fg);
background-color: var(--cs-control-default-bg);
}
-select option.comment {
+select:not([size]) option.comment {
color: var(--cs-control-disabled-fg);
font-style: italic;
}
@@ -180,6 +202,26 @@ input[type=text], input[type=password] {
height: 30px;
}
+textarea {
+ display: block;
+ resize: none;
+ height: 120px;
+ width: 100%;
+ border: var(--border-default-thin);
+ border-radius: 4px;
+ color: var(--cs-code-default-fg);
+ background-color: var(--cs-code-default-bg);
+ -webkit-appearance:none;
+}
+textarea::-moz-placeholder {
+ line-height: 60px;
+ text-align: center;
+}
+textarea::-webkit-input-placeholder {
+ line-height: 60px;
+ text-align: center;
+}
+
div.buttons-row {
margin: 0;
padding: 0;
@@ -218,6 +260,30 @@ div.buttons-row {
border-bottom-right-radius: 0;
}
+table.kv {
+ border-spacing: 5px;
+ margin: 0 10px 0 10px;
+ font-size: 12px;
+}
+table.kv td {
+ text-align: left;
+}
+table.kv td.value {
+ font-weight: bold;
+ max-width: 310px;
+ overflow: hidden;
+}
+table.kv td.value-slider {
+ width: 100%;
+}
+table.kv td.value-number {
+ font-weight: bold;
+ max-width: 310px;
+ overflow: hidden;
+ min-width: 40px;
+ max-width: 40px;
+}
+
ul.footer {
list-style-type: none;
bottom: 0;
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index 04d15e05..eb125f9a 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -167,30 +167,6 @@ ul#navbar li div.menu div.text {
font-size: 14px;
}
-ul#navbar li div.menu table.kv {
- border-spacing: 5px;
- margin: 0 10px 0 10px;
- font-size: 12px;
-}
-ul#navbar li div.menu table.kv td {
- text-align: left;
-}
-ul#navbar li div.menu table.kv td.value {
- font-weight: bold;
- max-width: 310px;
- overflow: hidden;
-}
-ul#navbar li div.menu table.kv td.value-slider {
- width: 100%;
-}
-ul#navbar li div.menu table.kv td.value-number {
- font-weight: bold;
- max-width: 310px;
- overflow: hidden;
- min-width: 40px;
- max-width: 40px;
-}
-
ul#navbar li div.menu div.buttons button,
ul#navbar li div.menu div.buttons select {
border-radius: 0;
diff --git a/web/share/css/x-desktop.css b/web/share/css/x-desktop.css
index a652c61b..732f8aa2 100644
--- a/web/share/css/x-desktop.css
+++ b/web/share/css/x-desktop.css
@@ -23,7 +23,7 @@
/* ===== main.css ===== */
button:enabled:hover,
-select:enabled:hover,
+select:not([size]):enabled:hover,
input[type=file]:enabled:hover::-webkit-file-selector-button,
input[type=file]:enabled:hover::file-selector-button {
color: var(--cs-control-hovered-fg);
@@ -31,7 +31,7 @@ input[type=file]:enabled:hover::file-selector-button {
}
button:active,
-select:active,
+select:not([size]):active,
input[type=file]:active::-webkit-file-selector-button,
input[type=file]:active::file-selector-button {
color: var(--cs-control-pressed-fg) !important;
@@ -42,7 +42,7 @@ button.key:active,
select.key:active {
box-shadow: none;
}
-select:enabled:hover {
+select:not([size]):enabled:hover {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index fbf712de..48f5b420 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -64,6 +64,17 @@ export var tools = new function() {
/************************************************************************/
+ self.escape = function(text) {
+ return text.replace(
+ /[^0-9A-Za-z ]/g,
+ ch => "&#" + ch.charCodeAt(0) + ";"
+ );
+ };
+
+ self.makeClosure = function(func, ...args) {
+ return () => func(...args);
+ };
+
self.upperFirst = function(text) {
return text[0].toUpperCase() + text.slice(1);
};
@@ -87,6 +98,10 @@ export var tools = new function() {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
+ self.formatHex = function(value) {
+ return `0x${value.toString(16).toUpperCase()}`;
+ };
+
self.formatSize = function(size) {
if (size > 0) {
let index = Math.floor( Math.log(size) / Math.log(1024) );
@@ -283,9 +298,9 @@ export var tools = new function() {
option.className = "comment";
el.add(option);
},
- "addSeparator": function(el) {
+ "addSeparator": function(el, repeat=30) {
if (!self.browser.is_mobile) {
- self.selector.addComment(el, "\u2500".repeat(30));
+ self.selector.addComment(el, "\u2500".repeat(repeat));
}
},
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 6a26a648..41709dd2 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -147,7 +147,7 @@ function __WindowManager() {
self.copyTextToClipboard = function(text) {
let workaround = function(ex) {
// https://stackoverflow.com/questions/60317969/document-execcommandcopy-not-working-even-though-the-dom-element-is-created
- let callback = function() {
+ __modalDialog("Info", "Press OK to copy the text to the clipboard", true, false).then(function() {
tools.error("copyTextToClipboard(): navigator.clipboard.writeText() is not working:", ex);
tools.info("copyTextToClipboard(): Trying a workaround...");
@@ -175,8 +175,7 @@ function __WindowManager() {
tools.error("copyTextToClipboard(): Workaround failed:", ex);
wm.error("Can't copy text to the clipboard:<br>", ex);
}
- };
- __modalDialog("Info", "Press OK to copy the text to the clipboard", true, false, callback);
+ });
};
if (navigator.clipboard) {
navigator.clipboard.writeText(text).then(function() {
@@ -192,8 +191,9 @@ function __WindowManager() {
self.info = (...args) => __modalDialog("Info", args.join(" "), true, false);
self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+ self.modal = (header, text, ok, cancel) => __modalDialog(header, text, ok, cancel);
- var __modalDialog = function(header, text, ok, cancel, callback=null, parent=null) {
+ var __modalDialog = function(header, text, ok, cancel, parent=null) {
let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
let el_modal = document.createElement("div");
@@ -212,22 +212,45 @@ function __WindowManager() {
let el_content = document.createElement("div");
el_content.className = "modal-content";
- el_content.innerHTML = text;
el_window.appendChild(el_content);
+ let el_buttons = document.createElement("div");
+ el_buttons.classList.add("modal-buttons", "buttons-row");
+ el_window.appendChild(el_buttons);
+
+ let el_cancel_button = null;
+ let el_ok_button = null;
+ if (cancel) {
+ el_cancel_button = document.createElement("button");
+ el_cancel_button.className = "row100";
+ el_cancel_button.innerHTML = "Cancel";
+ el_buttons.appendChild(el_cancel_button);
+ }
+ if (ok) {
+ el_ok_button = document.createElement("button");
+ el_ok_button.className = "row100";
+ el_ok_button.innerHTML = "OK";
+ el_buttons.appendChild(el_ok_button);
+ }
+ if (ok && cancel) {
+ el_ok_button.className = "row50";
+ el_cancel_button.className = "row50";
+ }
+
+ el_window.onkeyup = function(event) {
+ event.preventDefault();
+ if (ok && event.code === "Enter") {
+ el_ok_button.click();
+ } else if (cancel && event.code === "Escape") {
+ el_cancel_button.click();
+ }
+ };
+
let promise = null;
if (ok || cancel) {
promise = new Promise(function(resolve) {
- let el_buttons = document.createElement("div");
- el_buttons.className = "modal-buttons";
- el_window.appendChild(el_buttons);
-
function close(retval) {
- if (callback) {
- callback(retval);
- }
__closeWindow(el_window);
- el_modal.outerHTML = "";
let index = __windows.indexOf(el_modal);
if (index !== -1) {
__windows.splice(index, 1);
@@ -238,38 +261,27 @@ function __WindowManager() {
__activateLastWindow(el_modal);
}
resolve(retval);
+ // Так как resolve() асинхронный, надо выполнить в эвентлупе после него
+ setTimeout(function() { el_modal.outerHTML = ""; }, 0);
}
if (cancel) {
- var el_cancel_button = document.createElement("button");
- el_cancel_button.innerHTML = "Cancel";
tools.el.setOnClick(el_cancel_button, () => close(false));
- el_buttons.appendChild(el_cancel_button);
}
if (ok) {
- var el_ok_button = document.createElement("button");
- el_ok_button.innerHTML = "OK";
tools.el.setOnClick(el_ok_button, () => close(true));
- el_buttons.appendChild(el_ok_button);
}
- if (ok && cancel) {
- el_ok_button.className = "row50";
- el_cancel_button.className = "row50";
- }
-
- el_window.onkeyup = function(event) {
- event.preventDefault();
- if (ok && event.code === "Enter") {
- el_ok_button.click();
- } else if (cancel && event.code === "Escape") {
- el_cancel_button.click();
- }
- };
});
}
__windows.push(el_modal);
(parent || document.fullscreenElement || document.body).appendChild(el_modal);
+ if (typeof text === "function") {
+ // Это должно быть здесь, потому что элемент должен иметь родителя чтобы существовать
+ text(el_content, el_ok_button);
+ } else {
+ el_content.innerHTML = text;
+ }
__activateWindow(el_modal);
return promise;
@@ -625,7 +637,7 @@ function __WindowManager() {
+ "In Chrome use HTTPS and enable <i>system-keyboard-lock</i><br>"
+ "by putting at URL <i>chrome://flags/#system-keyboard-lock</i>"
);
- __modalDialog("Keyboard lock is unsupported", msg, true, false, null, el_window);
+ __modalDialog("Keyboard lock is unsupported", msg, true, false, el_window);
}
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:35:32 +0000