Added the tooltip to the right of the toolbar

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-06-14 17:37:46 +02:00
parent f5560626e5
commit 2066f20d78
3 changed files with 65 additions and 9 deletions

View File

@ -57,3 +57,10 @@
.p-Widget.p-TabBar.theia-app-centers.theia-app-bottom .p-TabBar-content-container.ps { .p-Widget.p-TabBar.theia-app-centers.theia-app-bottom .p-TabBar-content-container.ps {
display: none; display: none;
} }
.arduino-toolbar-tooltip {
margin-left: 10px;
display: flex;
align-items: center;
color: var(--theia-ui-font-color3);
}

View File

@ -1,10 +1,57 @@
import * as React from 'react'; 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 { LabelParser } from '@theia/core/lib/browser/label-parser';
import { CommandRegistry } from '@theia/core/lib/common/command'; import { CommandRegistry } from '@theia/core/lib/common/command';
export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item'; 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 { export class ArduinoToolbar extends TabBarToolbar {
constructor( constructor(
@ -27,13 +74,14 @@ export class ArduinoToolbar extends TabBarToolbar {
this.update(); this.update();
} }
protected renderItem(item: TabBarToolbarItem): React.ReactNode { protected readonly doCommandIsEnabled = (id: string) => this.commandIsEnabled(id);
let innerText = ''; protected render(): React.ReactNode {
const command = this.commands.getCommand(item.command); return <ArduinoToolbarComponent
return <div key={item.id} items={[...this.items.values()]}
className={`${ARDUINO_TOOLBAR_ITEM_CLASS} commands={this.commands}
${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`} > commandIsEnabled={this.doCommandIsEnabled}
<div id={item.id} className='arduino-tool-icon' onClick={this.executeCommand} title={item.tooltip}>{innerText}</div> executeCommand={this.executeCommand}
</div>; />
} }
} }

View File

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