From 6ff5405337f77e31f3aa03042c64453640b0455d Mon Sep 17 00:00:00 2001 From: jbicker Date: Fri, 2 Aug 2019 10:18:25 +0200 Subject: [PATCH] show advanced mode button in top panel Signed-off-by: jbicker --- .../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) => void } @@ -27,6 +28,16 @@ export class ArduinoToolbarComponent extends React.Component { 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
this.setState({ tooltip: item.tooltip || '' })} onMouseOut={() => this.setState({ tooltip: '' })} @@ -105,6 +116,7 @@ export class ArduinoToolbar extends ReactWidget { return