From 71842abfa38caad0c91b2e6c0f08332a5430af1a Mon Sep 17 00:00:00 2001 From: Akos Kitta Date: Thu, 5 Dec 2019 13:13:29 +0100 Subject: [PATCH] Got rid of the send button, use keybinding instead Signed-off-by: Akos Kitta --- .../browser/arduino-frontend-contribution.tsx | 8 +-- .../src/browser/components/arduino-select.tsx | 4 +- .../src/browser/monitor/monitor-connection.ts | 2 +- .../src/browser/monitor/monitor-widget.tsx | 72 +++++++++++-------- .../src/browser/style/monitor.css | 40 ++++------- 5 files changed, 65 insertions(+), 61 deletions(-) diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 64cd8315..da040530 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -331,8 +331,8 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut return; } - const connectionConfig = this.monitorConnection.connectionConfig; - if (connectionConfig) { + const monitorConfig = this.monitorConnection.monitorConfig; + if (monitorConfig) { await this.monitorConnection.disconnect(); } @@ -349,8 +349,8 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut } catch (e) { await this.messageService.error(e.toString()); } finally { - if (connectionConfig) { - await this.monitorConnection.connect(connectionConfig); + if (monitorConfig) { + await this.monitorConnection.connect(monitorConfig); } } } diff --git a/arduino-ide-extension/src/browser/components/arduino-select.tsx b/arduino-ide-extension/src/browser/components/arduino-select.tsx index 1bac55f2..d9f80a8f 100644 --- a/arduino-ide-extension/src/browser/components/arduino-select.tsx +++ b/arduino-ide-extension/src/browser/components/arduino-select.tsx @@ -11,7 +11,7 @@ export class ArduinoSelect extends Select { } render(): React.ReactNode { - const height = 27; // Seems to be the hard coded constant for `input` and `textArea` in Theia. + const controlHeight = 27; // from `monitor.css` -> `.serial-monitor-container .head` (`height: 27px;`) const styles: Styles = { control: styles => ({ ...styles, @@ -37,7 +37,7 @@ export class ArduinoSelect extends Select { ...theme, borderRadius: 0, spacing: { - controlHeight: height, + controlHeight, baseUnit: 2, menuGutter: 4 }, colors: { diff --git a/arduino-ide-extension/src/browser/monitor/monitor-connection.ts b/arduino-ide-extension/src/browser/monitor/monitor-connection.ts index 45ec5f8f..cf19e6e6 100644 --- a/arduino-ide-extension/src/browser/monitor/monitor-connection.ts +++ b/arduino-ide-extension/src/browser/monitor/monitor-connection.ts @@ -107,7 +107,7 @@ export class MonitorConnection { return !!this.state; } - get connectionConfig(): MonitorConfig | undefined { + get monitorConfig(): MonitorConfig | undefined { return this.state ? this.state.config : undefined; } diff --git a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx index 92661874..614a0a14 100644 --- a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx +++ b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx @@ -2,12 +2,15 @@ import * as React from 'react'; import * as dateFormat from 'dateformat'; import { postConstruct, injectable, inject } from 'inversify'; import { OptionsType } from 'react-select/src/types'; -import { ArduinoSelect } from '../components/arduino-select'; +import { Key, KeyCode } from '@theia/core/lib/browser/keys'; import { ReactWidget, Message, Widget } from '@theia/core/lib/browser/widgets'; import { MonitorConfig } from '../../common/protocol/monitor-service'; +import { ArduinoSelect } from '../components/arduino-select'; import { MonitorModel } from './monitor-model'; import { MonitorConnection } from './monitor-connection'; import { MonitorServiceClientImpl } from './monitor-service-client-impl'; +import { isOSX } from '@theia/core'; +import { Board, Port } from '../../common/protocol/boards-service'; @injectable() export class MonitorWidget extends ReactWidget { @@ -15,7 +18,7 @@ export class MonitorWidget extends ReactWidget { static readonly ID = 'serial-monitor'; @inject(MonitorModel) - protected readonly model: MonitorModel; + protected readonly monitorModel: MonitorModel; @inject(MonitorConnection) protected readonly monitorConnection: MonitorConnection; @@ -53,15 +56,11 @@ export class MonitorWidget extends ReactWidget { if (eolIndex !== -1) { const line = this.chunk.substring(0, eolIndex + 1); this.chunk = this.chunk.slice(eolIndex + 1); - this.lines.push(`${this.model.timestamp ? `${dateFormat(new Date(), 'H:M:ss.l')} -> ` : ''}${line}`); + this.lines.push(`${this.monitorModel.timestamp ? `${dateFormat(new Date(), 'H:M:ss.l')} -> ` : ''}${line}`); this.update(); } }), - this.monitorConnection.onConnectionChanged(state => { - if (!state) { - this.clearConsole(); - } - }) + this.monitorConnection.onConnectionChanged(() => this.clearConsole()) ]); this.update(); } @@ -125,24 +124,23 @@ export class MonitorWidget extends ReactWidget { protected render(): React.ReactNode { const { baudRates, lineEndings } = this; - const lineEnding = lineEndings.find(item => item.value === this.model.lineEnding) || lineEndings[1]; // Defaults to `\n`. - const baudRate = baudRates.find(item => item.value === this.model.baudRate) || baudRates[4]; // Defaults to `9600`. + const lineEnding = lineEndings.find(item => item.value === this.monitorModel.lineEnding) || lineEndings[1]; // Defaults to `\n`. + const baudRate = baudRates.find(item => item.value === this.monitorModel.baudRate) || baudRates[4]; // Defaults to `9600`. return
,
- +
; } @@ -161,18 +159,19 @@ export class MonitorWidget extends ReactWidget { } protected readonly onChangeLineEnding = (option: SelectOption) => { - this.model.lineEnding = option.value; + this.monitorModel.lineEnding = option.value; } protected readonly onChangeBaudRate = async (option: SelectOption) => { await this.monitorConnection.disconnect(); - this.model.baudRate = option.value; + this.monitorModel.baudRate = option.value; } } export namespace SerialMonitorSendField { export interface Props { + readonly monitorConfig?: MonitorConfig; readonly onSend: (text: string) => void; readonly resolveFocus: (element: HTMLElement | undefined) => void; } @@ -186,39 +185,56 @@ export class SerialMonitorSendField extends React.Component - + onChange={this.onChange} + onKeyDown={this.onKeyDown} /> } + protected get placeholder(): string { + const { monitorConfig } = this.props; + if (!monitorConfig) { + return 'Not connected. Select a board and a port to connect automatically.' + } + const { board, port } = monitorConfig; + return `Message (${isOSX ? '⌘' : 'Ctrl'}+Enter to send message to '${Board.toString(board, { useFqbn: false })}' on '${Port.toString(port)}')`; + } + protected setRef = (element: HTMLElement | null) => { if (this.props.resolveFocus) { this.props.resolveFocus(element || undefined); } } - protected handleChange(event: React.ChangeEvent) { + protected onChange(event: React.ChangeEvent): void { this.setState({ value: event.target.value }); } - protected handleSubmit(event: React.MouseEvent) { + protected onSend(): void { this.props.onSend(this.state.value); this.setState({ value: '' }); - event.preventDefault(); + } + + protected onKeyDown(event: React.KeyboardEvent): void { + const keyCode = KeyCode.createKeyCode(event.nativeEvent); + if (keyCode) { + const { key, meta, ctrl } = keyCode; + if (key === Key.ENTER && ((isOSX && meta) || (!isOSX && ctrl))) { + this.onSend(); + } + } } } @@ -226,7 +242,7 @@ export class SerialMonitorSendField extends React.Component input { + line-height: var(--theia-content-line-height); + width: 100%; +} + +.serial-monitor-container .head .send > input:focus { + border-color: var(--theia-accent-color3); +} + +.serial-monitor-container .head .send > input.not-connected { + background-color: var(--theia-warn-color0); } .serial-monitor-container .head .send input#serial-monitor-send { @@ -46,18 +42,10 @@ flex: 1; } -.serial-monitor-container .head .send input:focus { - outline: none; -} - .serial-monitor-container .head .config { display: flex; } -.serial-monitor-container .head .config .serial-monitor-select { - margin-left: 5px; -} - #serial-monitor-output-container { overflow: auto; flex: 1;