From 6ff5405337f77e31f3aa03042c64453640b0455d Mon Sep 17 00:00:00 2001
From: jbicker <jan.bicker@typefox.io>
Date: Fri, 2 Aug 2019 10:18:25 +0200
Subject: [PATCH] show advanced mode button in top panel
Signed-off-by: jbicker <jan.bicker@typefox.io>
---
.../src/browser/arduino-commands.ts | 4 +-
.../browser/arduino-frontend-contribution.tsx | 50 +++++++++++--------
.../src/browser/arduino-frontend-module.ts | 4 +-
.../custom-common-frontend-contribution.ts | 4 +-
.../src/browser/style/main.css | 9 ++++
.../src/browser/toolbar/arduino-toolbar.tsx | 16 +++++-
6 files changed, 59 insertions(+), 28 deletions(-)
diff --git a/arduino-ide-extension/src/browser/arduino-commands.ts b/arduino-ide-extension/src/browser/arduino-commands.ts
index 9c8e1dd7..d0b3dcb7 100644
--- a/arduino-ide-extension/src/browser/arduino-commands.ts
+++ b/arduino-ide-extension/src/browser/arduino-commands.ts
@@ -39,7 +39,7 @@ export namespace ArduinoCommands {
id: "arduino-open-boards-dialog"
}
- export const TOGGLE_PRO_MODE: Command = {
- id: "arduino-toggle-pro-mode"
+ export const TOGGLE_ADVANCED_MODE: Command = {
+ id: "arduino-toggle-advanced-mode"
}
}
diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
index 5dabaac0..d55a3299 100644
--- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
+++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
@@ -53,9 +53,14 @@ export namespace ArduinoMenus {
export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
}
-export const ARDUINO_PRO_MODE: boolean = (() => {
- return window.localStorage.getItem('arduino-pro-mode') === 'true';
-})();
+export namespace ArduinoAdvancedMode {
+ export const LS_ID = 'arduino-advanced-mode';
+ export const TOGGLED: boolean = (() => {
+ const advancedModeStr = window.localStorage.getItem(LS_ID);
+ return advancedModeStr === 'true';
+ })();
+}
+
@injectable()
export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution, MenuContribution {
@@ -167,26 +172,22 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
registry.registerItem({
id: ArduinoCommands.VERIFY.id,
command: ArduinoCommands.VERIFY.id,
- tooltip: 'Verify',
- text: '$(check)'
+ tooltip: 'Verify'
});
registry.registerItem({
id: ArduinoCommands.UPLOAD.id,
command: ArduinoCommands.UPLOAD.id,
- tooltip: 'Upload',
- text: '$(arrow-right)'
+ tooltip: 'Upload'
});
registry.registerItem({
id: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
command: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
- tooltip: 'Open',
- text: '$(arrow-up)'
+ tooltip: 'Open'
});
registry.registerItem({
id: ArduinoCommands.SAVE_SKETCH.id,
command: ArduinoCommands.SAVE_SKETCH.id,
- tooltip: 'Save',
- text: '$(arrow-down)'
+ tooltip: 'Save'
});
registry.registerItem({
id: BoardsToolBarItem.TOOLBAR_ID,
@@ -203,7 +204,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
command: MonitorViewContribution.OPEN_SERIAL_MONITOR,
tooltip: 'Toggle Serial Monitor',
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
- })
+ });
+
+ registry.registerItem({
+ id: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+ command: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+ tooltip: 'Toggle Advanced Mode',
+ text: (ArduinoAdvancedMode.TOGGLED ? '$(toggle-on)' : '$(toggle-off)'),
+ isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
+ });
}
registerCommands(registry: CommandRegistry): void {
@@ -327,19 +336,20 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
this.boardsServiceClient.boardsConfig = boardsConfig;
}
}
- });
- registry.registerCommand(ArduinoCommands.TOGGLE_PRO_MODE, {
+ })
+ registry.registerCommand(ArduinoCommands.TOGGLE_ADVANCED_MODE, {
execute: () => {
- const oldModeState = ARDUINO_PRO_MODE;
- window.localStorage.setItem('arduino-pro-mode', oldModeState ? 'false' : 'true');
+ const oldModeState = ArduinoAdvancedMode.TOGGLED;
+ window.localStorage.setItem(ArduinoAdvancedMode.LS_ID, oldModeState ? 'false' : 'true');
registry.executeCommand('reset.layout');
},
- isToggled: () => ARDUINO_PRO_MODE
- });
+ isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right',
+ isToggled: () => ArduinoAdvancedMode.TOGGLED
+ })
}
registerMenus(registry: MenuModelRegistry) {
- if (!ARDUINO_PRO_MODE) {
+ if (!ArduinoAdvancedMode.TOGGLED) {
registry.unregisterMenuAction(FileSystemCommands.UPLOAD);
registry.unregisterMenuAction(FileDownloadCommands.DOWNLOAD);
@@ -376,7 +386,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
registry.registerMenuAction(CommonMenus.HELP, {
- commandId: ArduinoCommands.TOGGLE_PRO_MODE.id,
+ commandId: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
label: 'Advanced Mode'
})
}
diff --git a/arduino-ide-extension/src/browser/arduino-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-frontend-module.ts
index 645c96d0..c11aca32 100644
--- a/arduino-ide-extension/src/browser/arduino-frontend-module.ts
+++ b/arduino-ide-extension/src/browser/arduino-frontend-module.ts
@@ -8,7 +8,7 @@ import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/w
import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application'
import { LanguageGrammarDefinitionContribution } from '@theia/monaco/lib/browser/textmate';
import { LibraryListWidget } from './library/library-list-widget';
-import { ArduinoFrontendContribution, ARDUINO_PRO_MODE } from './arduino-frontend-contribution';
+import { ArduinoFrontendContribution, ArduinoAdvancedMode } from './arduino-frontend-contribution';
import { ArduinoLanguageGrammarContribution } from './language/arduino-language-grammar-contribution';
import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
import { BoardsService, BoardsServicePath, BoardsServiceClient } from '../common/protocol/boards-service';
@@ -188,7 +188,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
themeService.register(...ArduinoTheme.themes);
// customizing default theia
- if (!ARDUINO_PRO_MODE) {
+ if (!ArduinoAdvancedMode.TOGGLED) {
unbind(OutlineViewContribution);
bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
unbind(ProblemContribution);
diff --git a/arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts b/arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts
index 9a0cd92d..dc851a55 100644
--- a/arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts
@@ -1,12 +1,12 @@
import { injectable } from "inversify";
import { CommonFrontendContribution, CommonMenus, CommonCommands } from "@theia/core/lib/browser";
import { MenuModelRegistry } from "@theia/core";
-import { ARDUINO_PRO_MODE } from "../arduino-frontend-contribution";
+import { ArduinoAdvancedMode } from "../arduino-frontend-contribution";
@injectable()
export class CustomCommonFrontendContribution extends CommonFrontendContribution {
registerMenus(registry: MenuModelRegistry): void {
- if (!ARDUINO_PRO_MODE) {
+ if (!ArduinoAdvancedMode.TOGGLED) {
registry.registerSubmenu(CommonMenus.FILE, 'File');
registry.registerSubmenu(CommonMenus.EDIT, 'Edit');
diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css
index 64b777eb..6f898eb6 100644
--- a/arduino-ide-extension/src/browser/style/main.css
+++ b/arduino-ide-extension/src/browser/style/main.css
@@ -111,6 +111,15 @@
color: var(--theia-ui-font-color3);
}
+.p-TabBar-toolbar .item > div#arduino-toggle-advanced-mode {
+ display: flex;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ color: var(--theia-ui-font-color3);
+}
+
.monaco-editor .margin {
border-right: 2px solid var(--theia-border-color1);
box-sizing: border-box;
diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
index 2c6fd93e..ea05637a 100644
--- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
+++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem, ReactTabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
import { CommandRegistry } from '@theia/core/lib/common/command';
import { ReactWidget } from '@theia/core/lib/browser';
-import { LabelParser } from '@theia/core/lib/browser/label-parser';
+import { LabelParser, LabelIcon } from '@theia/core/lib/browser/label-parser';
export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
@@ -11,6 +11,7 @@ export namespace ArduinoToolbarComponent {
side: 'left' | 'right',
items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
commands: CommandRegistry,
+ labelParser: LabelParser,
commandIsEnabled: (id: string) => boolean,
executeCommand: (e: React.MouseEvent<HTMLElement>) => void
}
@@ -27,6 +28,16 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
protected renderItem = (item: TabBarToolbarItem) => {
let innerText = '';
+ let className = `${item.id} arduino-tool-icon`;
+ if (item.text) {
+ for (const labelPart of this.props.labelParser.parse(item.text)) {
+ if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
+ className += ` fa fa-${labelPart.name}`;
+ } else {
+ innerText = labelPart;
+ }
+ }
+ }
const command = this.props.commands.getCommand(item.command);
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
return <div key={item.id}
@@ -34,7 +45,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
<div
key={item.id + '-icon'}
id={item.id}
- className={`${item.id} arduino-tool-icon`}
+ className={className}
onClick={this.props.executeCommand}
onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
onMouseOut={() => this.setState({ tooltip: '' })}
@@ -105,6 +116,7 @@ export class ArduinoToolbar extends ReactWidget {
return <ArduinoToolbarComponent
key='arduino-toolbar-component'
side={this.side}
+ labelParser={this.labelParser}
items={[...this.items.values()]}
commands={this.commands}
commandIsEnabled={this.doCommandIsEnabled}