diff --git a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts index dc8f7cd2..32bb0124 100644 --- a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts +++ b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts @@ -3,7 +3,7 @@ import { ContainerModule } from 'inversify'; import { WidgetFactory } from '@theia/core/lib/browser/widget-manager'; import { CommandContribution } from '@theia/core/lib/common/command'; import { bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution'; -import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; +import { TabBarToolbarContribution, TabBarToolbarFactory } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/ws-connection-provider'; import { FrontendApplicationContribution, FrontendApplication as TheiaFrontendApplication } from '@theia/core/lib/browser/frontend-application' import { LanguageGrammarDefinitionContribution } from '@theia/monaco/lib/browser/textmate'; @@ -39,7 +39,6 @@ import { MonacoStatusBarContribution } from './theia/monaco/monaco-status-bar-co import { ApplicationShell as TheiaApplicationShell, ShellLayoutRestorer as TheiaShellLayoutRestorer, - KeybindingContribution, CommonFrontendContribution as TheiaCommonFrontendContribution, KeybindingRegistry as TheiaKeybindingRegistry } from '@theia/core/lib/browser'; @@ -113,6 +112,7 @@ import { KeybindingRegistry } from './theia/core/keybindings'; import { WorkspaceCommandContribution } from './theia/workspace/workspace-commands'; import { WorkspaceDeleteHandler as TheiaWorkspaceDeleteHandler } from '@theia/workspace/lib/browser/workspace-delete-handler'; import { WorkspaceDeleteHandler } from './theia/workspace/workspace-delete-handler'; +import { TabBarToolbar } from './theia/core/tab-bar-toolbar'; const ElementQueries = require('css-element-queries/src/ElementQueries'); @@ -132,7 +132,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => { bind(CommandContribution).toService(ArduinoFrontendContribution); bind(MenuContribution).toService(ArduinoFrontendContribution); bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution); - bind(KeybindingContribution).toService(ArduinoFrontendContribution); bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution); bind(ColorContribution).toService(ArduinoFrontendContribution); @@ -292,6 +291,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => { rebind(TheiaKeybindingRegistry).to(KeybindingRegistry).inSingletonScope(); rebind(TheiaWorkspaceCommandContribution).to(WorkspaceCommandContribution).inSingletonScope(); rebind(TheiaWorkspaceDeleteHandler).to(WorkspaceDeleteHandler).inSingletonScope(); + rebind(TabBarToolbarFactory).toFactory(({ container: parentContainer }) => () => { + const container = parentContainer.createChild(); + container.bind(TabBarToolbar).toSelf().inSingletonScope(); + return container.get(TabBarToolbar); + }); // Show a disconnected status bar, when the daemon is not available bind(ApplicationConnectionStatusContribution).toSelf().inSingletonScope(); diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 5dee2e84..11dcbe9f 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -146,10 +146,9 @@ background-color: var(--theia-arduino-foreground); } -#arduino-open-sketch-control--toolbar { - background-color: var(--theia-tab-inactiveBackground); - border: 1px solid var(--theia-arduino-toolbar-background); - padding: 2px 0px 2px 9px; +#arduino-open-sketch-control--toolbar--container { + background-color: var(--theia-arduino-toolbar-background); + padding-left: 8px; /* based on pure heuristics */ } /* Output */ diff --git a/arduino-ide-extension/src/browser/theia/core/tab-bar-toolbar.tsx b/arduino-ide-extension/src/browser/theia/core/tab-bar-toolbar.tsx new file mode 100644 index 00000000..bc3a65a3 --- /dev/null +++ b/arduino-ide-extension/src/browser/theia/core/tab-bar-toolbar.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { injectable } from 'inversify'; +import { LabelIcon } from '@theia/core/lib/browser/label-parser'; +import { TabBarToolbar as TheiaTabBarToolbar, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; + +@injectable() +export class TabBarToolbar extends TheiaTabBarToolbar { + + /** + * Copied over from Theia. Added an ID to the parent of the toolbar item (`--container`). + * CSS3 does not support parent selectors but we want to style the parent of the toolbar item. + */ + protected renderItem(item: TabBarToolbarItem): React.ReactNode { + let innerText = ''; + const classNames = []; + if (item.text) { + for (const labelPart of this.labelParser.parse(item.text)) { + if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) { + const className = `fa fa-${labelPart.name}${labelPart.animation ? ' fa-' + labelPart.animation : ''}`; + classNames.push(...className.split(' ')); + } else { + innerText = labelPart; + } + } + } + const command = this.commands.getCommand(item.command); + const iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon || (command && command.iconClass); + if (iconClass) { + classNames.push(iconClass); + } + const tooltip = item.tooltip || (command && command.label); + return