Added boards toolbar item.

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

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

@@ -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
+            render: () => <BoardsToolBarItem
-                boardsService={this.boardService}
-                boardsNotificationService={this.boardsNotificationService}
-                quickPickService={this.quickPickService}
                 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)
         })
     }

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

@@ -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>;
+    }
+}

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

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