Styled the input.

Do not render the widget after a close request.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2019-12-06 12:50:44 +01:00
parent 2f33038695
commit 80673ad18f
4 changed files with 51 additions and 6 deletions

View File

@ -34,6 +34,11 @@ export class MonitorWidget extends ReactWidget {
* Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
*/
protected focusNode: HTMLElement | undefined;
/**
* Guard against re-rendering the view after the close was requested.
* See: https://github.com/eclipse-theia/theia/issues/6704
*/
protected closing = false;
protected readonly clearOutputEmitter = new Emitter<void>();
constructor() {
@ -67,6 +72,7 @@ export class MonitorWidget extends ReactWidget {
}
onCloseRequest(msg: Message): void {
this.closing = true;
this.monitorConnection.autoConnect = false;
if (this.monitorConnection.connected) {
this.monitorConnection.disconnect();
@ -74,6 +80,12 @@ export class MonitorWidget extends ReactWidget {
super.onCloseRequest(msg);
}
protected onUpdateRequest(msg: Message): void {
if (!this.closing) {
super.onUpdateRequest(msg);
}
}
protected onResize(msg: Widget.ResizeMessage): void {
super.onResize(msg);
this.widgetHeight = msg.height;
@ -195,7 +207,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
return <input
ref={this.setRef}
type='text'
className={this.props.monitorConfig ? '' : 'not-connected'}
className={this.props.monitorConfig ? '' : 'warning'}
placeholder={this.placeholder}
value={this.state.text}
onChange={this.onChange}

View File

@ -14,7 +14,7 @@
.arduino-select__option--is-selected {
background-color: var(--theia-accent-color3) !important;
color: var(--theia-content-font-color0) !important;
border-color: var(--theia-accent-color3) !important;
border-color: var(--theia-accent-color3) !important;
}
.arduino-select__option--is-focused {

View File

@ -4,3 +4,40 @@
@import './editor.css';
@import './monitor.css';
@import './arduino-select.css';
input:focus {
outline-width: 1px;
outline-style: solid;
outline-offset: -1px;
opacity: 1 !important;
outline-color: var(--theia-accent-color3);
}
input.warning:focus {
outline-width: 1px;
outline-style: solid;
outline-offset: -1px;
opacity: 1 !important;
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
}
input.warning {
background-color: var(--theia-warn-color0);
}
input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
opacity: 1; /* Firefox */
}
input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
}
input.warning::-ms-input-placeholder { /* Microsoft Edge */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
}

View File

@ -33,10 +33,6 @@
border-color: var(--theia-accent-color3);
}
.serial-monitor .head .send > input.not-connected {
background-color: var(--theia-warn-color0);
}
.serial-monitor .head .config {
display: flex;
}