Added the tooltip to the right of the toolbar

Signed-off-by: jbicker <jan.bicker@typefox.io>

Author: jbicker

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

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<HTMLElement>) => void
+    }
+    export interface State {
+        tootip: string
+    }
+}
+export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarComponent.Props, ArduinoToolbarComponent.State> {
+
+    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 <React.Fragment>
+            <div key={item.id}
+                className={`${ARDUINO_TOOLBAR_ITEM_CLASS} 
+                            ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}
+                            ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`} >
+                <div
+                    id={item.id}
+                    className='arduino-tool-icon'
+                    onClick={this.props.executeCommand}
+                    onMouseOver={() => this.setState({ tootip: item.tooltip || '' })}
+                    onMouseOut={() => this.setState({ tootip: '' })}
+                    title={item.tooltip}>
+                    {innerText}
+                </div>
+            </div>
+        </React.Fragment>;
+    }
+
+    render(): React.ReactNode {
+        return <React.Fragment>
+            <div className={'arduino-toolbar-tooltip'}>{this.state.tootip}</div>
+            {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
+        </React.Fragment>;
+    }
+}
+
 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 <div key={item.id}
-            className={`${ARDUINO_TOOLBAR_ITEM_CLASS} 
-        ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`} >
-            <div id={item.id} className='arduino-tool-icon' onClick={this.executeCommand} title={item.tooltip}>{innerText}</div>
-        </div>;
+    protected readonly doCommandIsEnabled = (id: string) => this.commandIsEnabled(id);
+    protected render(): React.ReactNode {
+        return <ArduinoToolbarComponent
+            items={[...this.items.values()]}
+            commands={this.commands}
+            commandIsEnabled={this.doCommandIsEnabled}
+            executeCommand={this.executeCommand}
+        />
     }
+
 }

arduino-ide-extension/tsconfig.json

@@ -8,6 +8,7 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "experimentalDecorators": true,
+    "downlevelIteration": true,
     "emitDecoratorMetadata": true,
     "module": "commonjs",
     "moduleResolution": "node",