mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-07-10 21:06: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
@ -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);
|
||||||
|
}
|
@ -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>;
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user