Added boards toolbar item.

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-06-24 18:00:17 +02:00
parent c54ae96a3c
commit 6195da3858
3 changed files with 65 additions and 4 deletions

View File

@ -27,6 +27,7 @@ import { ArduinoOpenSketchContextMenu } from './arduino-file-menu';
import { Sketch, SketchesService } from '../common/protocol/sketches-service';
import { WindowService } from '@theia/core/lib/browser/window/window-service';
import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution'
import { BoardsToolBarItem } from './components/boards-toolbar-item';
@injectable()
export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution {
@ -118,12 +119,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
});
registry.registerItem({
id: ConnectedBoards.TOOLBAR_ID,
render: () => <ConnectedBoards
boardsService={this.boardService}
boardsNotificationService={this.boardsNotificationService}
quickPickService={this.quickPickService}
render: () => <BoardsToolBarItem
onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
onUnknownBoard={this.onUnknownBoard.bind(this)} />,
// 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)
})
}

View File

@ -0,0 +1,38 @@
import * as React from 'react';
import { Board } from '../../common/protocol/boards-service';
export namespace BoardsToolBarItem {
export interface Props {
readonly onNoBoardsInstalled: () => void;
readonly onUnknownBoard: (board: Board) => void;
}
export interface State {
showOpenButton: boolean;
}
}
export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
constructor(props: BoardsToolBarItem.Props) {
super(props);
this.state = {
showOpenButton: false
}
}
render(): React.ReactNode {
return <React.Fragment>
<div className='arduino-boards-toolbar-item-container' onClick={() => this.setState({ showOpenButton: !this.state.showOpenButton })}>
<div className='arduino-boards-toolbar-item'>
<div className='inner-container'>
<div className='label'>Hallo</div>
{this.state.showOpenButton ? <div className='arduino-open-boards-button'> OPEN BOARDS DIALOG </div> : ''}
</div>
</div>
</div>
</React.Fragment>;
}
}

View File

@ -53,6 +53,25 @@
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 {
}
.arduino-boards-toolbar-item {
background: white;
height: 18px;
}
.arduino-tool-item.item.connected-boards select {
line-height: var(--theia-content-line-height);
font-size: var(--theia-ui-font-size1);