new msgbox

This commit is contained in:
rustdesk 2022-02-01 02:38:52 +08:00
parent bc3d3bd0ec
commit cd62d7024b
9 changed files with 220 additions and 282 deletions

View File

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

View File

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

View File

@ -174,7 +174,7 @@ class ChatBox: Reactor.Component {
self.timer(1ms, function() {
scrollToBottom(me.msgs);
});
return <div .msgbox>
return <div .chatbox>
<htmlarea spellcheck="false" readonly .msgs @{this.msgs} >
{msgs}
</htmlarea>
@ -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(<MsgboxComponent width={width} height={height} type={type} title={title} content={content} remember={remember} callback={callback} contentStyle={contentStyle} hasRetry={hasRetry} />);
}
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()

View File

@ -7,6 +7,7 @@
</style>
<script type="text/tiscript">
include "common.tis";
include "msgbox.tis";
include "ab.tis";
include "index.tis";
</script>

View File

@ -326,6 +326,7 @@ class App: Reactor.Component
</div>
<ConnectStatus @{this.connect_status} />
</div>
<div #msgbox />
</div>;
}
@ -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) ||

View File

@ -1,69 +0,0 @@
<html window-frame="extended">
<head>
<style>
@import url(common.css);
html {
background-color: white;
}
body {
border: none;
color: black;
}
svg {
size: 80px;
background: white;
}
.form {
border-spacing: 0.5em;
}
caption {
@ELLIPSIS;
size: *;
text-align: center;
color: white;
padding-top: 0.33em;
font-weight: bold;
}
.form .text {
@ELLIPSIS;
}
button.button {
margin-left: 1.6em;
}
div.password {
position: relative;
}
div.password svg {
position: absolute;
right: 0.25em;
top: 0.25em;
padding: 0.5em;
color: color(text);
}
div.set-password > div {
flow: horizontal;
}
div.set-password > div > span {
width: 30%;
line-height: 2em;
}
div.set-password div.password {
width: *;
}
div.set-password input {
font-size: 1em;
}
#error {
color: red;
}
body div.ellipsis {
@ELLIPSIS;
}
</style>
<script type="text/tiscript">
include "common.tis";
include "msgbox.tis";
</script>
</head>
<body></body>
</html>

View File

@ -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(<span />);
}
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 <svg viewBox="0 0 505 505"><circle cx="252.5" cy="252.5" r="252.5" fill={color}/><path d="M271.9 246.1c29.2 17.5 67.6 13.6 92.7-11.5 29.7-29.7 29.7-77.8 0-107.4s-77.8-29.7-107.4 0c-25.1 25.1-29 63.5-11.5 92.7L118.1 347.4l26.2 26.2 26.4 26.4 10.6-10.6-10.1-10.1 9.7-9.7 10.1 10.1 10.6-10.6-10.1-10 9.7-9.7 10.1 10.1 10.6-10.6-26.4-26.3 76.4-76.5z" fill="#fff"/><circle cx="337.4" cy="154.4" r="17.7" fill={color}/></svg>;
}
if (type == "connecting") {
if (this.type == "connecting") {
return <svg viewBox="0 0 300 300"><g fill={color}><path d="m221.76 89.414h-143.51c-1.432 0-2.594 1.162-2.594 2.594v95.963c0 1.432 1.162 2.594 2.594 2.594h143.51c1.432 0 2.594-1.162 2.594-2.594v-95.964c0-1.431-1.162-2.593-2.594-2.593z"/><path d="m150 0c-82.839 0-150 67.161-150 150s67.156 150 150 150 150-67.163 150-150-67.164-150-150-150zm92.508 187.97c0 11.458-9.29 20.749-20.749 20.749h-47.144v11.588h23.801c4.298 0 7.781 3.483 7.781 7.781s-3.483 7.781-7.781 7.781h-96.826c-4.298 0-7.781-3.483-7.781-7.781s3.483-7.781 7.781-7.781h23.801v-11.588h-47.145c-11.458 0-20.749-9.29-20.749-20.749v-95.963c0-11.458 9.29-20.749 20.749-20.749h143.51c11.458 0 20.749 9.29 20.749 20.749v95.963z"/></g><path d="m169.62 154.35c-5.0276-5.0336-11.97-8.1508-19.624-8.1508-7.6551 0-14.597 3.1172-19.624 8.1508l-11.077-11.091c7.8656-7.8752 18.725-12.754 30.701-12.754s22.835 4.8788 30.701 12.754l-11.077 11.091zm-32.184 7.0728 12.56 12.576 12.56-12.576c-3.2147-3.2172-7.6555-5.208-12.56-5.208-4.9054 0-9.3457 1.9908-12.56 5.208zm12.56-39.731c14.403 0 27.464 5.8656 36.923 15.338l11.078-11.091c-12.298-12.314-29.276-19.94-48-19.94-18.724 0-35.703 7.626-48 19.94l11.077 11.091c9.4592-9.4728 22.52-15.338 36.923-15.338z" fill="#fff"/></svg>;
}
if (type == "success") {
if (this.type == "success") {
return <svg viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill={color} /><path fill="#fff" d="M235.472 392.08l-121.04-94.296 34.416-44.168 74.328 57.904 122.672-177.016 46.032 31.888z"/></svg>;
}
if (type.indexOf("error") >= 0 || type == "re-input-password") {
if (this.type.indexOf("error") >= 0 || this.type == "re-input-password") {
return <svg viewBox="0 0 512 512"><ellipse cx="256" cy="256" rx="256" ry="255.832" fill={color}/><g fill="#fff"><path d="M376.812 337.18l-39.592 39.593-201.998-201.999 39.592-39.592z"/><path d="M376.818 174.825L174.819 376.824l-39.592-39.592 201.999-201.999z"/></g></svg>;
}
return <span />;
}
function getInputPasswordContent() {
var ts = remember ? { checked: true } : {};
var ts = this.remember ? { checked: true } : {};
return <div .form>
<div>{my_translate('Please enter your password')}</div>
<div>{translate('Please enter your password')}</div>
<PasswordComponent />
<div><button|checkbox(remember) {ts}>{my_translate('Remember password')}</button></div>
<div><button|checkbox(remember) {ts}>{translate('Remember password')}</button></div>
</div>;
}
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 (
<div style="size: *">
<header style={"height: 2em; background: " + color}>
<caption role="window-caption">{my_translate(title)}</caption>
</header>
return (<div><div style="position: absolute; size:*; background:black; opacity:0.5;" />
<div style="size: *; position: absolute;">
<div style={"border: " + color + " solid 1px; background: white; margin: *; width:" + (this.width) + "px; height:" + (this.height) + "px"}>
<div .caption style={"background: " + color}>
{translate(this.title)}
</div>
<div style="padding: 1em 2em; size: *;">
<div style="height: *; flow: horizontal">
{icon && <div style="height: *; margin: * 0; padding-right: 2em;">{icon}</div>}
<div style={contentStyle || "size: *; margin: * 0;"} #content />
{icon && <div style="height: *; margin: * 0; padding-right: 2em;" .msgbox-icon>{icon}</div>}
<div style={this.contentStyle || "size: *; margin: * 0;"} #content />
</div>
<div style="text-align: right;">
<span style="display:inline-block; max-width: 250px; font-size:12px;" #error />
<progress #progress style={"color:" + color + "; display: " + (show_progress ? "inline-block" : "none")} />
{hasCancel || hasRetry ? <button .button #cancel .outline>{my_translate(hasRetry ? "OK" : "Cancel")}</button> : ""}
{this.hasSkip() ? <button .button #skip .outline>{my_translate('Skip')}</button> : ""}
{hasOk || hasRetry ? <button .button #submit>{my_translate(hasRetry ? "Retry" : "OK")}</button> : ""}
{hasClose ? <button .button #cancel .outline>{my_translate('Close')}</button> : ""}
{hasCancel || this.hasRetry ? <button .button #cancel .outline>{translate(this.hasRetry ? "OK" : "Cancel")}</button> : ""}
{this.hasSkip() ? <button .button #skip .outline>{translate('Skip')}</button> : ""}
{hasOk || this.hasRetry ? <button .button #submit>{translate(this.hasRetry ? "Retry" : "OK")}</button> : ""}
{hasClose ? <button .button #cancel .outline>{translate('Close')}</button> : ""}
</div>
</div>
</div>);
</div>
</div></div>);
}
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(<Body />);
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();

View File

@ -8,6 +8,7 @@
</style>
<script type="text/tiscript">
include "common.tis";
include "msgbox.tis";
include "remote.tis";
include "file_transfer.tis";
include "port_forward.tis";
@ -31,5 +32,6 @@
</div>
<div #file-transfer-wrapper>
</div>
<div #msgbox />
</body>
</html>

View File

@ -165,7 +165,6 @@ impl sciter::EventHandler for Handler {
fn tunnel();
fn lock_screen();
fn reconnect();
fn get_msgbox();
fn get_chatbox();
fn get_icon();
fn get_home_dir();
@ -562,10 +561,6 @@ impl Handler {
self.write().unwrap().close_state.insert(k, v);
}
fn get_msgbox(&mut self) -> String {
super::get_msgbox()
}
fn get_chatbox(&mut self) -> String {
#[cfg(feature = "inline")]
return super::inline::get_chatbox();