diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 21e967d4..4675c552 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -56,4 +56,11 @@ .p-Widget.p-TabBar.theia-app-centers.theia-app-bottom .p-TabBar-content-container.ps { display: none; +} + +.arduino-toolbar-tooltip { + margin-left: 10px; + display: flex; + align-items: center; + color: var(--theia-ui-font-color3); } \ 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 e0ccef22..ac2ac327 100644 --- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx +++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx @@ -1,10 +1,57 @@ import * as React from 'react'; -import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; +import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem, ReactTabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; import { LabelParser } from '@theia/core/lib/browser/label-parser'; import { CommandRegistry } from '@theia/core/lib/common/command'; export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item'; +export namespace ArduinoToolbarComponent { + export interface Props { + items: (TabBarToolbarItem | ReactTabBarToolbarItem)[], + commands: CommandRegistry, + commandIsEnabled: (id: string) => boolean, + executeCommand: (e: React.MouseEvent) => void + } + export interface State { + tootip: string + } +} +export class ArduinoToolbarComponent extends React.Component { + + constructor(props: ArduinoToolbarComponent.Props) { + super(props); + this.state = {tootip: ''}; + } + + protected renderItem(item: TabBarToolbarItem): React.ReactNode { + let innerText = ''; + const command = this.props.commands.getCommand(item.command); + return +
+
this.setState({ tootip: item.tooltip || '' })} + onMouseOut={() => this.setState({ tootip: '' })} + title={item.tooltip}> + {innerText} +
+
+
; + } + + render(): React.ReactNode { + return +
{this.state.tootip}
+ {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())} +
; + } +} + export class ArduinoToolbar extends TabBarToolbar { constructor( @@ -27,13 +74,14 @@ export class ArduinoToolbar extends TabBarToolbar { this.update(); } - protected renderItem(item: TabBarToolbarItem): React.ReactNode { - let innerText = ''; - const command = this.commands.getCommand(item.command); - return
-
{innerText}
-
; + protected readonly doCommandIsEnabled = (id: string) => this.commandIsEnabled(id); + protected render(): React.ReactNode { + return } + } diff --git a/arduino-ide-extension/tsconfig.json b/arduino-ide-extension/tsconfig.json index 548f638b..8b8e760a 100644 --- a/arduino-ide-extension/tsconfig.json +++ b/arduino-ide-extension/tsconfig.json @@ -8,6 +8,7 @@ "noUnusedLocals": true, "strictNullChecks": true, "experimentalDecorators": true, + "downlevelIteration": true, "emitDecoratorMetadata": true, "module": "commonjs", "moduleResolution": "node",