diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 2568f287..870b2766 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -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; diff --git a/arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx b/arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx index b4bc7dc7..f346e230 100644 --- a/arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx +++ b/arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx @@ -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 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 widget instanceof MonitorWidget, isVisible: widget => widget instanceof MonitorWidget, @@ -86,12 +84,21 @@ export class MonitorViewContribution extends AbstractViewContribution this.openView({ + toggle: true, + activate: true + }), + isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right' + }); + } } protected renderAutoScrollButton(): React.ReactNode { - return
@@ -104,9 +111,9 @@ export class MonitorViewContribution extends AbstractViewContribution
diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 8ebf4b32..ec011307 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -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; } diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts index 3f5e0852..17c13353 100644 --- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts +++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts @@ -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' - }) + }); } } \ No newline at end of file diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx index cbeb3dd3..c16af2f0 100644 --- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx +++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx @@ -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, @@ -29,25 +30,32 @@ export class ArduinoToolbarComponent extends React.Component -
this.setState({ tooltip: item.tooltip || '' })} - onMouseOut={() => this.setState({ tooltip: '' })} - title={item.tooltip}> - {innerText} -
+ className={cls} > +
this.setState({ tooltip: item.tooltip || '' })} + onMouseOut={() => this.setState({ tooltip: '' })} + title={item.tooltip}> + {innerText}
+ } render(): React.ReactNode { - return -
{this.state.tooltip}
- {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())} -
; + if (this.props.side === 'left') { + return +
{this.state.tooltip}
+ {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())} +
; + } else { + return + {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())} +
{this.state.tooltip}
+
; + } } } @@ -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