Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 1f1861e

Browse files
jbickerjbicker
committedJun 14, 2019
Adapted design of toolbar.
Signed-off-by: jbicker <[email protected]>
1 parent 6a956af commit 1f1861e

File tree

6 files changed

+947
-44
lines changed

6 files changed

+947
-44
lines changed
 

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
9999
isVisible: widget => this.isArduinoToolbar(widget),
100100
isEnabled: widget => this.isArduinoToolbar(widget),
101101
execute: async () => {
102-
const widget = this.editorManager.currentEditor;
102+
const widget = this.getCurrentWidget();
103103
if (widget instanceof EditorWidget) {
104104
await widget.saveable.save();
105105
}
@@ -120,7 +120,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
120120
isVisible: widget => this.isArduinoToolbar(widget),
121121
isEnabled: widget => this.isArduinoToolbar(widget),
122122
execute: async () => {
123-
const widget = this.editorManager.currentEditor;
123+
const widget = this.getCurrentWidget();
124124
if (widget instanceof EditorWidget) {
125125
await widget.saveable.save();
126126
}
@@ -148,7 +148,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
148148
await this.sketchFactory.createNewSketch(uri);
149149
} catch (e) {
150150
await this.messageService.error(e.toString());
151-
}
151+
}
152152
}
153153
}));
154154
registry.registerCommand(ArduinoCommands.REFRESH_BOARDS, {
@@ -157,13 +157,24 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
157157
})
158158
}
159159

160+
protected getCurrentWidget(): EditorWidget | undefined {
161+
let widget = this.editorManager.currentEditor;
162+
if (!widget) {
163+
const visibleWidgets = this.editorManager.all.filter(w => w.isVisible);
164+
if (visibleWidgets.length > 0) {
165+
widget = visibleWidgets[0];
166+
}
167+
}
168+
return widget;
169+
}
170+
160171
private async onNoBoardsInstalled() {
161172
const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
162173
if (!action) {
163174
return;
164175
}
165176

166-
this.boardsListWidgetFrontendContribution.openView({reveal: true});
177+
this.boardsListWidgetFrontendContribution.openView({ reveal: true });
167178
}
168179

169180
private async onUnknownBoard() {
@@ -173,7 +184,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
173184
return;
174185
}
175186

176-
this.boardsListWidgetFrontendContribution.openView({reveal: true});
187+
this.boardsListWidgetFrontendContribution.openView({ reveal: true });
177188
}
178189

179190
private isArduinoToolbar(maybeToolbarWidget: any): boolean {

‎arduino-ide-extension/src/browser/components/connected-boards.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { BoardsService, Board } from '../../common/protocol/boards-service';
33
// import { SelectBoardDialog } from './select-board-dialog';
44
import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
55
import { BoardsNotificationService } from '../boards-notification-service';
6+
import { ARDUINO_TOOLBAR_ITEM_CLASS } from '../toolbar/arduino-toolbar';
67

78
export class ConnectedBoards extends React.Component<ConnectedBoards.Props, ConnectedBoards.State> {
89
static TOOLBAR_ID: 'connected-boards-toolbar';
@@ -28,7 +29,7 @@ export class ConnectedBoards extends React.Component<ConnectedBoards.Props, Conn
2829
content = [ <option key="loading" value="0">{label}</option> ];
2930
}
3031

31-
return <div className={ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}>
32+
return <div className={`${ARDUINO_TOOLBAR_ITEM_CLASS} item ${ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}`}>
3233
<select disabled={!this.state.boards}
3334
onChange={this.onBoardSelect.bind(this)}
3435
value={this.state.selection}>

‎arduino-ide-extension/src/browser/icons/buttons.svg

Lines changed: 869 additions & 0 deletions
Loading

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,37 @@
99
#outputView {
1010
color: var(--theia-ui-font-color3);
1111
}
12+
13+
#arduino-verify.arduino-tool-icon {
14+
background: url(../icons/buttons.svg);
15+
background-size: 800%;
16+
background-position-x: 141px;
17+
background-position-y: 21px;
18+
}
19+
20+
#arduino-upload.arduino-tool-icon {
21+
background: url(../icons/buttons.svg);
22+
background-size: 800%;
23+
background-position-x: 117px;
24+
background-position-y: 21px;
25+
}
26+
27+
#arduino-verify.arduino-tool-icon:hover {
28+
background-position-y: 45px;
29+
}
30+
31+
#arduino-upload.arduino-tool-icon:hover {
32+
background-position-y: 45px;
33+
}
34+
35+
.p-TabBar-toolbar .item.arduino-tool-item {
36+
margin-left: 3px;
37+
}
38+
39+
.arduino-tool-item.item.connected-boards {
40+
opacity: 1;
41+
}
42+
43+
.arduino-tool-item.item.connected-boards select {
44+
background: var(--theia-layout-color0);
45+
}

‎arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
22
import { injectable, inject } from "inversify";
33
import { ArduinoToolbar } from "./arduino-toolbar";
4-
import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
4+
import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
5+
import { CommandRegistry } from "@theia/core/lib/common/command";
6+
import { LabelParser } from "@theia/core/lib/browser/label-parser";
57

68
@injectable()
79
export class ArduinoToolbarContribution implements FrontendApplicationContribution {
@@ -10,8 +12,9 @@ export class ArduinoToolbarContribution implements FrontendApplicationContributi
1012

1113
constructor(
1214
@inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
13-
@inject(TabBarToolbarFactory) protected tabBarToolBarFactory: () => TabBarToolbar) {
14-
this.toolbarWidget = new ArduinoToolbar(this.tabBarToolBarRegistry, this.tabBarToolBarFactory);
15+
@inject(CommandRegistry) protected commandRegistry: CommandRegistry,
16+
@inject(LabelParser) protected labelParser: LabelParser) {
17+
this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
1518
}
1619

1720
onStart(app: FrontendApplication) {

‎arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,39 @@
1-
import { Widget } from '@phosphor/widgets';
2-
import { Message } from '@phosphor/messaging';
3-
import { TabBarToolbar, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
1+
import * as React from 'react';
2+
import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
3+
import { LabelParser } from '@theia/core/lib/browser/label-parser';
4+
import { CommandRegistry } from '@theia/core/lib/common/command';
45

5-
export class ArduinoToolbar extends Widget {
6+
export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
67

7-
protected toolbar: TabBarToolbar | undefined;
8+
export class ArduinoToolbar extends TabBarToolbar {
89

910
constructor(
1011
protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
11-
protected readonly tabBarToolbarFactory: () => TabBarToolbar
12+
commands: CommandRegistry, labelParser: LabelParser
1213
) {
13-
super();
14+
super(commands, labelParser);
1415
this.id = 'arduino-toolbar';
1516
this.init();
16-
this.tabBarToolbarRegistry.onDidChange(() => this.update());
17-
}
18-
19-
protected onAfterAttach(msg: Message): void {
20-
if (this.toolbar) {
21-
if (this.toolbar.isAttached) {
22-
Widget.detach(this.toolbar);
23-
}
24-
Widget.attach(this.toolbar, this.node);
25-
}
26-
super.onAfterAttach(msg);
27-
}
28-
29-
protected onBeforeDetach(msg: Message): void {
30-
if (this.toolbar && this.toolbar.isAttached) {
31-
Widget.detach(this.toolbar);
32-
}
33-
super.onBeforeDetach(msg);
34-
}
35-
36-
protected onUpdateRequest(msg: Message): void {
37-
super.onUpdateRequest(msg);
38-
this.updateToolbar();
17+
this.tabBarToolbarRegistry.onDidChange(() => this.updateToolbar());
3918
}
4019

4120
protected updateToolbar(): void {
42-
if (!this.toolbar) {
43-
return;
44-
}
4521
const items = this ? this.tabBarToolbarRegistry.visibleItems(this) : [];
46-
this.toolbar.updateItems(items, this);
22+
this.updateItems(items, this);
4723
}
4824

4925
protected init(): void {
5026
this.node.classList.add('theia-arduino-toolbar');
51-
this.toolbar = this.tabBarToolbarFactory();
5227
this.update();
5328
}
29+
30+
protected renderItem(item: TabBarToolbarItem): React.ReactNode {
31+
let innerText = '';
32+
const command = this.commands.getCommand(item.command);
33+
return <div key={item.id}
34+
className={`${ARDUINO_TOOLBAR_ITEM_CLASS}
35+
${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`} >
36+
<div id={item.id} className='arduino-tool-icon' onClick={this.executeCommand} title={item.tooltip}>{innerText}</div>
37+
</div>;
38+
}
5439
}

0 commit comments

Comments
 (0)
Please sign in to comment.