From cd62d7024b78b914503e0da466c532e046a838b4 Mon Sep 17 00:00:00 2001 From: rustdesk Date: Tue, 1 Feb 2022 02:38:52 +0800 Subject: [PATCH] new msgbox --- src/ui.rs | 12 --- src/ui/common.css | 79 ++++++++++++++-- src/ui/common.tis | 107 ++++++++++------------ src/ui/index.html | 1 + src/ui/index.tis | 4 + src/ui/msgbox.html | 69 -------------- src/ui/msgbox.tis | 223 +++++++++++++++++++-------------------------- src/ui/remote.html | 2 + src/ui/remote.rs | 5 - 9 files changed, 220 insertions(+), 282 deletions(-) delete mode 100644 src/ui/msgbox.html diff --git a/src/ui.rs b/src/ui.rs index 6e867c53b..614763d47 100644 --- a/src/ui.rs +++ b/src/ui.rs @@ -31,13 +31,6 @@ struct UI( struct UIHostHandler; -fn get_msgbox() -> String { - #[cfg(feature = "inline")] - return inline::get_msgbox(); - #[cfg(not(feature = "inline"))] - return "".to_owned(); -} - pub fn start(args: &mut [String]) { // https://github.com/c-smile/sciter-sdk/blob/master/include/sciter-x-types.h // https://github.com/rustdesk/rustdesk/issues/132#issuecomment-886069737 @@ -227,10 +220,6 @@ impl UI { Config::set_remote_id(&id); } - fn get_msgbox(&mut self) -> String { - get_msgbox() - } - fn goto_install(&mut self) { allow_err!(crate::run_me(vec!["--install"])); } @@ -670,7 +659,6 @@ impl sciter::EventHandler for UI { fn store_fav(Value); fn recent_sessions_updated(); fn get_icon(); - fn get_msgbox(); fn install_me(String); fn is_installed(); fn set_socks(String, String, String); diff --git a/src/ui/common.css b/src/ui/common.css index df1ea1f44..587ccc957 100644 --- a/src/ui/common.css +++ b/src/ui/common.css @@ -214,24 +214,24 @@ header caption { } } -div.msgbox { +div.chatbox { size: *; } -div.msgbox div.send svg { +div.chatbox div.send svg { size: 16px; } -div.msgbox div.send span:active { +div.chatbox div.send span:active { opacity: 0.5; } -div.msgbox div.send span { +div.chatbox div.send span { display: inline-block; padding: 6px; } -div.msgbox .msgs { +div.chatbox .msgs { border: none; size: *; border-bottom: color(border) 1px solid; @@ -241,25 +241,25 @@ div.msgbox .msgs { padding: 1em; } -div.msgbox div.send { +div.chatbox div.send { flow: horizontal; height: 30px; padding: 5px; } -div.msgbox div.send input { +div.chatbox div.send input { height: 20px !important; } -div.msgbox div.name { +div.chatbox div.name { color: color(dark-green); } -div.msgbox div.right-side div { +div.chatbox div.right-side div { text-align: right; } -div.msgbox div.text { +div.chatbox div.text { margin-top: 0.5em; } @@ -328,3 +328,62 @@ menu li.line-through { text-decoration-line: line-through; color: red; } + +div#msgbox .msgbox-icon svg { + size: 80px; + background: white; + +} +div#msgbox .form { + border-spacing: 0.5em; +} + +div#msgbox .caption { + @ELLIPSIS; + height: 2em; + line-height: 2em; + text-align: center; + color: white; + font-weight: bold; +} + +div#msgbox .form .text { + @ELLIPSIS; +} + +div#msgbox button.button { + margin-left: 1.6em; +} + +div#msgbox div.password { + position: relative; +} + +div#msgbox div.password svg { + position: absolute; + right: 0.25em; + top: 0.25em; + padding: 0.5em; + color: color(text); +} + +div#msgbox div.set-password > div { + flow: horizontal; +} + +div#msgbox div.set-password > div > span { + width: 30%; + line-height: 2em; +} + +div#msgbox div.set-password div.password { + width: *; +} + +div#msgbox div.set-password input { + font-size: 1em; +} + +div#msgbox #error { + color: red; +} diff --git a/src/ui/common.tis b/src/ui/common.tis index b4e0bf190..be9b99094 100644 --- a/src/ui/common.tis +++ b/src/ui/common.tis @@ -174,7 +174,7 @@ class ChatBox: Reactor.Component { self.timer(1ms, function() { scrollToBottom(me.msgs); }); - return
+ return
{msgs} @@ -211,81 +211,70 @@ class ChatBox: Reactor.Component { /******************** start of msgbox ****************************************/ var remember_password = false; -var msgbox_params; -function getMsgboxParams() { - return msgbox_params; -} - -// tmp workaround https://sciter.com/forums/topic/menu-not-be-hidden-when-open-dialog-on-linux/ -function msgbox(type, title, text, callback=null, height=180, width=500, retry=0, contentStyle="") { - if (is_linux) { // fix menu not hidden issue - self.timer(1ms, - function() { - msgbox_(type, title, text, callback, height, width, retry, contentStyle); - }); - } else { - msgbox_(type, title, text, callback, height, width, retry, contentStyle); +function bring_to_top(idx=-1) { + if (view.windowState == View.WINDOW_HIDDEN || view.windowState == View.WINDOW_MINIMIZED) { + if (is_linux) { + view.focus = self; + } else { + view.windowState = View.WINDOW_SHOWN; + } + if (idx >= 0) body.cur = idx; + } else { + view.windowTopmost = true; + view.windowTopmost = false; + } +} +function msgbox(type, title, content, callback=null, height=180, width=500, hasRetry=false, contentStyle="") { + if (!type) { + closeMsgbox(); + return; } -} - -function msgbox_(type, title, text, callback, height, width, retry, contentStyle) { - var has_msgbox = msgbox_params != null; - if (!has_msgbox && !type) return; var remember = false; - try { - remember = handler.get_remember(); - } catch(e) {} - msgbox_params = { - remember: remember, type: type, text: text, title: title, - getParams: getMsgboxParams, - callback: callback, translate: translate, - retry: retry, contentStyle: contentStyle, - }; - if (has_msgbox) return; - var dialog = { - client: true, - parameters: msgbox_params, - width: width + (is_xfce ? 50 : 0), - height: height + (is_xfce ? 50 : 0), - }; - var html = handler.get_msgbox(); - if (html) dialog.html = html; - else dialog.url = self.url("msgbox.html"); - var res = view.dialog(dialog); - msgbox_params = null; - stdout.printf("msgbox return, type: %s, res: %s\n", type, res); - if (type.indexOf("custom") >= 0) { - // - } else if (!res) { - if (!is_port_forward) view.close(); - } else if (res == "!alive") { - // do nothing - } else if (res.type == "input-password") { - handler.login(res.password, res.remember); - if (!is_port_forward) msgbox("connecting", "Connecting...", "Logging in..."); - } else if (res.reconnect) { - if (!is_port_forward) connecting(); - handler.reconnect(); + try { remember = handler.get_remember(); } catch(e) {} + width += is_xfce ? 50 : 0; + height += is_xfce ? 50 : 0; + + if (type == "input-password") { + callback = function (res) { + if (!res) { + view.close(); + return; + } + handler.login(res.password, res.remember); + if (!is_port_forward) msgbox("connecting", "Connecting...", "Logging in..."); + }; + } else if (type.indexOf("custom") < 0 && !is_port_forward && !callback) { + callback = function() { view.close(); } } + $(#msgbox).content(); } function connecting() { handler.msgbox("connecting", "Connecting...", "Connection in progress. Please wait."); } -handler.msgbox = function(type, title, text, retry=0) { - self.timer(30ms, function() { msgbox(type, title, text, null, 180, 500, retry); }); +handler.msgbox = function(type, title, text, hasRetry=false) { + msgbox(type, title, text, null, 180, 500, hasRetry); } -var reconnectTimeout = 1; +var reconnectTimeout = 1000; +var activeTimer = function() {}; handler.msgbox_retry = function(type, title, text, hasRetry) { - handler.msgbox(type, title, text, hasRetry ? reconnectTimeout : 0); + handler.msgbox(type, title, text, hasRetry); if (hasRetry) { + self.timer(0, activeTimer); + activeTimer = self.timer(reconnectTimeout, retryConnect); reconnectTimeout *= 2; } else { - reconnectTimeout = 1; + reconnectTimeout = 1000; } } + +function retryConnect(cancelTimer=false) { + if (!is_port_forward) connecting(); + handler.reconnect(); + if (cancelTimer) self.timer(0, activeTimer); +} /******************** end of msgbox ****************************************/ function Progress() diff --git a/src/ui/index.html b/src/ui/index.html index fc24b564a..88c172231 100644 --- a/src/ui/index.html +++ b/src/ui/index.html @@ -7,6 +7,7 @@ diff --git a/src/ui/index.tis b/src/ui/index.tis index d9625eb43..b1b23475a 100644 --- a/src/ui/index.tis +++ b/src/ui/index.tis @@ -326,6 +326,7 @@ class App: Reactor.Component
+
; } @@ -660,6 +661,9 @@ function formatId(id) { } event keydown (evt) { + if (view.focus && view.focus.id != 'remote_id') { + return; + } if (!evt.shortcutKey) { if (evt.keyCode == Event.VK_ENTER || (is_osx && evt.keyCode == 0x4C) || diff --git a/src/ui/msgbox.html b/src/ui/msgbox.html deleted file mode 100644 index 79fa067b3..000000000 --- a/src/ui/msgbox.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - diff --git a/src/ui/msgbox.tis b/src/ui/msgbox.tis index 3a513e4b4..1aa7e62c1 100644 --- a/src/ui/msgbox.tis +++ b/src/ui/msgbox.tis @@ -1,188 +1,171 @@ -var type, title, text, getParams, remember, retry, callback, contentStyle; -var my_translate; - -function updateParams(params) { - type = params.type; - title = params.title; - text = params.text; - getParams = params.getParams; - remember = params.remember; - callback = params.callback; - my_translate = params.translate; - retry = params.retry; - contentStyle = params.contentStyle; - try { text = translate_text(text); } catch (e) {} - if (retry > 0) { - self.timer(retry * 1000, function() { - view.close({ reconnect: true }); - }); - } -} - function translate_text(text) { if (text.indexOf('Failed') == 0 && text.indexOf(': ') > 0) { var fds = text.split(': '); for (var i = 0; i < fds.length; ++i) { - fds[i] = my_translate(fds[i]); + fds[i] = translate(fds[i]); } text = fds.join(': '); } return text; } -var params = view.parameters; -updateParams(params); +function closeMsgbox() { + $(#msgbox).content(); +} -var body; - -class Body: Reactor.Component { - function this() { - body = this; +class MsgboxComponent: Reactor.Component { + function this(params) { + this.width = params.width; + this.height = params.height; + this.type = params.type; + this.title = params.title; + this.content = params.content; + this.remember = params.remember; + this.callback = params.callback; + this.hasRetry = params.hasRetry; + this.contentStyle = params.contentStyle; + try { this.content = translate_text(this.content); } catch (e) {} } function getIcon(color) { - if (type == "input-password") { + if (this.type == "input-password") { return ; } - if (type == "connecting") { + if (this.type == "connecting") { return ; } - if (type == "success") { + if (this.type == "success") { return ; } - if (type.indexOf("error") >= 0 || type == "re-input-password") { + if (this.type.indexOf("error") >= 0 || this.type == "re-input-password") { return ; } return ; } function getInputPasswordContent() { - var ts = remember ? { checked: true } : {}; + var ts = this.remember ? { checked: true } : {}; return
-
{my_translate('Please enter your password')}
+
{translate('Please enter your password')}
-
{my_translate('Remember password')}
+
{translate('Remember password')}
; } function getContent() { - if (type == "input-password") { + if (this.type == "input-password") { return this.getInputPasswordContent(); } - return text; + return this.content; } function getColor() { - if (type == "input-password") { + if (this.type == "input-password") { return "#AD448E"; } - if (type == "success") { + if (this.type == "success") { return "#32bea6"; } - if (type.indexOf("error") >= 0 || type == "re-input-password") { + if (this.type.indexOf("error") >= 0 || this.type == "re-input-password") { return "#e04f5f"; } return "#2C8CFF"; } function hasSkip() { - return type.indexOf("skip") >= 0; + return this.type.indexOf("skip") >= 0; } function render() { + this.set_outline_focus(); var color = this.getColor(); var icon = this.getIcon(color); var content = this.getContent(); - var hasCancel = type.indexOf("error") < 0 && type != "success" && type.indexOf("nocancel") < 0; - var hasOk = type != "connecting" && type.indexOf("nook") < 0; - var hasClose = type.indexOf("hasclose") >= 0; - var show_progress = type == "connecting"; - self.style.set { border: color + " solid 1px" }; + var hasCancel = this.type.indexOf("error") < 0 && this.type != "success" && this.type.indexOf("nocancel") < 0; + var hasOk = this.type != "connecting" && this.type.indexOf("nook") < 0; + var hasClose = this.type.indexOf("hasclose") >= 0; + var show_progress = this.type == "connecting"; var me = this; self.timer(1ms, function() { if (typeof content == "string") - me.$(#content).html = my_translate(content); + me.$(#content).html = translate(content); else me.$(#content).content(content); }); - return ( -
-
- {my_translate(title)} -
+ return (
+
+
+
+ {translate(this.title)} +
- {icon &&
{icon}
} -
+ {icon &&
{icon}
} +
- {hasCancel || hasRetry ? : ""} - {this.hasSkip() ? : ""} - {hasOk || hasRetry ? : ""} - {hasClose ? : ""} + {hasCancel || this.hasRetry ? : ""} + {this.hasSkip() ? : ""} + {hasOk || this.hasRetry ? : ""} + {hasClose ? : ""}
-
); +
+
); } event click $(.custom-event) (_, me) { - if (callback) callback(me); + if (this.callback) this.callback(me); } function submit() { - if ($(button#submit)) { - $(button#submit).sendEvent("click"); + if (this.$(button#submit)) { + this.$(button#submit).sendEvent("click"); } } function cancel() { - if ($(button#cancel)) { - $(button#cancel).sendEvent("click"); + if (this.$(button#cancel)) { + this.$(button#cancel).sendEvent("click"); } } event click $(button#cancel) { - view.close(); - if (callback) callback(null); + this.close(); + if (this.callback) this.callback(null); } event click $(button#skip) { var values = this.getValues(); values.skip = true; - view.close(values); - if (callback) callback(values); + if (this.callback) this.callback(values); } event click $(button#submit) { - if (type == "error") { - if (hasRetry) { - view.close({ reconnect: true }); - } else { - view.close(); - if (callback) callback(null); + if (this.type == "error") { + if (this.hasRetry) { + retryConnect(true); + return; } - return; } - if (type == "re-input-password") { - type = "input-password"; + if (this.type == "re-input-password") { + this.type = "input-password"; body.update(); - set_outline_focus(); return; } var values = this.getValues(); - if (callback) { - var err = callback(values, this.show_progress); - if (err && !err.trim()) { - return; - } - if (err) { - this.show_progress(false, err); + if (this.callback) { + var err = (this.callback(values, this.show_progress) || '').trim(); + if (!err) { + this.close(); return; } + if (err) this.show_progress(false, err); + } else { + this.close(); } - view.close(values); } event keydown (evt) { @@ -200,27 +183,27 @@ class Body: Reactor.Component { function show_progress(show=1, err="") { if (show == -1) { - view.close() + this.close() return; } - $(#progress).style.set { + this.$(#progress).style.set { display: show ? "inline-block" : "none" }; - $(#error).text = err; + this.$(#error).text = err; } function getValues() { - var values = { type: type }; - for (var el in $$(.form input)) { + var values = { type: this.type }; + for (var el in this.$$(.form input)) { values[el.attributes["name"]] = el.value; } - for (var el in $$(.form textarea)) { + for (var el in this.$$(.form textarea)) { values[el.attributes["name"]] = el.value; } - for (var el in $$(.form button)) { + for (var el in this.$$(.form button)) { values[el.attributes["name"]] = el.value; } - if (type == "input-password") { + if (this.type == "input-password") { values.password = (values.password || "").trim(); if (!values.password) { return; @@ -228,37 +211,23 @@ class Body: Reactor.Component { } return values; } -} - -$(body).content(); - -function set_outline_focus() { - self.timer(30ms, function() { - var el = $(.outline-focus); - if (el) view.focus = el; - else { - el = $(#submit); + + function set_outline_focus() { + var me = this; + self.timer(30ms, function() { + var el = me.$(.outline-focus); if (el) view.focus = el; - } - }); + else { + el = me.$(#submit); + if (el) { + view.focus = el; + stdout.println(el); + } + } + }); + } + + function close() { + closeMsgbox(); + } } - -set_outline_focus(); - -function checkParams() { - self.timer(30ms, function() { - var tmp = getParams(); - if (!tmp || !tmp.type) { - view.close("!alive"); - return; - } else if (tmp != params) { - params = tmp; - updateParams(params); - body.update(); - set_outline_focus(); - } - checkParams(); - }); -} - -checkParams(); diff --git a/src/ui/remote.html b/src/ui/remote.html index 810b63515..32c1409e2 100644 --- a/src/ui/remote.html +++ b/src/ui/remote.html @@ -8,6 +8,7 @@