jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-24 11:46:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added the tooltip to the right of the toolbar

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
arduino-ide-extension/src/browser/style/main.css
View File

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

66
arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
View File

@ -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}
/>
}
}

1
arduino-ide-extension/tsconfig.json
View File

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