jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-08 01:48:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Select Board Dialog Style and Layout

Browse Source 
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker
2019-07-09 18:00:24 +02:00
parent 4429094139
commit a039597d40
10 changed files with 349 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>