hongshaorou/rustdesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

without test! pre-change to js

Browse Source
This commit is contained in:
csf 2022-01-02 15:35:36 +08:00 committed by open-trade
parent d68edb9e1a
commit b41658138a
3 changed files with 217 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/ui/cm.css
View File

@ -4,11 +4,11 @@ body {
div.content { div.content {
flow: horizontal; flow: horizontal;
size: *; size: "*";
} }
div.left-panel { div.left-panel {
size: *; size: "*";
padding: 1em; padding: 1em;
border-spacing: 1em; border-spacing: 1em;
overflow-x: scroll-indicator; overflow-x: scroll-indicator;
@ -38,7 +38,7 @@ div.chaticon:active {
div.right-panel { div.right-panel {
background: white; background: white;
border-left: color(border) 1px solid; border-left: color(border) 1px solid;
size: *; size: "*";
} }
div.icon-and-id { div.icon-and-id {
@ -71,7 +71,7 @@ div.permissions > div {
} }
div.permissions icon { div.permissions icon {
margin: *; margin: "*";
size: 32px; size: 32px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -99,7 +99,7 @@ icon.audio {
} }
div.buttons { div.buttons {
width: *; width: "*";
border-spacing: 0.5em; border-spacing: 0.5em;
text-align: center; text-align: center;
} }
@ -120,14 +120,14 @@ button#disconnect:active {
opacity: 0.5; opacity: 0.5;
} }
@media platform != "OSX" { @media not_osx {
header .window-toolbar { header .window-toolbar {
left: 40px; left: 40px;
top: 8px; top: 8px;
} }
} }
@media platform == "OSX" { @media is_osx {
header .tabs-wrapper { header .tabs-wrapper {
margin-left: 80px; margin-left: 80px;
margin-top: 8px; margin-top: 8px;
@ -135,13 +135,13 @@ header .tabs-wrapper {
} }
div.tabs-wrapper { div.tabs-wrapper {
size: *; size: "*";
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
div.tabs { div.tabs {
size: *; size: "*";
flow: horizontal; flow: horizontal;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -156,7 +156,7 @@ div.border-bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: *; width: "*";
height: 1px; height: 1px;
background: color(border) 1px solid; background: color(border) 1px solid;
} }
@ -213,7 +213,7 @@ div.tab-arrows {
div.tab-arrows span { div.tab-arrows span {
display: inline-block; display: inline-block;
height: *; height: "*";
margin: 0; margin: 0;
padding: 6px 2px; padding: 6px 2px;
} }

19
src/ui/cm.html
View File

@ -1,20 +1,15 @@
<html> <html>
<head> <head>
<style> </style><link rel="stylesheet" href="common.css">
@import url(common.css); </style><link rel="stylesheet" href="cm.css">
@import url(cm.css); <script type="module" src="cm.js"></script>
</style>
<script type="text/tiscript">
include "common.tis";
include "cm.tis";
</script>
</head> </head>
<header> <header>
<div.window-icon role="window-icon"><icon /></div> <div class="window-icon" role="window-icon"><icon /></div>
<caption role="window-caption" /> <caption role="window-caption" />
<div.border-bottom /> <div class="border-bottom" />
<div.window-toolbar /> <div class="window-toolbar" />
<div.window-buttons /> <div class="window-buttons" />
</header> </header>
<body #handler> <body #handler>
</body> </body>

400
src/ui/common.js
View File

@ -1,211 +1,211 @@
include "sciter:reactor.tis"; const view = Window.this;
export const handler = document.$("#handler") || view;
var handler = $(#handler) || view; try { view.windowIcon = document.url(handler.xcall("get_icon")); } catch (e) { }
try { view.windowIcon = self.url(handler.get_icon()); } catch(e) {}
var OS = view.mediaVar("platform"); const OS = view.mediaVar("platform");
var is_osx = OS == "OSX"; const is_osx = OS == "OSX";
var is_win = OS == "Windows"; const is_win = OS == "Windows";
var is_linux = OS == "Linux"; const is_linux = OS == "Linux";
view.mediaVar("is_osx", is_osx);
view.mediaVar("not_osx", !is_osx);
var is_file_transfer; var is_file_transfer;
var is_xfce = false; var is_xfce = false;
try { is_xfce = handler.is_xfce(); } catch(e) {} try { is_xfce = handler.xcall("is_xfce"); } catch (e) { }
function translate(name) { export function translate(name) {
try { try {
return handler.t(name); return handler.xcall("t", name);
} catch(_) { } catch (_) {
return name; return name;
} }
} }
function hashCode(str) { export function hashCode(str) {
var hash = 160 << 16 + 114 << 8 + 91; let hash = 160 << 16 + 114 << 8 + 91;
for (var i = 0; i < str.length; i += 1) { for (let i = 0; i < str.length; i += 1) {
hash = str.charCodeAt(i) + ((hash << 5) - hash); hash = str.charCodeAt(i) + ((hash << 5) - hash);
} }
return hash % 16777216; return hash % 16777216;
} }
function intToRGB(i, a = 1) { export function intToRGB(i, a = 1) {
return 'rgba(' + ((i >> 16) & 0xFF) + ', ' + ((i >> 8) & 0x7F) return `rgba(${((i >> 16) & 0xFF)}, ${((i >> 8) & 0x7F)},${(i & 0xFF)},${a})`;
+ ',' + (i & 0xFF) + ',' + a + ')';
} }
function string2RGB(s, a = 1) { export function string2RGB(s, a = 1) {
return intToRGB(hashCode(s), a); return intToRGB(hashCode(s), a);
} }
function getTime() { export function getTime() {
var now = new Date(); return new Date().valueOf();
return now.valueOf();
} }
function platformSvg(platform, color) { export function platformSvg(platform, color) {
platform = (platform || "").toLowerCase(); platform = (platform || "").toLowerCase();
if (platform == "linux") { if (platform == "linux") {
return <svg viewBox="0 0 256 256"> return (<svg viewBox="0 0 256 256">
<g transform="translate(0 256) scale(.1 -.1)" fill={color}> <g transform="translate(0 256) scale(.1 -.1)" fill={color}>
<path d="m1215 2537c-140-37-242-135-286-278-23-75-23-131 1-383l18-200-54-60c-203-224-383-615-384-831v-51l-66-43c-113-75-194-199-194-300 0-110 99-234 244-305 103-50 185-69 296-69 100 0 156 14 211 54 26 18 35 19 78 10 86-18 233-24 335-12 85 10 222 38 269 56 9 4 19-7 29-35 20-50 52-64 136-57 98 8 180 52 282 156 124 125 180 244 180 380 0 80-28 142-79 179l-36 26 4 119c5 175-22 292-105 460-74 149-142 246-286 409-43 49-78 92-78 97 0 4-7 52-15 107-8 54-19 140-24 189-13 121-41 192-103 260-95 104-248 154-373 122zm172-112c62-19 134-80 163-140 15-31 28-92 41-193 27-214 38-276 57-304 9-14 59-74 111-134 92-106 191-246 236-334 69-137 115-339 101-451l-7-55-71 10c-100 13-234-5-265-36-54-55-85-207-82-412l1-141-51-17c-104-34-245-51-380-45-69 3-142 10-162 16-32 10-37 17-53 68-23 72-87 201-136 273-80 117-158 188-237 215-37 13-37 13-34 61 13 211 182 555 373 759 57 62 58 63 58 121 0 33-9 149-19 259-21 224-18 266 26 347 67 122 193 174 330 133zm687-1720c32-9 71-25 87-36 60-42 59-151-4-274-59-119-221-250-317-257-34-3-35-2-48 47-18 65-20 329-3 413 16 83 29 110 55 115 51 10 177 6 230-8zm-1418-80c79-46 187-195 247-340 41-99 43-121 12-141-39-25-148-30-238-10-142 32-264 112-307 202-20 41-21 50-10 87 24 83 102 166 192 207 54 25 53 25 104-5z"/> <path d="m1215 2537c-140-37-242-135-286-278-23-75-23-131 1-383l18-200-54-60c-203-224-383-615-384-831v-51l-66-43c-113-75-194-199-194-300 0-110 99-234 244-305 103-50 185-69 296-69 100 0 156 14 211 54 26 18 35 19 78 10 86-18 233-24 335-12 85 10 222 38 269 56 9 4 19-7 29-35 20-50 52-64 136-57 98 8 180 52 282 156 124 125 180 244 180 380 0 80-28 142-79 179l-36 26 4 119c5 175-22 292-105 460-74 149-142 246-286 409-43 49-78 92-78 97 0 4-7 52-15 107-8 54-19 140-24 189-13 121-41 192-103 260-95 104-248 154-373 122zm172-112c62-19 134-80 163-140 15-31 28-92 41-193 27-214 38-276 57-304 9-14 59-74 111-134 92-106 191-246 236-334 69-137 115-339 101-451l-7-55-71 10c-100 13-234-5-265-36-54-55-85-207-82-412l1-141-51-17c-104-34-245-51-380-45-69 3-142 10-162 16-32 10-37 17-53 68-23 72-87 201-136 273-80 117-158 188-237 215-37 13-37 13-34 61 13 211 182 555 373 759 57 62 58 63 58 121 0 33-9 149-19 259-21 224-18 266 26 347 67 122 193 174 330 133zm687-1720c32-9 71-25 87-36 60-42 59-151-4-274-59-119-221-250-317-257-34-3-35-2-48 47-18 65-20 329-3 413 16 83 29 110 55 115 51 10 177 6 230-8zm-1418-80c79-46 187-195 247-340 41-99 43-121 12-141-39-25-148-30-238-10-142 32-264 112-307 202-20 41-21 50-10 87 24 83 102 166 192 207 54 25 53 25 104-5z" />
<path d="m1395 1945c-92-16-220-52-256-70-28-15-29-18-29-89 0-247 165-397 345-312 60 28 77 46 106 111 54 123 0 378-80 374-9 0-47-7-86-14zm74-156c15-69 14-112-5-159s-55-70-111-70c-48 0-78 20-102 68-15 29-41 131-41 159 0 9 230 63 242 57 3-2 11-27 17-55z"/> <path d="m1395 1945c-92-16-220-52-256-70-28-15-29-18-29-89 0-247 165-397 345-312 60 28 77 46 106 111 54 123 0 378-80 374-9 0-47-7-86-14zm74-156c15-69 14-112-5-159s-55-70-111-70c-48 0-78 20-102 68-15 29-41 131-41 159 0 9 230 63 242 57 3-2 11-27 17-55z" />
</g> </g>
</svg>; </svg>);
} }
if (platform == "mac os") { if (platform == "mac os") {
return <svg viewBox="0 0 384 512"> return (<svg viewBox="0 0 384 512">
<path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" fill={color}/> <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" fill={color} />
</svg>; </svg>);
} }
return <svg viewBox="0 0 448 512"> return (<svg viewBox="0 0 448 512">
<path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" fill={color}/> <path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" fill={color} />
</svg>; </svg>);
} }
function centerize(w, h) { export function centerize(w, h) {
var (sx, sy, sw, sh) = view.screenBox(#workarea, #rectw); let [sx, sy, sw, sh] = view.screenBox("workarea", "rectw");
if (w > sw) w = sw; if (w > sw) w = sw;
if (h > sh) h = sh; if (h > sh) h = sh;
var x = (sx + sw - w) / 2; const x = (sx + sw - w) / 2;
var y = (sy + sh - h) / 2; const y = (sy + sh - h) / 2;
view.move(x, y, w, h); view.move(x, y, w, h);
} }
function setWindowButontsAndIcon(only_min=false) { // TODO CSS
export function setWindowButontsAndIcon(only_min = false) {
if (only_min) { if (only_min) {
$(div.window-buttons).content(<div> document.$("div.window-buttons").content(
<button.window tabindex="-1" role="window-minimize" #minimize><div /></button> <div>
</div>); <button class="window minimize" id="button-window" tabindex="-1" role="window-minimize" ><div /></button>
</div>
);
} else { } else {
$(div.window-buttons).content(<div> document.$("div.window-buttons").content(<div>
<button.window tabindex="-1" role="window-minimize" #minimize><div /></button> <button class="window minimize" tabindex="-1" role="window-minimize" ><div /></button>
<button.window tabindex="-1" role="window-maximize" #maximize><div /></button> <button class="window maximize" tabindex="-1" role="window-maximize" ><div /></button>
<button.window tabindex="-1" role="window-close" #close><div /></button> <button class="window close" tabindex="-1" role="window-close" ><div /></button>
</div>); </div>);
} }
$(div.window-icon>icon).style.set { document.$("div.window-icon>icon").style.setProperty(
"background-image": "url('" + handler.get_icon() + "')", "background-image", `url(${handler.xcall("get_icon")})`,
}; );
} }
function adjustBorder() { export function adjustBorder() {
if (is_osx) { if (is_osx) {
if (view.windowState == View.WINDOW_FULL_SCREEN) { let headerStyle = document.$("header").style;
$(header).style.set { if (view.state == Window.WINDOW_FULL_SCREEN) {
display: "none", headerStyle.setProperty("display", "none",);
};
} else { } else {
$(header).style.set { headerStyle.setProperty("display", "block",);
display: "block", headerStyle.setProperty("padding", "0",);
padding: "0",
};
} }
return; return;
} }
if (view.windowState == view.WINDOW_MAXIMIZED) { if (view.state == Window.WINDOW_MAXIMIZED) {
self.style.set { document.style.setProperty("border", "window-frame-width solid transparent");
border: "window-frame-width solid transparent", } else if (view.state == Window.WINDOW_FULL_SCREEN) {
}; document.style.setProperty("border", "none");
} else if (view.windowState == view.WINDOW_FULL_SCREEN) {
self.style.set {
border: "none",
};
} else { } else {
self.style.set { document.style.setProperty("border", "black solid 1px");
border: "black solid 1px",
};
} }
var el = $(button#maximize); let el = document.$("button#maximize");
if (el) el.attributes.toggleClass("restore", view.windowState == View.WINDOW_MAXIMIZED); if (el) el.classList.toggle("restore", view.state == Window.WINDOW_MAXIMIZED);
el = $(span#fullscreen); el = document.$("span#fullscreen");
if (el) el.attributes.toggleClass("active", view.windowState == View.WINDOW_FULL_SCREEN); if (el) el.classList.toggle("active", view.state == Window.WINDOW_FULL_SCREEN);
} }
var svg_checkmark = <svg viewBox="0 0 492 492"><path d="M484 105l-16-17a27 27 0 00-38 0L204 315 62 173c-5-5-12-7-19-7s-14 2-19 7L8 189a27 27 0 000 38l160 160v1l16 16c5 5 12 8 19 8 8 0 14-3 20-8l16-16v-1l245-244a27 27 0 000-38z"/></svg>; export const svg_checkmark = (<svg viewBox="0 0 492 492"><path d="M484 105l-16-17a27 27 0 00-38 0L204 315 62 173c-5-5-12-7-19-7s-14 2-19 7L8 189a27 27 0 000 38l160 160v1l16 16c5 5 12 8 19 8 8 0 14-3 20-8l16-16v-1l245-244a27 27 0 000-38z" /></svg>);
var svg_edit = <svg #edit viewBox="0 0 384 384"> export const svg_edit = (<svg id="edit" viewBox="0 0 384 384">
<path d="M0 304v80h80l236-236-80-80zM378 56L328 6c-8-8-22-8-30 0l-39 39 80 80 39-39c8-8 8-22 0-30z"/> <path d="M0 304v80h80l236-236-80-80zM378 56L328 6c-8-8-22-8-30 0l-39 39 80 80 39-39c8-8 8-22 0-30z" />
</svg>; </svg>);
var svg_eye = <svg viewBox="0 0 469.33 469.33"> export const svg_eye = (<svg viewBox="0 0 469.33 469.33">
<path d="m234.67 170.67c-35.307 0-64 28.693-64 64s28.693 64 64 64 64-28.693 64-64-28.694-64-64-64z"/> <path d="m234.67 170.67c-35.307 0-64 28.693-64 64s28.693 64 64 64 64-28.693 64-64-28.694-64-64-64z" />
<path d="m234.67 74.667c-106.67 0-197.76 66.346-234.67 160 36.907 93.653 128 160 234.67 160 106.77 0 197.76-66.347 234.67-160-36.907-93.654-127.89-160-234.67-160zm0 266.67c-58.88 0-106.67-47.787-106.67-106.67s47.787-106.67 106.67-106.67 106.67 47.787 106.67 106.67-47.787 106.67-106.67 106.67z"/> <path d="m234.67 74.667c-106.67 0-197.76 66.346-234.67 160 36.907 93.653 128 160 234.67 160 106.77 0 197.76-66.347 234.67-160-36.907-93.654-127.89-160-234.67-160zm0 266.67c-58.88 0-106.67-47.787-106.67-106.67s47.787-106.67 106.67-106.67 106.67 47.787 106.67 106.67-47.787 106.67-106.67 106.67z" />
</svg>; </svg>);
var svg_send = <svg viewBox="0 0 448 448"> export const svg_send = (<svg viewBox="0 0 448 448">
<polygon points="0.213 32 0 181.33 320 224 0 266.67 0.213 416 448 224"/> <polygon points="0.213 32 0 181.33 320 224 0 266.67 0.213 416 448 224" />
</svg>; </svg>);
var svg_chat = <svg viewBox="0 0 511.07 511.07"> export const svg_chat = (<svg viewBox="0 0 511.07 511.07">
<path d="m74.39 480.54h-36.213l25.607-25.607c13.807-13.807 22.429-31.765 24.747-51.246-36.029-23.644-62.375-54.751-76.478-90.425-14.093-35.647-15.864-74.888-5.121-113.48 12.89-46.309 43.123-88.518 85.128-118.85 45.646-32.963 102.47-50.387 164.33-50.387 77.927 0 143.61 22.389 189.95 64.745 41.744 38.159 64.734 89.63 64.734 144.93 0 26.868-5.471 53.011-16.26 77.703-11.165 25.551-27.514 48.302-48.593 67.619-46.399 42.523-112.04 65-189.83 65-28.877 0-59.01-3.855-85.913-10.929-25.465 26.123-59.972 40.929-96.086 40.929zm182-420c-124.04 0-200.15 73.973-220.56 147.28-19.284 69.28 9.143 134.74 76.043 175.12l7.475 4.511-0.23 8.727c-0.456 17.274-4.574 33.912-11.945 48.952 17.949-6.073 34.236-17.083 46.99-32.151l6.342-7.493 9.405 2.813c26.393 7.894 57.104 12.241 86.477 12.241 154.37 0 224.68-93.473 224.68-180.32 0-46.776-19.524-90.384-54.976-122.79-40.713-37.216-99.397-56.888-169.71-56.888z"/> <path d="m74.39 480.54h-36.213l25.607-25.607c13.807-13.807 22.429-31.765 24.747-51.246-36.029-23.644-62.375-54.751-76.478-90.425-14.093-35.647-15.864-74.888-5.121-113.48 12.89-46.309 43.123-88.518 85.128-118.85 45.646-32.963 102.47-50.387 164.33-50.387 77.927 0 143.61 22.389 189.95 64.745 41.744 38.159 64.734 89.63 64.734 144.93 0 26.868-5.471 53.011-16.26 77.703-11.165 25.551-27.514 48.302-48.593 67.619-46.399 42.523-112.04 65-189.83 65-28.877 0-59.01-3.855-85.913-10.929-25.465 26.123-59.972 40.929-96.086 40.929zm182-420c-124.04 0-200.15 73.973-220.56 147.28-19.284 69.28 9.143 134.74 76.043 175.12l7.475 4.511-0.23 8.727c-0.456 17.274-4.574 33.912-11.945 48.952 17.949-6.073 34.236-17.083 46.99-32.151l6.342-7.493 9.405 2.813c26.393 7.894 57.104 12.241 86.477 12.241 154.37 0 224.68-93.473 224.68-180.32 0-46.776-19.524-90.384-54.976-122.79-40.713-37.216-99.397-56.888-169.71-56.888z" />
</svg>; </svg>);
function scrollToBottom(el) { export function scrollToBottom(el) {
var y = el.box(#height, #content) - el.box(#height, #client); // TODO .box()
let y = el.box(#height, #content) - el.box(#height, #client);
el.scrollTo(0, y); el.scrollTo(0, y);
} }
function getNowStr() { export function getNowStr() {
var now = new Date(); let now = new Date();
return String.printf("%02d:%02d:%02d", now.hour, now.minute, now.second); return String.printf("%02d:%02d:%02d", now.hour, now.minute, now.second);
} }
/******************** start of chatbox ****************************************/ /******************** start of chatbox ****************************************/
class ChatBox: Reactor.Component { export class ChatBox extends Element {
this var msgs = []; msgs = [];
this var callback; callback;
function this(params) {
if (params) {
this.msgs = params.msgs || [];
this.callback = params.callback;
}
}
function renderMsg(msg) { constructor(props) {
var cls = msg.name == "me" ? "right-side msg" : "left-side msg"; if (props) {
return <div class={cls}> this.msgs = props.msgs || [];
{msg.name == "me" ? this.callback = props.callback;
<div .name>{msg.time + " "} me</div> :
<div .name>{msg.name} {" " + msg.time}</div>
} }
<div .text>{msg.text}</div> }
</div>;
}
function render() { renderMsg(msg) {
var me = this; let cls = msg.name == "me" ? "right-side msg" : "left-side msg";
var msgs = this.msgs.map(function(msg) { return me.renderMsg(msg); }); return (
self.timer(1ms, function() { <div class={cls}>
scrollToBottom(me.msgs); {msg.name == "me" ?
}); <div class="time">{msg.time + " "} me</div> :
return <div .msgbox> <div class="name">{msg.name} {" " + msg.time}</div>
<htmlarea spellcheck="false" readonly .msgs @{this.msgs} > }
{msgs} <div class="text">{msg.text}</div>
</htmlarea> </div>
<div .send> );
<input|text .outline-focus /> }
<span>{svg_send}</span>
</div>
</div>;
}
function send() { render() {
var el = this.$(input); let msgs = this.msgs.map((msg) => this.renderMsg(msg));
var value = (el.value || "").trim(); setTimeout(() => {
el.value = ""; scrollToBottom(this.msgs);
if (!value) return; }, 1);
if (this.callback) this.callback(value); // TODO @{this.msgs} in TIS:<htmlarea spellcheck="false" readonly .msgs @{this.msgs} >
} return (<div class="msgbox">
<htmlarea spellcheck="false" readonly class="msg" >
{msgs}
</htmlarea>
<div class="send">
<input type="text" class="outline-focus" />
<span>{svg_send}</span>
</div>
</div >);
}
event keydown $(input) (evt) { send() {
if (!evt.shortcutKey) { let el = this.$("input");
if (evt.keyCode == Event.VK_ENTER || let value = (el.value || "").trim();
(view.mediaVar("platform") == "OSX" && evt.keyCode == 0x4C)) { el.value = "";
if (!value) return;
if (this.callback) this.callback(value);
}
["on keydown at input"](evt) {
// TODO is shortcutKey useless?
if (!evt.shortcutKey) {
// TODO TEST Windows/Mac
if (evt.code == "KeyRETURN") {
this.send(); this.send();
} }
}
} }
}
event click $(div.send span) { ["on click at div.send span"](evt) {
this.send(); this.send();
view.focus = $(input); view.focus = this.$("input");
} }
} }
/******************** end of chatbox ****************************************/ /******************** end of chatbox ****************************************/
@ -213,47 +213,44 @@ class ChatBox: Reactor.Component {
var remember_password = false; var remember_password = false;
var msgbox_params; var msgbox_params;
function getMsgboxParams() { function getMsgboxParams() {
return msgbox_params; return msgbox_params;
} }
// tmp workaround https://sciter.com/forums/topic/menu-not-be-hidden-when-open-dialog-on-linux/ // 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="") { function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") {
if (is_linux) { // fix menu not hidden issue if (is_linux) { // fix menu not hidden issue
self.timer(1ms, setTimeout(() => msgbox_(type, title, text, callback, height, width, retry, contentStyle), 1);
function() {
msgbox_(type, title, text, callback, height, width, retry, contentStyle);
});
} else { } else {
msgbox_(type, title, text, callback, height, width, retry, contentStyle); msgbox_(type, title, text, callback, height, width, retry, contentStyle);
} }
} }
function msgbox_(type, title, text, callback, height, width, retry, contentStyle) { function msgbox_(type, title, text, callback, height, width, retry, contentStyle) {
var has_msgbox = msgbox_params != null; let has_msgbox = msgbox_params != null;
if (!has_msgbox && !type) return; if (!has_msgbox && !type) return;
var remember = false; let remember = false;
try { try {
remember = handler.get_remember(); remember = handler.xcall("get_remember");
} catch(e) {} } catch (e) { }
msgbox_params = { msgbox_params = {
remember: remember, type: type, text: text, title: title, remember: remember, type: type, text: text, title: title,
getParams: getMsgboxParams, getParams: getMsgboxParams,
callback: callback, translate: translate, callback: callback, translate: translate,
retry: retry, contentStyle: contentStyle, retry: retry, contentStyle: contentStyle,
}; };
if (has_msgbox) return; if (has_msgbox) return;
var dialog = { let dialog = {
client: true, client: true,
parameters: msgbox_params, parameters: msgbox_params,
width: width + (is_xfce ? 50 : 0), width: width + (is_xfce ? 50 : 0),
height: height + (is_xfce ? 50 : 0), height: height + (is_xfce ? 50 : 0),
}; };
var html = handler.get_msgbox(); let html = handler.xcall("get_msgbox");
if (html) dialog.html = html; if (html) dialog.html = html;
else dialog.url = self.url("msgbox.html"); else dialog.url = document.url("msgbox.html");
var res = view.dialog(dialog); let res = view.modal(dialog);
msgbox_params = null; msgbox_params = null;
stdout.printf("msgbox return, type: %s, res: %s\n", type, res); console.log(`msgbox return, type: ${type}, res: ${res}`);
if (type.indexOf("custom") >= 0) { if (type.indexOf("custom") >= 0) {
// //
} else if (!res) { } else if (!res) {
@ -273,12 +270,12 @@ function connecting() {
handler.msgbox("connecting", "Connecting...", "Connection in progress. Please wait."); handler.msgbox("connecting", "Connecting...", "Connection in progress. Please wait.");
} }
handler.msgbox = function(type, title, text, retry=0) { handler.msgbox = function (type, title, text, retry = 0) {
self.timer(30ms, function() { msgbox(type, title, text, null, 180, 500, retry); }); setTimeout(() => msgbox(type, title, text, null, 180, 500, retry), 30);
} }
var reconnectTimeout = 1; var reconnectTimeout = 1;
handler.msgbox_retry = function(type, title, text, hasRetry) { handler.msgbox_retry = function (type, title, text, hasRetry) {
handler.msgbox(type, title, text, hasRetry ? reconnectTimeout : 0); handler.msgbox(type, title, text, hasRetry ? reconnectTimeout : 0);
if (hasRetry) { if (hasRetry) {
reconnectTimeout *= 2; reconnectTimeout *= 2;
@ -287,7 +284,7 @@ handler.msgbox_retry = function(type, title, text, hasRetry) {
} }
} }
/******************** end of msgbox ****************************************/ /******************** end of msgbox ****************************************/
// TODO Progress
function Progress() function Progress()
{ {
var _val; var _val;
@ -328,51 +325,52 @@ function Progress()
this.value = ""; this.value = "";
} }
var svg_eye_cross = <svg viewBox="0 -21 511.96 511"> const svg_eye_cross = (<svg viewBox="0 -21 511.96 511">
<path d="m506.68 261.88c7.043-16.984 7.043-36.461 0-53.461-41.621-100.4-140.03-165.27-250.71-165.27-46.484 0-90.797 11.453-129.64 32.191l-68.605-68.609c-8.3438-8.3398-21.824-8.3398-30.168 0-8.3398 8.3398-8.3398 21.824 0 30.164l271.49 271.49 86.484 86.488 68.676 68.672c4.1797 4.1797 9.6406 6.2695 15.102 6.2695 5.4609 0 10.922-2.0898 15.082-6.25 8.3438-8.3398 8.3438-21.824 0-30.164l-62.145-62.145c36.633-27.883 66.094-65.109 84.438-109.38zm-293.91-100.1c12.648-7.5742 27.391-11.969 43.199-11.969 47.062 0 85.332 38.273 85.332 85.336 0 15.805-4.3945 30.547-11.969 43.199z"/> <path d="m506.68 261.88c7.043-16.984 7.043-36.461 0-53.461-41.621-100.4-140.03-165.27-250.71-165.27-46.484 0-90.797 11.453-129.64 32.191l-68.605-68.609c-8.3438-8.3398-21.824-8.3398-30.168 0-8.3398 8.3398-8.3398 21.824 0 30.164l271.49 271.49 86.484 86.488 68.676 68.672c4.1797 4.1797 9.6406 6.2695 15.102 6.2695 5.4609 0 10.922-2.0898 15.082-6.25 8.3438-8.3398 8.3438-21.824 0-30.164l-62.145-62.145c36.633-27.883 66.094-65.109 84.438-109.38zm-293.91-100.1c12.648-7.5742 27.391-11.969 43.199-11.969 47.062 0 85.332 38.273 85.332 85.336 0 15.805-4.3945 30.547-11.969 43.199z" />
<path d="m255.97 320.48c-47.062 0-85.336-38.273-85.336-85.332 0-3.0938 0.59766-6.0195 0.91797-9.0039l-106.15-106.16c-25.344 24.707-46.059 54.465-60.117 88.43-7.043 16.98-7.043 36.457 0 53.461 41.598 100.39 140.01 165.27 250.69 165.27 34.496 0 67.797-6.3164 98.559-18.027l-89.559-89.559c-2.9844 0.32031-5.9062 0.91797-9 0.91797z"/> <path d="m255.97 320.48c-47.062 0-85.336-38.273-85.336-85.332 0-3.0938 0.59766-6.0195 0.91797-9.0039l-106.15-106.16c-25.344 24.707-46.059 54.465-60.117 88.43-7.043 16.98-7.043 36.457 0 53.461 41.598 100.39 140.01 165.27 250.69 165.27 34.496 0 67.797-6.3164 98.559-18.027l-89.559-89.559c-2.9844 0.32031-5.9062 0.91797-9 0.91797z" />
</svg>; </svg>);
class PasswordComponent: Reactor.Component { export class PasswordComponent extends Element {
this var visible = false; visible = false;
this var value = ''; value = '';
this var name = 'password'; name = 'password';
function this(params) { constructor(props) {
if (params && params.value) { if (props && props.value) {
this.value = params.value; this.value = props.value;
} }
if (params && params.name) { if (props && props.name) {
this.name = params.name; this.name = props.name;
} }
} }
function render() { render() {
return <div .password> return (
<input name={this.name} value={this.value} type={this.visible ? "text" : "password"} .outline-focus /> <div class="password">
{this.visible ? svg_eye_cross : svg_eye} <input class="outline-focus" name={this.name} value={this.value} type={this.visible ? "text" : "password"} />
</div>; {this.visible ? svg_eye_cross : svg_eye}
</div>);
} }
event click $(svg) { ["on click at svg"](svg) {
var el = this.$(input); let el = this.$("input");
var value = el.value; let value = el.value;
var start = el.xcall(#selectionStart) || 0; // TODO selectionStart/selectionEnd run ok,but always return 0
var end = el.xcall(#selectionEnd); let start = el.xcall("selectionStart") || 0;
this.update({ visible: !this.visible }); let end = el.xcall("selectionEnd");
var me = this; this.componentUpdate({ visible: !this.visible });
self.timer(30ms, function() { setTimeout(() => {
var el = me.$(input); let el = this.$("input");
view.focus = el; view.focus = el;
el.value = value; el.value = value;
el.xcall(#setSelection, start, end); el.xcall("setSelection", start, end);
}); }, 30)
} }
} }
function isReasonableSize(r) { export function isReasonableSize(r) {
var x = r[0]; let x = r[0];
var y = r[1]; let y = r[1];
return !(x < -3200 || x > 3200 || y < -3200 || y > 3200); return !(x < -3200 || x > 3200 || y < -3200 || y > 3200);
} }