mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-07-13 14:26:37 +00:00
Improved serial monitor dropdowns
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
parent
f76f4543e9
commit
459e55a69a
@ -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 * as React from 'react';
|
||||
import Select, { components } from 'react-select';
|
||||
@ -116,6 +116,8 @@ export class MonitorWidget extends ReactWidget {
|
||||
protected baudRate: number;
|
||||
protected _lineEnding: string;
|
||||
|
||||
protected widgetHeight: number;
|
||||
|
||||
constructor(
|
||||
@inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl,
|
||||
@inject(MonitorConnection) protected readonly connection: MonitorConnection,
|
||||
@ -135,6 +137,8 @@ export class MonitorWidget extends ReactWidget {
|
||||
this.tempData = '';
|
||||
this._lineEnding = '\n';
|
||||
|
||||
this.scrollOptions = undefined;
|
||||
|
||||
this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => {
|
||||
this.tempData += data;
|
||||
if (this.tempData.endsWith('\n')) {
|
||||
@ -170,7 +174,7 @@ export class MonitorWidget extends ReactWidget {
|
||||
this.clear();
|
||||
this.connect();
|
||||
this.toDisposeOnDetach.push(this.boardsServiceClient.onBoardsChanged(async states => {
|
||||
const currentConnectionConfig = this.connection.connectionConfig;
|
||||
const currentConnectionConfig = this.connection.connectionConfig;
|
||||
const connectedBoard = states.newState.boards
|
||||
.filter(AttachedSerialBoard.is)
|
||||
.find(board => {
|
||||
@ -195,6 +199,12 @@ export class MonitorWidget extends ReactWidget {
|
||||
this.connection.disconnect();
|
||||
}
|
||||
|
||||
protected onResize(msg: Widget.ResizeMessage) {
|
||||
super.onResize(msg);
|
||||
this.widgetHeight = msg.height;
|
||||
this.update();
|
||||
}
|
||||
|
||||
protected async connect() {
|
||||
const config = await this.getConnectionConfig();
|
||||
if (config) {
|
||||
@ -297,7 +307,8 @@ export class MonitorWidget extends ReactWidget {
|
||||
const selectStyles: Styles = {
|
||||
control: (provided, state) => ({
|
||||
...provided,
|
||||
width: 200
|
||||
width: 200,
|
||||
border: 'none'
|
||||
}),
|
||||
dropdownIndicator: (p, s) => ({
|
||||
...p,
|
||||
@ -337,6 +348,7 @@ export class MonitorWidget extends ReactWidget {
|
||||
components={{ DropdownIndicator }}
|
||||
theme={theme}
|
||||
styles={selectStyles}
|
||||
maxMenuHeight={this.widgetHeight - 40}
|
||||
classNamePrefix='sms'
|
||||
className='serial-monitor-select'
|
||||
id={id}
|
||||
|
@ -79,15 +79,38 @@
|
||||
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 {
|
||||
background-color: var(--theia-ui-button-color-secondary-hover);
|
||||
color: var(--theia-content-font-color0);
|
||||
}
|
||||
|
||||
.serial-monitor-select .sms__option--is-focused {
|
||||
.serial-monitor-select .sms__option--is-focused {
|
||||
background-color: var(--theia-ui-button-color-secondary-hover);
|
||||
}
|
||||
|
||||
.serial-monitor-select .sms__menu {
|
||||
.serial-monitor-select .sms__menu {
|
||||
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;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user