From c018c7b4becbdde5a69a7c3048018abb7d35659b Mon Sep 17 00:00:00 2001 From: NI Date: Fri, 13 Dec 2019 14:35:23 +0800 Subject: [PATCH] Further improve the remote font intergation: Better preload strategy, better loading and UI interation. --- ui/commands/commands.js | 14 +++- ui/commands/controls.js | 5 +- ui/commands/ssh.js | 11 ++- ui/commands/telnet.js | 11 ++- ui/control/ssh.js | 8 +- ui/control/telnet.js | 8 +- ui/home.css | 10 --- ui/home.vue | 37 +++++++--- ui/widgets/connector.vue | 19 +++++ ui/widgets/screen_console.css | 41 +++++++++-- ui/widgets/screen_console.vue | 135 +++++++++++++++++++++++++--------- ui/widgets/screens.vue | 2 +- 12 files changed, 223 insertions(+), 78 deletions(-) diff --git a/ui/commands/commands.js b/ui/commands/commands.js index 482905f..700c82f 100644 --- a/ui/commands/commands.js +++ b/ui/commands/commands.js @@ -29,11 +29,13 @@ export class Result { * @param {string} name Result type * @param {Info} info Result info * @param {object} control Result controller + * @param {string} ui User interfact this command will use */ - constructor(name, info, control) { + constructor(name, info, control, ui) { this.name = name; this.info = info; this.control = control; + this.ui = ui; } } @@ -501,6 +503,16 @@ class Wizard { return this.built.started(); } + /** + * Return the name of the control info of current wizard + * + * @returns {object} + * + */ + control() { + return this.built.control(); + } + /** * Close current wizard * diff --git a/ui/commands/controls.js b/ui/commands/controls.js index 39fc2f0..8dd05f6 100644 --- a/ui/commands/controls.js +++ b/ui/commands/controls.js @@ -44,18 +44,17 @@ export class Controls { * Get a control * * @param {string} type Type of the control - * @param {...any} data Data needed to build the control * * @returns {object} Control object * * @throws {Exception} When given control type is undefined * */ - get(type, ...data) { + get(type) { if (typeof this.controls[type] !== "object") { throw new Exception('Control "' + type + '" was undefined'); } - return this.controls[type].build(...data); + return this.controls[type]; } } diff --git a/ui/commands/ssh.js b/ui/commands/ssh.js index 8878604..6b37873 100644 --- a/ui/commands/ssh.js +++ b/ui/commands/ssh.js @@ -487,7 +487,7 @@ class Wizard { credential: "" }; this.step = subs; - this.controls = controls; + this.controls = controls.get("SSH"); this.history = history; this.step.resolve(this.stepInitialPrompt()); @@ -497,6 +497,10 @@ class Wizard { return this.hasStarted; } + control() { + return this.controls; + } + close() { this.step.resolve( this.stepErrorDone( @@ -603,7 +607,7 @@ class Wizard { new command.Result( configInput.user + "@" + configInput.host, self.info, - self.controls.get("SSH", { + self.controls.build({ charset: configInput.charset, send(data) { return commandHandler.sendData(data); @@ -615,7 +619,8 @@ class Wizard { return commandHandler.sendResize(rows, cols); }, events: commandHandler.events - }) + }), + self.controls.ui() ) ) ); diff --git a/ui/commands/telnet.js b/ui/commands/telnet.js index 37f6e4e..18cab4e 100644 --- a/ui/commands/telnet.js +++ b/ui/commands/telnet.js @@ -249,7 +249,7 @@ class Wizard { this.config = config; this.session = session; this.step = subs; - this.controls = controls; + this.controls = controls.get("Telnet"); this.history = history; this.step.resolve(this.stepInitialPrompt()); @@ -259,6 +259,10 @@ class Wizard { return this.hasStarted; } + control() { + return this.controls; + } + close() { this.step.resolve( this.stepErrorDone( @@ -337,7 +341,7 @@ class Wizard { new command.Result( configInput.host, self.info, - self.controls.get("Telnet", { + self.controls.build({ charset: parsedConfig.charset, send(data) { return commandHandler.sendData(data); @@ -346,7 +350,8 @@ class Wizard { return commandHandler.sendClose(); }, events: commandHandler.events - }) + }), + self.controls.ui() ) ) ); diff --git a/ui/control/ssh.js b/ui/control/ssh.js index 0c18eb7..e800924 100644 --- a/ui/control/ssh.js +++ b/ui/control/ssh.js @@ -100,10 +100,6 @@ class Control { this.resizer(dim.rows, dim.cols); } - ui() { - return "Console"; - } - enabled() { this.enable = true; } @@ -168,6 +164,10 @@ export class SSH { return "SSH"; } + ui() { + return "Console"; + } + build(data) { return new Control(data, this.color); } diff --git a/ui/control/telnet.js b/ui/control/telnet.js index 5fb2386..c3fd85b 100644 --- a/ui/control/telnet.js +++ b/ui/control/telnet.js @@ -428,10 +428,6 @@ class Control { this.parser.requestWindowResize(); } - ui() { - return "Console"; - } - enabled() { this.enable = true; } @@ -527,6 +523,10 @@ export class Telnet { return "Telnet"; } + ui() { + return "Console"; + } + build(data) { return new Control(data, this.color); } diff --git a/ui/home.css b/ui/home.css index 22624af..9cf8cb3 100644 --- a/ui/home.css +++ b/ui/home.css @@ -369,16 +369,6 @@ flex-direction: column; color: #fff; font-size: 1.2em; - position: relative; -} - -#home-content-preload-drop { - height: 0px; - width: 0px; - overflow: hidden; - position: absolute; - bottom: 0; - right: 0; } @media (max-width: 768px) { diff --git a/ui/home.vue b/ui/home.vue index a4e601f..9b185b2 100644 --- a/ui/home.vue +++ b/ui/home.vue @@ -104,8 +104,6 @@ >.

- -
0) { - this.tab.tabs[index].indicator.message = msg; - this.tab.tabs[index].indicator.level = "warning"; - } else { + if (msg.toDismiss) { + if ( + this.tab.tabs[index].indicator.message !== msg.text || + this.tab.tabs[index].indicator.level !== "warning" + ) { + return; + } + this.tab.tabs[index].indicator.message = ""; this.tab.tabs[index].indicator.level = ""; + + return; } + + this.tab.tabs[index].indicator.message = msg.text; + this.tab.tabs[index].indicator.level = "warning"; }, tabInfo(index, msg) { - if (msg.length > 0) { - this.tab.tabs[index].indicator.message = msg; - this.tab.tabs[index].indicator.level = "info"; - } else { + if (msg.toDismiss) { + if ( + this.tab.tabs[index].indicator.message !== msg.text || + this.tab.tabs[index].indicator.level !== "info" + ) { + return; + } + this.tab.tabs[index].indicator.message = ""; this.tab.tabs[index].indicator.level = ""; + + return; } + + this.tab.tabs[index].indicator.message = msg.text; + this.tab.tabs[index].indicator.level = "info"; }, tabUpdated(index) { this.$emit("tab-updated", this.tab.tabs); diff --git a/ui/widgets/connector.vue b/ui/widgets/connector.vue index f794ee3..fc19b38 100644 --- a/ui/widgets/connector.vue +++ b/ui/widgets/connector.vue @@ -212,6 +212,15 @@ + +
+
+ {{ current.title || connector.name }} wizard +
+
@@ -219,6 +228,8 @@ import "./connector.css"; import * as command from "../commands/commands.js"; +const preloaderIDPrefix = "connector-resource-preload-control-"; + function buildField(i, field) { return { verified: false, @@ -267,6 +278,7 @@ export default { currentConnector: null, currentConnectorCloseWait: null, current: buildEmptyCurrent(), + preloaderIDName: "", working: false, disabled: false, cancelled: false @@ -399,6 +411,13 @@ export default { throw new Error("Cannot run wizard multiple times"); } + this.preloaderIDName = + preloaderIDPrefix + + this.getConnector() + .wizard.control() + .ui() + .toLowerCase(); + this.currentConnectorCloseWait = (async () => { while (!this.disabled) { let next = this.buildCurrent(await this.getConnector().wizard.next()); diff --git a/ui/widgets/screen_console.css b/ui/widgets/screen_console.css index 489e9c3..60af20e 100644 --- a/ui/widgets/screen_console.css +++ b/ui/widgets/screen_console.css @@ -21,14 +21,18 @@ @import "~hack-font/build/web/hack.css"; -#home-content > #home-content-preload-drop::before { +#connector-resource-preload-control-console { + font-family: Hack; +} +#connector-resource-preload-control-console::after { content: " "; - font-family: Hack, monospace; + font-family: Hack; font-weight: bold; } -#home-content > #home-content-preload-drop::after { +#connector-resource-preload-control-console::before { content: " "; - font-family: Hack, monospace; + font-family: Hack; + font-style: italic; } #home-content > .screen > .screen-screen > .screen-console { @@ -144,5 +148,32 @@ } #home-content > .screen > .screen-screen > .screen-console > .console-console { - font-family: Hack, monospace; + display: flex; + flex-direction: column; + justify-content: center; + justify-items: center; + color: #fff; +} + +#home-content + > .screen + > .screen-screen + > .screen-console + > .console-console + > .console-loading { + text-align: center; + font-size: 1em; + font-weight: lighter; +} + +#home-content + > .screen + > .screen-screen + > .screen-console + > .console-console + > .console-loading + > .console-loading-icon { + background: url(./busy.svg) 50% no-repeat; + width: 100%; + height: 100px; } diff --git a/ui/widgets/screen_console.vue b/ui/widgets/screen_console.vue index d52b499..5ddc124 100644 --- a/ui/widgets/screen_console.vue +++ b/ui/widgets/screen_console.vue @@ -22,8 +22,16 @@

Console

+ +
+
+
+ Initializing console ... +
+