mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-07-10 04:46:33 +00:00
Added the tooltip to the right of the toolbar
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
parent
f5560626e5
commit
2066f20d78
@ -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);
|
||||
}
|
@ -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}
|
||||
/>
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -8,6 +8,7 @@
|
||||
"noUnusedLocals": true,
|
||||
"strictNullChecks": true,
|
||||
"experimentalDecorators": true,
|
||||
"downlevelIteration": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
|
Loading…
x
Reference in New Issue
Block a user