jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-14 23:06:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved serial monitor dropdowns

Browse Source 
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-08-16 13:01:25 +02:00
parent f76f4543e9
commit 459e55a69a
2 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
View File

@ -1,4 +1,4 @@
import { ReactWidget, Message } from "@theia/core/lib/browser"; import { ReactWidget, Message, Widget } from "@theia/core/lib/browser";
import { postConstruct, injectable, inject } from "inversify"; import { postConstruct, injectable, inject } from "inversify";
import * as React from 'react'; import * as React from 'react';
import Select, { components } from 'react-select'; import Select, { components } from 'react-select';
@ -116,6 +116,8 @@ export class MonitorWidget extends ReactWidget {
protected baudRate: number; protected baudRate: number;
protected _lineEnding: string; protected _lineEnding: string;
protected widgetHeight: number;
constructor( constructor(
@inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl, @inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl,
@inject(MonitorConnection) protected readonly connection: MonitorConnection, @inject(MonitorConnection) protected readonly connection: MonitorConnection,
@ -135,6 +137,8 @@ export class MonitorWidget extends ReactWidget {
this.tempData = ''; this.tempData = '';
this._lineEnding = '\n'; this._lineEnding = '\n';
this.scrollOptions = undefined;
this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => { this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => {
this.tempData += data; this.tempData += data;
if (this.tempData.endsWith('\n')) { if (this.tempData.endsWith('\n')) {
@ -195,6 +199,12 @@ export class MonitorWidget extends ReactWidget {
this.connection.disconnect(); this.connection.disconnect();
} }
protected onResize(msg: Widget.ResizeMessage) {
super.onResize(msg);
this.widgetHeight = msg.height;
this.update();
}
protected async connect() { protected async connect() {
const config = await this.getConnectionConfig(); const config = await this.getConnectionConfig();
if (config) { if (config) {
@ -297,7 +307,8 @@ export class MonitorWidget extends ReactWidget {
const selectStyles: Styles = { const selectStyles: Styles = {
control: (provided, state) => ({ control: (provided, state) => ({
...provided, ...provided,
width: 200 width: 200,
border: 'none'
}), }),
dropdownIndicator: (p, s) => ({ dropdownIndicator: (p, s) => ({
...p, ...p,
@ -337,6 +348,7 @@ export class MonitorWidget extends ReactWidget {
components={{ DropdownIndicator }} components={{ DropdownIndicator }}
theme={theme} theme={theme}
styles={selectStyles} styles={selectStyles}
maxMenuHeight={this.widgetHeight - 40}
classNamePrefix='sms' classNamePrefix='sms'
className='serial-monitor-select' className='serial-monitor-select'
id={id} id={id}

23
arduino-ide-extension/src/browser/style/serial-monitor.css
View File

@ -79,6 +79,15 @@
border: var(--theia-border-color1) var(--theia-border-width) solid; border: var(--theia-border-color1) var(--theia-border-width) solid;
} }
.serial-monitor-select .sms__control--is-focused {
border-color: var(--theia-border-color2) !important;
box-shadow: none !important;
}
.sms__control--is-focused:hover {
border-color: var(--theia-border-color2) !important;
}
.serial-monitor-select .sms__option--is-selected { .serial-monitor-select .sms__option--is-selected {
background-color: var(--theia-ui-button-color-secondary-hover); background-color: var(--theia-ui-button-color-secondary-hover);
color: var(--theia-content-font-color0); color: var(--theia-content-font-color0);
@ -90,4 +99,18 @@
.serial-monitor-select .sms__menu { .serial-monitor-select .sms__menu {
background-color: var(--theia-layout-color1); background-color: var(--theia-layout-color1);
border: 1px solid var(--theia-border-color2);
border-top: none;
box-shadow: none;
}
.serial-monitor-select .sms__control.sms__control--menu-is-open {
border: 1px solid;
border-color: var(--theia-border-color2) !important;
border-bottom: none;
}
.sms__menu-list {
padding-top: 0 !important;
padding-bottom: 0 !important;
} }