Skip to content

Commit 459e55a

Browse files
committed
Improved serial monitor dropdowns
Signed-off-by: jbicker <[email protected]>
1 parent f76f454 commit 459e55a

File tree

2 files changed

+40
-5
lines changed

2 files changed

+40
-5
lines changed

arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactWidget, Message } from "@theia/core/lib/browser";
1+
import { ReactWidget, Message, Widget } from "@theia/core/lib/browser";
22
import { postConstruct, injectable, inject } from "inversify";
33
import * as React from 'react';
44
import Select, { components } from 'react-select';
@@ -116,6 +116,8 @@ export class MonitorWidget extends ReactWidget {
116116
protected baudRate: number;
117117
protected _lineEnding: string;
118118

119+
protected widgetHeight: number;
120+
119121
constructor(
120122
@inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl,
121123
@inject(MonitorConnection) protected readonly connection: MonitorConnection,
@@ -135,6 +137,8 @@ export class MonitorWidget extends ReactWidget {
135137
this.tempData = '';
136138
this._lineEnding = '\n';
137139

140+
this.scrollOptions = undefined;
141+
138142
this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => {
139143
this.tempData += data;
140144
if (this.tempData.endsWith('\n')) {
@@ -170,7 +174,7 @@ export class MonitorWidget extends ReactWidget {
170174
this.clear();
171175
this.connect();
172176
this.toDisposeOnDetach.push(this.boardsServiceClient.onBoardsChanged(async states => {
173-
const currentConnectionConfig = this.connection.connectionConfig;
177+
const currentConnectionConfig = this.connection.connectionConfig;
174178
const connectedBoard = states.newState.boards
175179
.filter(AttachedSerialBoard.is)
176180
.find(board => {
@@ -195,6 +199,12 @@ export class MonitorWidget extends ReactWidget {
195199
this.connection.disconnect();
196200
}
197201

202+
protected onResize(msg: Widget.ResizeMessage) {
203+
super.onResize(msg);
204+
this.widgetHeight = msg.height;
205+
this.update();
206+
}
207+
198208
protected async connect() {
199209
const config = await this.getConnectionConfig();
200210
if (config) {
@@ -297,7 +307,8 @@ export class MonitorWidget extends ReactWidget {
297307
const selectStyles: Styles = {
298308
control: (provided, state) => ({
299309
...provided,
300-
width: 200
310+
width: 200,
311+
border: 'none'
301312
}),
302313
dropdownIndicator: (p, s) => ({
303314
...p,
@@ -337,6 +348,7 @@ export class MonitorWidget extends ReactWidget {
337348
components={{ DropdownIndicator }}
338349
theme={theme}
339350
styles={selectStyles}
351+
maxMenuHeight={this.widgetHeight - 40}
340352
classNamePrefix='sms'
341353
className='serial-monitor-select'
342354
id={id}

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,15 +79,38 @@
7979
border: var(--theia-border-color1) var(--theia-border-width) solid;
8080
}
8181

82+
.serial-monitor-select .sms__control--is-focused {
83+
border-color: var(--theia-border-color2) !important;
84+
box-shadow: none !important;
85+
}
86+
87+
.sms__control--is-focused:hover {
88+
border-color: var(--theia-border-color2) !important;
89+
}
90+
8291
.serial-monitor-select .sms__option--is-selected {
8392
background-color: var(--theia-ui-button-color-secondary-hover);
8493
color: var(--theia-content-font-color0);
8594
}
8695

87-
.serial-monitor-select .sms__option--is-focused {
96+
.serial-monitor-select .sms__option--is-focused {
8897
background-color: var(--theia-ui-button-color-secondary-hover);
8998
}
9099

91-
.serial-monitor-select .sms__menu {
100+
.serial-monitor-select .sms__menu {
92101
background-color: var(--theia-layout-color1);
102+
border: 1px solid var(--theia-border-color2);
103+
border-top: none;
104+
box-shadow: none;
105+
}
106+
107+
.serial-monitor-select .sms__control.sms__control--menu-is-open {
108+
border: 1px solid;
109+
border-color: var(--theia-border-color2) !important;
110+
border-bottom: none;
111+
}
112+
113+
.sms__menu-list {
114+
padding-top: 0 !important;
115+
padding-bottom: 0 !important;
93116
}

0 commit comments

Comments
 (0)