Skip to content

Commit 0b89c75

Browse files
author
Alberto Iannaccone
committed
implement new Board Selector design
1 parent 7862fa5 commit 0b89c75

File tree

7 files changed

+187
-113
lines changed

7 files changed

+187
-113
lines changed

arduino-ide-extension/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"atob": "^2.1.2",
6262
"auth0-js": "^9.14.0",
6363
"btoa": "^1.2.1",
64+
"classnames": "^2.3.1",
6465
"dateformat": "^3.0.3",
6566
"deep-equal": "^2.0.5",
6667
"deepmerge": "2.0.1",

arduino-ide-extension/src/browser/boards/boards-service-provider.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,6 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
270270
}
271271

272272
protected setBoardsConfig(config: BoardsConfig.Config): void {
273-
this.logger.info('Board config changed: ', JSON.stringify(config));
274273
this._boardsConfig = config;
275274
this.latestBoardsConfig = this._boardsConfig;
276275
if (this.canUploadTo(this._boardsConfig)) {

arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx

Lines changed: 85 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import * as ReactDOM from '@theia/core/shared/react-dom';
33
import { CommandRegistry } from '@theia/core/lib/common/command';
44
import { DisposableCollection } from '@theia/core/lib/common/disposable';
55
import { Port } from '../../common/protocol';
6-
import { BoardsConfig } from './boards-config';
76
import { ArduinoCommands } from '../arduino-commands';
87
import {
98
BoardsServiceProvider,
109
AvailableBoard,
1110
} from './boards-service-provider';
1211
import { nls } from '@theia/core/lib/common';
12+
import classNames from 'classnames';
1313

1414
export interface BoardsDropDownListCoords {
1515
readonly top: number;
@@ -64,12 +64,8 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
6464
>
6565
{items
6666
.map(({ name, port, selected, onClick }) => ({
67-
label: nls.localize(
68-
'arduino/board/boardListItem',
69-
'{0} at {1}',
70-
name,
71-
Port.toString(port)
72-
),
67+
boardLabel: name,
68+
port,
7369
selected,
7470
onClick,
7571
}))
@@ -86,22 +82,42 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
8682
}
8783

8884
protected renderItem({
89-
label,
85+
boardLabel,
86+
port,
9087
selected,
9188
onClick,
9289
}: {
93-
label: string;
90+
boardLabel: string;
91+
port: Port;
9492
selected?: boolean;
9593
onClick: () => void;
9694
}): React.ReactNode {
95+
const protocolIcon = iconNameFromProtocol(port.protocol);
96+
9797
return (
9898
<div
99-
key={label}
100-
className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`}
99+
key={`board-item--${boardLabel}-${port.address}`}
100+
className={classNames('arduino-boards-dropdown-item', {
101+
'arduino-boards-dropdown-item--selected': selected,
102+
})}
101103
onClick={onClick}
102104
>
103-
<div>{label}</div>
104-
{selected ? <span className="fa fa-check" /> : ''}
105+
<div
106+
className={classNames(
107+
'arduino-boards-dropdown-item--protocol',
108+
'fa',
109+
protocolIcon
110+
)}
111+
/>
112+
<div className="arduino-boards-dropdown-item--label">
113+
<div className="arduino-boards-dropdown-item--board-label">
114+
{boardLabel}
115+
</div>
116+
<div className="arduino-boards-dropdown-item--port-label">
117+
{port.address}
118+
</div>
119+
</div>
120+
{selected ? <div className="fa fa-check" /> : ''}
105121
</div>
106122
);
107123
}
@@ -163,36 +179,43 @@ export class BoardsToolBarItem extends React.Component<
163179

164180
override render(): React.ReactNode {
165181
const { coords, availableBoards } = this.state;
166-
const boardsConfig = this.props.boardsServiceClient.boardsConfig;
167-
const title = BoardsConfig.Config.toString(boardsConfig, {
168-
default: nls.localize(
169-
'arduino/common/noBoardSelected',
170-
'No board selected'
171-
),
172-
});
173-
const decorator = (() => {
174-
const selectedBoard = availableBoards.find(({ selected }) => selected);
175-
if (!selectedBoard || !selectedBoard.port) {
176-
return 'fa fa-times notAttached';
177-
}
178-
if (selectedBoard.state === AvailableBoard.State.guessed) {
179-
return 'fa fa-exclamation-triangle guessed';
180-
}
181-
return '';
182-
})();
182+
const selectedBoard = availableBoards.find(({ selected }) => selected);
183+
184+
const boardLabel =
185+
selectedBoard?.name ||
186+
nls.localize('arduino/board/selectBoard', 'Select Board');
187+
const selectedPortLabel = portLabel(selectedBoard?.port?.address);
188+
189+
const isConnected = Boolean(
190+
selectedBoard && AvailableBoard.hasPort(selectedBoard)
191+
);
192+
const protocolIcon = isConnected
193+
? iconNameFromProtocol(selectedBoard?.port?.protocol || '')
194+
: null;
195+
const procolIconClassNames = classNames(
196+
'arduino-boards-toolbar-item--protocol',
197+
'fa',
198+
protocolIcon
199+
);
183200

184201
return (
185202
<React.Fragment>
186-
<div className="arduino-boards-toolbar-item-container">
187-
<div className="arduino-boards-toolbar-item" title={title}>
188-
<div className="inner-container" onClick={this.show}>
189-
<span className={decorator} />
190-
<div className="label noWrapInfo">
191-
<div className="noWrapInfo noselect">{title}</div>
192-
</div>
193-
<span className="fa fa-caret-down caret" />
194-
</div>
203+
<div
204+
className="arduino-boards-toolbar-item-container"
205+
title={selectedPortLabel}
206+
onClick={this.show}
207+
>
208+
{protocolIcon && <div className={procolIconClassNames} />}
209+
<div
210+
className={classNames(
211+
'arduino-boards-toolbar-item--label',
212+
'noWrapInfo noselect',
213+
{ 'arduino-boards-toolbar-item--label-connected': isConnected }
214+
)}
215+
>
216+
{boardLabel}
195217
</div>
218+
<div className="fa fa-caret-down caret" />
196219
</div>
197220
<BoardsDropDown
198221
coords={coords}
@@ -236,3 +259,26 @@ export namespace BoardsToolBarItem {
236259
coords: BoardsDropDownListCoords | 'hidden';
237260
}
238261
}
262+
263+
function iconNameFromProtocol(protocol: string): string {
264+
switch (protocol) {
265+
case 'serial':
266+
return 'fa-arduino-technology-usb';
267+
case 'network':
268+
return 'fa-arduino-technology-connection';
269+
/*
270+
Bluetooth ports are not listed yet from the CLI;
271+
Not sure about the naming ('bluetooth'); make sure it's correct before uncommenting the following lines
272+
*/
273+
// case 'bluetooth':
274+
// return 'fa-arduino-technology-bluetooth';
275+
default:
276+
return 'fa-arduino-technology-3dimensionscube';
277+
}
278+
}
279+
280+
function portLabel(portName?: string) {
281+
return portName
282+
? nls.localize('arduino/board/portLabel', 'Port: {0}', portName)
283+
: nls.localize('arduino/board/disconnected', 'Disconnected');
284+
}

arduino-ide-extension/src/browser/style/boards-config-dialog.css

Lines changed: 78 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -142,96 +142,122 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
142142
.p-Widget.dialogOverlay .dialogContent.select-board-dialog {
143143
width: 500px;
144144
}
145+
145146
.arduino-boards-toolbar-item-container {
146-
margin-left: 3px;
147+
align-items: center;
148+
background: var(--theia-tab-unfocusedActiveBackground);
149+
border-radius: 1px;
150+
color: var(--theia-foreground);
151+
display: flex;
152+
gap: 10px;
153+
height: 24px;
154+
margin: 0 6px;
155+
overflow: hidden;
156+
padding: 0 10px;
157+
width: 230px;
147158
}
148159

149-
.arduino-boards-toolbar-item-container
150-
.arduino-boards-toolbar-item
151-
.inner-container {
160+
.arduino-boards-toolbar-item--protocol,
161+
.arduino-boards-dropdown-item--protocol {
162+
align-items: center;
152163
display: flex;
153-
align-items: baseline;
154-
width: 100%;
164+
font-size: 16px;
155165
}
156166

157-
.arduino-boards-toolbar-item-container
158-
.arduino-boards-toolbar-item
159-
.inner-container
160-
.notAttached {
161-
width: 10px;
162-
height: 10px;
163-
color: red;
164-
margin: 0 5px;
167+
.arduino-boards-toolbar-item--protocol {
168+
color: var(--theia-foreground);
165169
}
166170

167-
.arduino-boards-toolbar-item-container
168-
.arduino-boards-toolbar-item
169-
.inner-container
170-
.guessed {
171-
width: 10px;
172-
height: 10px;
173-
color: var(--theia-warningBackground);
174-
margin: 0 5px;
171+
.arduino-boards-dropdown-item--protocol {
172+
color: var(--theia-activityBar-inactiveForeground);
175173
}
176174

177-
.arduino-boards-toolbar-item-container {
175+
.arduino-boards-toolbar-item-container
176+
.arduino-boards-toolbar-item {
178177
display: flex;
179-
align-items: center;
180-
width: 220px;
178+
align-items: baseline;
179+
width: 100%;
181180
}
182181

183-
.arduino-boards-toolbar-item .label {
182+
.arduino-boards-toolbar-item--label {
184183
height: 100%;
185184
display: flex;
186185
align-items: center;
187-
margin: 0 5px;
188186
width: 100%;
189187
}
190188

191-
.arduino-boards-toolbar-item .caret {
192-
width: 10px;
193-
margin-right: 5px;
189+
.arduino-boards-toolbar-item--label-connected {
190+
font-weight: 700;
194191
}
195192

196-
.arduino-boards-toolbar-item {
197-
background: var(--theia-tab-unfocusedActiveBackground);
198-
color: var(--theia-foreground);
199-
height: 22px;
200-
display: flex;
201-
width: 100%;
202-
overflow: hidden;
203-
margin: 0px 3px 0px 3px;
204-
border: 1px solid var(--theia-dropdown-border);
193+
.arduino-boards-toolbar-item-container .caret {
194+
width: 10px;
195+
margin-right: 5px;
205196
}
206197

207198
.arduino-boards-dropdown-list {
208-
border: 3px solid var(--theia-activityBar-background);
209199
margin: -1px;
210200
z-index: 1;
211-
border: 1px solid var(--theia-dropdown-border);
201+
border: 1px solid var(--theia-menu-selectionBackground);
202+
}
203+
204+
.arduino-boards-dropdown-list--items-container {
205+
overflow: auto;
206+
max-height: 404px;
207+
}
208+
209+
.arduino-boards-dropdown-list--items-container::-webkit-scrollbar {
210+
background: var(--theia-tab-unfocusedActiveBackground);
212211
}
213212

214213
.arduino-boards-dropdown-item {
215-
font-size: var(--theia-ui-font-size1);
214+
background: var(--theia-tab-unfocusedActiveBackground);
215+
color: var(--theia-foreground);
216+
cursor: default;
216217
display: flex;
218+
font-size: var(--theia-ui-font-size1);
219+
gap: 10px;
220+
justify-content: space-between;
217221
padding: 10px;
218-
cursor: pointer;
219-
color: var(--theia-foreground);
220-
background: var(--theia-tab-unfocusedActiveBackground);
221-
border: 1px solid var(--theia-tab-unfocusedActiveBackground);
222222
}
223223

224-
.arduino-boards-dropdown-item .fa-check {
225-
color: var(--theia-arduino-branding-primary);
226-
align-self: center;
224+
.arduino-boards-dropdown-item--label {
225+
flex: 1;
226+
}
227+
228+
.arduino-boards-dropdown-item--board-label {
229+
font-size: 14px;
230+
}
231+
232+
.arduino-boards-dropdown-item--port-label {
233+
color: #95A5A6;
234+
font-size: 12px;
227235
}
228236

229-
.arduino-boards-dropdown-item.selected,
230237
.arduino-boards-dropdown-item:hover {
231-
border: 1px solid var(--theia-focusBorder);
238+
background: var(--theia-list-hoverBackground);
239+
}
240+
241+
.arduino-boards-dropdown-item--selected,
242+
.arduino-boards-dropdown-item--selected:hover {
243+
background: var(--theia-menu-selectionBackground);
244+
border: 1px solid var(--theia-menu-selectionBackground);
245+
}
246+
247+
.arduino-boards-dropdown-item--selected
248+
.arduino-boards-dropdown-item--port-label {
249+
color: var(--theia-foreground);
250+
}
251+
252+
.arduino-boards-dropdown-item--selected .fa {
253+
color: #1DA086;
254+
}
255+
256+
.arduino-boards-dropdown-item .fa-check {
257+
align-self: center;
232258
}
233259

234260
.arduino-board-dropdown-footer {
235261
color: var(--theia-arduino-branding-primary);
236-
border-top: 1px solid var(--theia-dropdown-border);
262+
border-top: 1px solid var(--theia-menu-selectionBackground);
237263
}

arduino-ide-extension/src/browser/style/main.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,10 @@
102102
#arduino-toolbar-container {
103103
display: flex;
104104
width: 100%;
105+
justify-content: space-between;
105106
}
106107

107108
.p-TabBar-toolbar.theia-arduino-toolbar {
108-
flex: 1;
109109
z-index: 0;
110110
}
111111

@@ -119,7 +119,7 @@
119119

120120
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
121121
justify-content: flex-start;
122-
min-width: 190px;
122+
min-width: 100px;
123123
}
124124

125125
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.left {

0 commit comments

Comments
 (0)