show advanced mode button in top panel

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-08-02 10:18:25 +02:00
parent 79731304c1
commit 6ff5405337
6 changed files with 59 additions and 28 deletions

View File

@ -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"
}
}

View File

@ -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'
})
}

View File

@ -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);

View File

@ -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');

View File

@ -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;

View File

@ -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}