jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-12 13:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added additional toolbar to the right of the toppanel.

Browse Source 
Added Toolbar button for toggling serial monitor and tooltips for serial monitor toolbar items.

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-08-15 15:11:31 +02:00
parent 76d0f5a464
commit dd69092afd
5 changed files with 100 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
View File

@ -48,6 +48,7 @@ import { BoardsConfig } from './boards/boards-config';
import { MonitorService } from '../common/protocol/monitor-service';
import { ConfigService } from '../common/protocol/config-service';
import { MonitorConnection } from './monitor/monitor-connection';
import { MonitorViewContribution } from './monitor/monitor-view-contribution';
export namespace ArduinoMenus {
export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@ -200,13 +201,19 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
commands={this.commands}
boardsServiceClient={this.boardsServiceClient}
boardService={this.boardsService} />,
isVisible: widget => this.isArduinoToolbar(widget)
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left'
});
registry.registerItem({
id: 'toggle-serial-monitor',
command: MonitorViewContribution.OPEN_SERIAL_MONITOR,
tooltip: 'Toggle Serial Monitor',
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
})
}
registerCommands(registry: CommandRegistry): void {
registry.registerCommand(ArduinoCommands.VERIFY, {
isVisible: widget => this.isArduinoToolbar(widget),
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isEnabled: widget => true,
execute: async () => {
const widget = this.getCurrentWidget();
@ -234,7 +241,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
}
});
registry.registerCommand(ArduinoCommands.UPLOAD, {
isVisible: widget => this.isArduinoToolbar(widget),
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isEnabled: widget => true,
execute: async () => {
const widget = this.getCurrentWidget();
@ -270,8 +277,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
}
});
registry.registerCommand(ArduinoCommands.SHOW_OPEN_CONTEXT_MENU, {
isVisible: widget => this.isArduinoToolbar(widget),
isEnabled: widget => this.isArduinoToolbar(widget),
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
execute: async (widget: Widget, target: EventTarget) => {
if (this.wsSketchCount) {
const el = (target as HTMLElement).parentElement;
@ -297,8 +304,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
}
})
registry.registerCommand(ArduinoCommands.SAVE_SKETCH, {
isEnabled: widget => this.isArduinoToolbar(widget),
isVisible: widget => this.isArduinoToolbar(widget),
isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
execute: async (sketch: Sketch) => {
registry.executeCommand(CommonCommands.SAVE_ALL.id);
}
@ -565,13 +572,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
return undefined;
}
private isArduinoToolbar(maybeToolbarWidget: any): boolean {
if (maybeToolbarWidget instanceof ArduinoToolbar) {
return true;
}
return false;
}
private toUri(arg: any): URI | undefined {
if (arg instanceof URI) {
return arg;

17
arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx
View File

@ -6,6 +6,7 @@ import { MenuModelRegistry, Command, CommandRegistry } from "@theia/core";
import { ArduinoMenus } from "../arduino-frontend-contribution";
import { TabBarToolbarContribution, TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
import { MonitorModel } from './monitor-model';
import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
export namespace SerialMonitor {
export namespace Commands {
@ -56,14 +57,12 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
async registerToolbarItems(registry: TabBarToolbarRegistry) {
registry.registerItem({
id: 'monitor-autoscroll',
tooltip: 'Toggle Autoscroll',
render: () => this.renderAutoScrollButton(),
isVisible: widget => widget instanceof MonitorWidget,
onDidChange: this.model.onChange
});
registry.registerItem({
id: 'monitor-timestamp',
tooltip: 'Toggle Timestamp',
render: () => this.renderTimestampButton(),
isVisible: widget => widget instanceof MonitorWidget,
onDidChange: this.model.onChange
@ -76,7 +75,6 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
}
registerCommands(commands: CommandRegistry): void {
super.registerCommands(commands);
commands.registerCommand(SerialMonitor.Commands.CLEAR_OUTPUT, {
isEnabled: widget => widget instanceof MonitorWidget,
isVisible: widget => widget instanceof MonitorWidget,
@ -86,12 +84,21 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
}
}
});
if (this.toggleCommand) {
commands.registerCommand(this.toggleCommand, {
execute: () => this.openView({
toggle: true,
activate: true
}),
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
});
}
}
protected renderAutoScrollButton(): React.ReactNode {
return <React.Fragment>
<div
title='Toggle Autoscroll'
className={`item enabled fa fa-angle-double-down arduino-monitor ${this.model.autoscroll ? 'toggled' : ''}`}
onClick={this.toggleAutoScroll}
></div>
@ -104,9 +111,9 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
}
protected renderTimestampButton(): React.ReactNode {
return <React.Fragment>
<div
title='Toggle Timestamp'
className={`item enabled fa fa-clock-o arduino-monitor ${this.model.timestamp ? 'toggled' : ''}`}
onClick={this.toggleTimestamp}
></div>

21
arduino-ide-extension/src/browser/style/main.css
View File

@ -11,6 +11,7 @@
cursor: text;
}
#toggle-serial-monitor.arduino-tool-icon:hover,
#arduino-verify.arduino-tool-icon:hover,
#arduino-save-file.arduino-tool-icon:hover,
#arduino-show-open-context-menu.arduino-tool-icon:hover,
@ -18,6 +19,7 @@
background-position-y: 60px;
}
#toggle-serial-monitor.arduino-tool-icon,
#arduino-verify.arduino-tool-icon,
#arduino-save-file.arduino-tool-icon,
#arduino-show-open-context-menu.arduino-tool-icon,
@ -54,10 +56,29 @@
background-position-x: 92px;
}
#toggle-serial-monitor {
background: url(../icons/buttons.svg);
background-size: 800%;
background-position-y: 28px;
background-position-x: 28px;
}
.p-TabBar-toolbar .item.arduino-tool-item {
margin-left: 3px;
}
#arduino-toolbar-container {
display: flex;
}
.p-TabBar-toolbar.theia-arduino-toolbar {
flex: 1;
}
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
justify-content: flex-start;
}
.arduino-tool-item.item.connected-boards {
opacity: 1;
}

24
arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
View File

@ -1,26 +1,40 @@
import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
import { FrontendApplicationContribution, FrontendApplication, Widget, Message } from "@theia/core/lib/browser";
import { injectable, inject } from "inversify";
import { ArduinoToolbar } from "./arduino-toolbar";
import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
import { CommandRegistry } from "@theia/core";
import { LabelParser } from "@theia/core/lib/browser/label-parser";
export class ArduinoToolbarContainer extends Widget {
constructor(protected left: ArduinoToolbar, protected right: ArduinoToolbar) {
super();
this.id = 'arduino-toolbar-container';
}
onAfterAttach(msg: Message) {
Widget.attach(this.left, this.node);
Widget.attach(this.right, this.node);
}
}
@injectable()
export class ArduinoToolbarContribution implements FrontendApplicationContribution {
protected toolbarWidget: ArduinoToolbar;
protected arduinoToolbarContainer: ArduinoToolbarContainer;
constructor(
@inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
@inject(CommandRegistry) protected commandRegistry: CommandRegistry,
@inject(LabelParser) protected labelParser: LabelParser) {
this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
const leftToolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser, 'left');
const rightToolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser, 'right');
this.arduinoToolbarContainer = new ArduinoToolbarContainer(leftToolbarWidget, rightToolbarWidget);
}
onStart(app: FrontendApplication) {
app.shell.addWidget(this.toolbarWidget, {
app.shell.addWidget(this.arduinoToolbarContainer, {
area: 'top'
})
});
}
}

21
arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
View File

@ -8,6 +8,7 @@ export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
export namespace ArduinoToolbarComponent {
export interface Props {
side: 'left' | 'right',
items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
commands: CommandRegistry,
commandIsEnabled: (id: string) => boolean,
@ -44,10 +45,17 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
}
render(): React.ReactNode {
if (this.props.side === 'left') {
return <React.Fragment>
<div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
{[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
</React.Fragment>;
} else {
return <React.Fragment>
{[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
<div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
</React.Fragment>;
}
}
}
@ -58,10 +66,11 @@ export class ArduinoToolbar extends ReactWidget {
constructor(
protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
protected readonly commands: CommandRegistry,
protected readonly labelParser: LabelParser
protected readonly labelParser: LabelParser,
public readonly side: 'left' | 'right'
) {
super();
this.id = 'arduino-toolbar';
this.id = side + '-arduino-toolbar';
this.addClass(TabBarToolbar.Styles.TAB_BAR_TOOLBAR);
this.init();
this.tabBarToolbarRegistry.onDidChange(() => this.updateToolbar());
@ -83,6 +92,7 @@ export class ArduinoToolbar extends ReactWidget {
protected init(): void {
this.node.classList.add('theia-arduino-toolbar');
this.node.classList.add(this.side);
this.update();
}
@ -93,6 +103,7 @@ export class ArduinoToolbar extends ReactWidget {
protected render(): React.ReactNode {
return <ArduinoToolbarComponent
side={this.side}
items={[...this.items.values()]}
commands={this.commands}
commandIsEnabled={this.doCommandIsEnabled}
@ -107,3 +118,9 @@ export class ArduinoToolbar extends ReactWidget {
}
}
}
export namespace ArduinoToolbar {
export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
return maybeToolbarWidget instanceof ArduinoToolbar;
}
}