Select Board Dialog Style and Layout

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/arduino-file-menu.ts

@@ -54,7 +54,7 @@ export class ArduinoToolbarMenuContribution implements MenuContribution {
             });
             registry.registerMenuAction(ArduinoToolbarContextMenu.CONNECTED_GROUP, {
                 commandId: command.id,
-                label: board.name + (selectedPort === port ? '*' : '')
+                label: board.name + ' at ' + port + (selectedPort === port ? '*' : '')
             });
         });
     }

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -90,6 +90,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(SelectBoardsDialog)
     protected readonly selectBoardsDialog: SelectBoardsDialog;
 
+    protected boardsToolbarItem: BoardsToolBarItem | null;
+
     @postConstruct()
     protected async init(): Promise<void> {
         // This is a hack. Otherwise, the backend services won't bind.
@@ -124,15 +126,10 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         registry.registerItem({
             id: ConnectedBoards.TOOLBAR_ID,
             render: () => <BoardsToolBarItem
+                ref={ref => this.boardsToolbarItem = ref}
                 contextMenuRenderer={this.contextMenuRenderer}
-                onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
+                boardsNotificationService={this.boardsNotificationService}
-                onUnknownBoard={this.onUnknownBoard.bind(this)} />,
+                boardService={this.boardService} />,
-            // render: () => <ConnectedBoards
-            //     boardsService={this.boardService}
-            //     boardsNotificationService={this.boardsNotificationService}
-            //     quickPickService={this.quickPickService}
-            //     onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
-            //     onUnknownBoard={this.onUnknownBoard.bind(this)} />,
             isVisible: widget => this.isArduinoToolbar(widget)
         })
     }
@@ -230,31 +227,37 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         });
         registry.registerCommand(ArduinoCommands.SELECT_BOARD, {
             isEnabled: () => true,
-            execute: (board: Board) => {
+            execute: async (board: Board) => {
-                this.boardService.selectBoard(board).then(() => {
+                this.selectBoard(board);
-                    return this.boardService.getSelectBoard();
-                }).then(board => {
-                    console.log("and the selected board is", board);
-                })
             }
         })
         registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
             isEnabled: () => true,
             execute: async () => {
                 const boardAndPort = await this.selectBoardsDialog.open();
-                if(boardAndPort && boardAndPort.board){
+                if (boardAndPort && boardAndPort.board) {
                     const selectedBoard = {
                         fqbn: boardAndPort.board.fqbn,
                         name: boardAndPort.board.name,
                         port: boardAndPort.port
                     }
-                    this.boardService.selectBoard(selectedBoard);
+                    this.selectBoard(selectedBoard);
-
                 }
             }
         })
     }
 
+    protected async selectBoard(board: Board) {
+        const attached = await this.boardService.getAttachedBoards();
+        if(attached.boards.length) {
+            board = attached.boards.find(b => b.name === board.name && b.fqbn === board.fqbn) || board;
+        }
+        await this.boardService.selectBoard(board)
+        if (this.boardsToolbarItem) {
+            this.boardsToolbarItem.setSelectedBoard(board);
+        }
+    }
+
     protected async openSketchFilesInNewWindow(uri: string) {
         const location = new URL(window.location.href);
         location.searchParams.set('sketch', uri);
@@ -309,24 +312,24 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return widget;
     }
 
-    private async onNoBoardsInstalled() {
+    // private async onNoBoardsInstalled() {
-        const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
+    //     const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
-        if (!action) {
+    //     if (!action) {
-            return;
+    //         return;
-        }
+    //     }
 
-        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
+    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    }
+    // }
 
-    private async onUnknownBoard() {
+    // private async onUnknownBoard() {
-        const action = await this.messageService.warn("There's a board connected for which you need to install software." +
+    //     const action = await this.messageService.warn("There's a board connected for which you need to install software." +
-            " If this were not a PoC we would offer you the right package now.", "Open Boards Manager");
+    //         " If this were not a PoC we would offer you the right package now.", "Open Boards Manager");
-        if (!action) {
+    //     if (!action) {
-            return;
+    //         return;
-        }
+    //     }
 
-        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
+    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    }
+    // }
 
     private isArduinoToolbar(maybeToolbarWidget: any): boolean {
         if (maybeToolbarWidget instanceof ArduinoToolbar) {

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

@@ -1,20 +1,53 @@
 import * as React from 'react';
-import { Board } from '../../common/protocol/boards-service';
+import { BoardsService, Board } from '../../common/protocol/boards-service';
 import { ContextMenuRenderer } from '@theia/core/lib/browser';
 import { ArduinoToolbarContextMenu } from '../arduino-file-menu';
+import { BoardsNotificationService } from '../boards-notification-service';
 
 export namespace BoardsToolBarItem {
     export interface Props {
-        readonly onNoBoardsInstalled: () => void;
-        readonly onUnknownBoard: (board: Board) => void;
         readonly contextMenuRenderer: ContextMenuRenderer;
+        readonly boardsNotificationService: BoardsNotificationService;
+        readonly boardService: BoardsService;
+    }
+
+    export interface State {
+        selectedBoard?: Board;
+        selectedIsAttached: boolean
     }
 }
 
-export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, {}> {
+export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
+
+    protected attachedBoards: Board[];
 
     constructor(props: BoardsToolBarItem.Props) {
         super(props);
+
+        this.state = {
+            selectedBoard: undefined,
+            selectedIsAttached: true
+        };
+    }
+
+    componentDidMount() {
+        this.setAttachedBoards();
+    }
+
+    protected async setAttachedBoards() {
+        const { boards } = await this.props.boardService.getAttachedBoards();
+        this.attachedBoards = boards;
+        if(this.attachedBoards.length){
+            await this.props.boardService.selectBoard(this.attachedBoards[0]);
+            this.setSelectedBoard(this.attachedBoards[0]);
+        }
+    }
+
+    setSelectedBoard(board: Board) {
+        if (this.attachedBoards.length) {
+            this.setState({ selectedIsAttached: !!this.attachedBoards.find(attachedBoard => attachedBoard.name === board.name) });
+        }
+        this.setState({ selectedBoard: board });
     }
 
     protected readonly doShowSelectBoardsMenu = (event: React.MouseEvent<HTMLElement>) => this.showSelectBoardsMenu(event);
@@ -29,12 +62,13 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
     }
 
     render(): React.ReactNode {
-
         return <React.Fragment>
             <div className='arduino-boards-toolbar-item-container' onClick={this.doShowSelectBoardsMenu}>
                 <div className='arduino-boards-toolbar-item'>
                     <div className='inner-container'>
-                        <div className='label'>Show selected Board here</div>
+                        <span className={!this.state.selectedBoard || !this.state.selectedIsAttached ? 'fa fa-times notAttached' : ''}></span>
+                        <div className='label'>{this.state.selectedBoard ? this.state.selectedBoard.name : 'no board selected'}</div>
+                        <span className='fa fa-caret-down'></span>
                     </div>
                 </div>
             </div>

arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx

@@ -10,42 +10,84 @@ export interface BoardAndPortSelection {
     port?: string;
 }
 
-export namespace SelectableBoardsItem {
+export namespace BoardAndPortSelectableItem {
     export interface Props {
-        board: Board,
+        item: BoardAndPortSelection,
         selected: boolean,
-        onClick: (selection: BoardAndPortSelection) => void
+        onSelect: (selection: BoardAndPortSelection) => void
     }
 }
 
-export class SelectableBoardsItem extends React.Component<SelectableBoardsItem.Props> {
+export class BoardAndPortSelectableItem extends React.Component<BoardAndPortSelectableItem.Props> {
 
     render(): React.ReactNode {
-        return <div onClick={this.select} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.board.name}</div>
+        if (this.props.item.board || this.props.item.port) {
+            return <div onClick={this.select} className={`item ${this.props.selected ? 'selected' : ''}`}>
+                {this.props.item.board ? this.props.item.board.name : this.props.item.port}
+                {this.props.selected ? <i className='fa fa-check'></i> : ''}
+            </div>;
+        }
     }
 
     protected readonly select = (() => {
-        this.props.onClick({ board: this.props.board })
+        this.props.onSelect({ board: this.props.item.board, port: this.props.item.port })
     }).bind(this);
 }
 
-export namespace SelectablePortsItem {
+export namespace BoardAndPortSelectionList {
     export interface Props {
-        port: string,
+        type: 'boards' | 'ports';
-        selected: boolean,
+        list: BoardAndPortSelection[];
-        onClick: (selection: BoardAndPortSelection) => void
+        onSelect: (selection: BoardAndPortSelection) => void;
+    }
+
+    export interface State {
+        selection: BoardAndPortSelection
     }
 }
 
-export class SelectablePortsItem extends React.Component<SelectablePortsItem.Props> {
+export class BoardAndPortSelectionList extends React.Component<BoardAndPortSelectionList.Props, BoardAndPortSelectionList.State> {
+
+    constructor(props: BoardAndPortSelectionList.Props) {
+        super(props);
+
+        this.state = {
+            selection: {}
+        }
+    }
+
+    reset(): void {
+        this.setState({ selection: {} });
+    }
 
     render(): React.ReactNode {
-        return <div onClick={() => this.props.onClick({ port: this.props.port })} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.port}</div>
+        return <div className={`${this.props.type} list`}>
+            {this.props.list.map(item => <BoardAndPortSelectableItem
+                key={item.board ? item.board.name : item.port}
+                onSelect={this.doSelect}
+                item={item}
+                selected={this.isSelectedItem(item)}
+            />)}
+        </div>
     }
 
-    protected readonly select = (() => {
+    protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
-        this.props.onClick({ port: this.props.port })
+        this.setState({ selection: boardAndPortSelection });
-    }).bind(this);
+        this.props.onSelect(boardAndPortSelection);
+    }
+
+    protected readonly isSelectedItem = ((item: BoardAndPortSelection) => {
+        if (this.state.selection.board) {
+            return (this.state.selection.board === item.board);
+        } else if (this.state.selection.port) {
+            return (this.state.selection.port === item.port);
+        }
+        return false;
+    });
+
+    protected readonly isSelectedPort = ((port: string) => {
+        return (this.state.selection.port && this.state.selection.port === port) || false;
+    });
 }
 
 export namespace BoardAndPortSelectionComponent {
@@ -64,6 +106,8 @@ export namespace BoardAndPortSelectionComponent {
 export class BoardAndPortSelectionComponent extends React.Component<BoardAndPortSelectionComponent.Props, BoardAndPortSelectionComponent.State> {
 
     protected allBoards: Board[] = [];
+    protected boardListComponent: BoardAndPortSelectionList | null;
+    protected portListComponent: BoardAndPortSelectionList | null;
 
     constructor(props: BoardAndPortSelectionComponent.Props) {
         super(props);
@@ -80,6 +124,16 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
         this.setPorts();
     }
 
+    reset(): void {
+        if (this.boardListComponent) {
+            this.boardListComponent.reset();
+        }
+        if (this.portListComponent) {
+            this.portListComponent.reset();
+        }
+        this.setState({selection: {}});
+    }
+
     render(): React.ReactNode {
         return <React.Fragment>
             <div className='body'>
@@ -87,13 +141,16 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
                     <div className='content'>
                         <div className='title'>
                             BOARDS
-                    </div>
+                        </div>
                         <div className='search'>
                             <input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} />
+                            <i className='fa fa-search'></i>
                         </div>
-                        <div className='boards list'>
+                        <BoardAndPortSelectionList
-                            {this.state.boards.map(board => <SelectableBoardsItem key={board.name} onClick={this.doSelect} board={board} selected={this.isSelectedBoard(board)} />)}
+                            ref={ref => { this.boardListComponent = ref }}
-                        </div>
+                            type='boards'
+                            onSelect={this.doSelect}
+                            list={this.state.boards.map<BoardAndPortSelection>(board => ({ board }))} />
                     </div>
                 </div>
                 <div className='right container'>
@@ -101,35 +158,17 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
                         <div className='title'>
                             PORTS
                     </div>
-                        <div className='ports list'>
+                        <BoardAndPortSelectionList
-                            {this.state.ports.map(port => <SelectablePortsItem key={port} onClick={this.doSelect} port={port} selected={this.isSelectedPort(port)} />)}
+                            ref={ref => { this.portListComponent = ref }}
-                        </div>
+                            type='ports'
+                            onSelect={this.doSelect}
+                            list={this.state.ports.map<BoardAndPortSelection>(port => ({ port }))} />
                     </div>
                 </div>
             </div>
         </React.Fragment>
     }
 
-    protected readonly isSelectedBoard = ((board: Board) => {
-        return (this.state.selection.board && this.state.selection.board === board) || false;
-    });
-
-    protected readonly isSelectedPort = ((port: string) => {
-        return (this.state.selection.port && this.state.selection.port === port) || false;
-    });
-
-    protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
-        const selection = this.state.selection;
-        if (boardAndPortSelection.board) {
-            selection.board = boardAndPortSelection.board;
-        }
-        if (boardAndPortSelection.port) {
-            selection.port = boardAndPortSelection.port;
-        }
-        this.setState({ selection });
-        this.props.onSelect(this.state.selection);
-    }
-
     protected sort(items: Board[]): Board[] {
         return items.sort((a, b) => {
             if (a.name < b.name) {
@@ -142,6 +181,18 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
         });
     }
 
+    protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
+        const selection = this.state.selection;
+        if (boardAndPortSelection.board) {
+            selection.board = boardAndPortSelection.board;
+        }
+        if (boardAndPortSelection.port) {
+            selection.port = boardAndPortSelection.port;
+        }
+        this.setState({ selection });
+        this.props.onSelect(this.state.selection);
+    }
+
     protected readonly doFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
         const boards = this.allBoards.filter(board => board.name.toLowerCase().indexOf(event.target.value.toLowerCase()) >= 0);
         this.setState({ boards })
@@ -175,6 +226,7 @@ export class SelectBoardDialogWidget extends ReactWidget {
     protected readonly boardsNotificationService: BoardsNotificationService;
 
     protected readonly onChangedEmitter = new Emitter<BoardAndPortSelection>();
+    protected boardAndPortSelectionComponent: BoardAndPortSelectionComponent | null;
 
     boardAndPort: BoardAndPortSelection = {};
 
@@ -189,6 +241,13 @@ export class SelectBoardDialogWidget extends ReactWidget {
         return this.onChangedEmitter.event;
     }
 
+    reset(): void {
+        if (this.boardAndPortSelectionComponent) {
+            this.boardAndPortSelectionComponent.reset();
+        }
+        this.boardAndPort = {};
+    }
+
     protected fireChanged(boardAndPort: BoardAndPortSelection): void {
         this.onChangedEmitter.fire(boardAndPort);
     }
@@ -215,11 +274,12 @@ export class SelectBoardDialogWidget extends ReactWidget {
                         Select Other Board &amp; Port
                     </div>
                     <div className='text'>
-                        Select both a BOARD and a PORT if you want to upload a sketch.<br />
+                        <p>Select both a BOARD and a PORT if you want to upload a sketch.</p>
-                        If you only select a BOARD you will be able just to compile, but not to upload your sketch.
+                        <p>If you only select a BOARD you will be able just to compile,</p>
+                        <p>but not to upload your sketch.</p>
                     </div>
                 </div>
-                <BoardAndPortSelectionComponent boardsService={boardsService} onSelect={this.onSelect} />
+                <BoardAndPortSelectionComponent ref={ref => this.boardAndPortSelectionComponent = ref} boardsService={boardsService} onSelect={this.onSelect} />
             </div>
         </React.Fragment>
 

arduino-ide-extension/src/browser/boards/select-board-dialog.ts

@@ -44,7 +44,6 @@ export class SelectBoardsDialog extends AbstractDialog<BoardAndPortSelection> {
 
     protected onUpdateRequest(msg: Message) {
         super.onUpdateRequest(msg);
-
         this.widget.update();
     }
 
@@ -59,8 +58,8 @@ export class SelectBoardsDialog extends AbstractDialog<BoardAndPortSelection> {
     }
 
     protected isValid(value: BoardAndPortSelection): DialogError {
-        if(!value.board) {
+        if (!value.board) {
-            if(value.port) {
+            if (value.port) {
                 return 'Please pick the Board connected to the Port you have selected';
             }
             return false;
@@ -72,7 +71,13 @@ export class SelectBoardsDialog extends AbstractDialog<BoardAndPortSelection> {
         return this.widget.boardAndPort;
     }
 
-    protected async accept(): Promise<void> {
+    close(): void {
-        super.accept();
+        this.widget.reset();
+        super.close();
+    }
+
+    onAfterDetach(msg: Message) {
+        this.widget.reset();
+        super.onAfterDetach(msg);
     }
 }

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

@@ -86,7 +86,7 @@ is not optimized for dense, information rich UIs.
     --theia-brand-color3: var(--md-blue-100);
     /* Secondary Brand colors */
     --theia-secondary-brand-color0: var(--md-grey-700);
-    --theia-secondary-brand-color1: var(--md-grey-500);
+    --theia-secondary-brand-color1: #b5c8c9;
     --theia-secondary-brand-color2: var(--md-grey-300);
     --theia-secondary-brand-color3: var(--md-grey-100);
     /* Accent colors (dark to bright): Use these to create contrast to layout colors. */
@@ -147,7 +147,7 @@ is not optimized for dense, information rich UIs.
     /* Menu */
     --theia-menu-color0: var(--theia-layout-color3);
     --theia-menu-color1: var(--theia-layout-color0);
-    --theia-menu-color2: var(--theia-layout-color3);
+    --theia-menu-color2: #dae3e3;
     /* Statusbar */
     --theia-statusbar-color: var(--theia-arduino-light);
     --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
@@ -157,7 +157,7 @@ is not optimized for dense, information rich UIs.
     --theia-ui-button-color-hover: var(--theia-arduino-light1);
     --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
     --theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
-    --theia-ui-button-color-secondary-hover: var(--theia-secondary-brand-color0);
+    --theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
     --theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
     --theia-ui-button-color-disabled: var(--theia-accent-color3);
     --theia-ui-button-font-color-disabled: var(--theia-ui-font-color2);
@@ -170,7 +170,7 @@ is not optimized for dense, information rich UIs.
     --theia-ui-dialog-header-color: var(--theia-arduino-light);
     --theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
     --theia-ui-dialog-color: rgb(236, 241, 241);
-    --theia-ui-dialog-font-color: var(--theia-ui-font-color1);
+    --theia-ui-dialog-font-color: black;
     /* Variables */
     --theia-variable-name-color: #9B46B0;
     --theia-variable-value-color: rgba(108, 108, 108, 0.8);

arduino-ide-extension/src/browser/style/board-select-dialog.css

@@ -0,0 +1,152 @@
+div#select-board-dialog {
+    margin: 5px 20px 50px 20px;
+}
+
+div#select-board-dialog .selectBoardContainer .body {
+    display: flex;
+    overflow: hidden;
+}
+
+div#select-board-dialog .selectBoardContainer .head {
+    margin-bottom: 10px;
+}
+
+div#select-board-dialog .selectBoardContainer .head .title {
+    font-weight: 400;
+    letter-spacing: .02em;
+    font-size: 1.2em;
+    color: #00979d;
+    margin: 17px 0;
+}
+
+div#select-board-dialog .selectBoardContainer .head .text {
+    margin-bottom: 21px;
+}
+
+div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+    background: var(--theia-ui-button-color-secondary-hover);
+}
+
+div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
+    color: var(--theia-arduino-light);
+}
+
+#select-board-dialog .selectBoardContainer .body .search input, 
+#select-board-dialog .selectBoardContainer .body .boards.list,
+#select-board-dialog .selectBoardContainer .body .search, 
+#select-board-dialog .selectBoardContainer .body .ports.list {
+    background: white;
+}
+
+#select-board-dialog .selectBoardContainer .body .search input {
+    border: none;
+    width: 100%;
+    height: auto;
+    max-height: 37px;
+    padding: 10px 8px;
+    margin: 0;
+    vertical-align: top;
+    display: flex;
+    color: var(--theia-content-font-color0);
+}
+
+#select-board-dialog .selectBoardContainer .body .search input:focus {
+    box-shadow: none;
+}
+
+#select-board-dialog .selectBoardContainer .body .container {
+    flex: 1;
+}
+
+#select-board-dialog .selectBoardContainer .body .left.container .content {
+    margin: 0 5px 0 0;
+}
+
+#select-board-dialog .selectBoardContainer .body .right.container .content {
+    margin: 0 0 0 5px;
+}
+
+#select-board-dialog .selectBoardContainer .body .container .content .title{
+    color: #7f8c8d;
+    margin-bottom: 10px;
+}
+
+#select-board-dialog .selectBoardContainer .body .list .item {
+    padding: 10px 5px 10px 20px;
+    display: flex;
+    justify-content: space-between;
+}
+#select-board-dialog .selectBoardContainer .body .list .item:hover {
+    background: var(--theia-ui-button-color-secondary-hover);
+}
+
+#select-board-dialog .selectBoardContainer .body .list {
+    max-height: 265px;
+    overflow-y: auto;
+}
+
+#select-board-dialog .selectBoardContainer .body .search {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    padding-right: 5px;
+}
+
+.p-Widget.dialogOverlay .dialogBlock {
+    width: 740px;
+}
+
+button.theia-button {
+    height: 31px;
+}
+
+button.theia-button.secondary {
+    background-color: #b5c8c9;
+    color: #000;
+    box-shadow: 0 4px #95a5a6;
+}
+
+button.theia-button.main {
+    color: #fff;
+    background-color: #00979c;
+    box-shadow: 0 4px #005c5f;
+}
+
+.dialogControl {
+    margin: 0 20px 30px 0;
+}
+
+.arduino-boards-toolbar-item-container {
+    margin-left: 3px;
+}
+
+.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
+    display: flex;
+    align-items: baseline;
+    margin: 0 5px;
+}
+                    
+.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
+    width: 10px;
+    height: 10px;
+    color: red;
+    margin-right: 5px;
+}
+
+.arduino-boards-toolbar-item-container {
+    display: flex;
+    align-items: center;
+}
+
+.arduino-boards-toolbar-item .label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+}
+
+.arduino-boards-toolbar-item {
+    background: white;
+    height: 18px;
+}
+                    

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

@@ -1,3 +1,3 @@
 @import './list-widget.css';
-@import './select-board-dialog.css';
+@import './board-select-dialog.css';
-@import './main.css';
+@import './main.css';

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

@@ -53,25 +53,10 @@
     opacity: 1;
 }
 
-.arduino-boards-toolbar-item-container {
-    display: flex;
-    align-items: center;
-}
-
-.arduino-boards-toolbar-item .label {
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
 .arduino-open-boards-button {
     background: white;
 }
 
-.arduino-boards-toolbar-item {
-    background: white;
-    height: 18px;
-}
 
 .arduino-tool-item.item.connected-boards  select {
     line-height: var(--theia-content-line-height);
@@ -96,48 +81,4 @@
     display: flex;
     align-items: center;
     color: var(--theia-ui-font-color3);
-}
-
-div#select-board-dialog .selectBoardContainer .body {
-    display: flex;
-}
-
-div#select-board-dialog .selectBoardContainer .head {
-    margin-bottom: 10px;
-}
-
-div#select-board-dialog .selectBoardContainer .body .list .item.selected {
-    background: #aaaaaa;
-}
-
-#select-board-dialog .selectBoardContainer .body .search input, 
-#select-board-dialog .selectBoardContainer .body .boards.list,
-#select-board-dialog .selectBoardContainer .body .search, 
-#select-board-dialog .selectBoardContainer .body .ports.list {
-    background: white;
-}
-
-#select-board-dialog .selectBoardContainer .body .search input {
-    border: none;
-    width: 100%;
-}
-
-#select-board-dialog .selectBoardContainer .body .container {
-    flex: 1;
-}
-
-#select-board-dialog .selectBoardContainer .body .container .content {
-    margin: 0 5px;
-}
-
-#select-board-dialog .selectBoardContainer .body .list .item {
-    padding: 10px 5px 10px 20px;
-}
-
-#select-board-dialog .selectBoardContainer .body .list {
-    max-height: 265px;
-}
-
-#select-board-dialog .selectBoardContainer .body .search {
-    margin-bottom: 10px;
 }

arduino-ide-extension/src/browser/style/select-board-dialog.css

@@ -1,13 +0,0 @@
-
-.select-board-dialog {
-    width: 600px;
-}
-
-.select-board-dialog input {
-    width: calc(100% - 8px);
-    margin-bottom: 5px;
-}
-
-.select-board-dialog select {
-    width: 100%;
-}