Skip to content

[Toolbar] Hover style and Toggle State [ATL-1107][ATL-1045] #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 10, 2021
Merged

[Toolbar] Hover style and Toggle State [ATL-1107][ATL-1045] #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d04dba2
Support toggled state in arduino toolbar items
fstasi Mar 9, 2021
b331419
fix hover state on toolbar items
fstasi Mar 9, 2021
757e8d1
Improved statemanagement for ToolbarItem and Menus
fstasi Mar 9, 2021
7e94552
Disable Upload buttons while a sketch upload is already in progress
fstasi Mar 9, 2021
8858415
toggled state to have override disabled button opacity
fstasi Mar 9, 2021
cf3445a
doublecheck internal status before verify/upload a sketch
fstasi Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions arduino-ide-extension/src/browser/contributions/upload-sketch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,21 @@ export class UploadSketch extends SketchContribution {
@inject(BoardsServiceProvider)
protected readonly boardsServiceClientImpl: BoardsServiceProvider;

uploadInProgress = false;

registerCommands(registry: CommandRegistry): void {
registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
execute: () => this.uploadSketch()
execute: () => this.uploadSketch(),
isEnabled: () => !this.uploadInProgress,
});
registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER, {
execute: () => this.uploadSketch(true)
execute: () => this.uploadSketch(true),
isEnabled: () => !this.uploadInProgress,
});
registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR, {
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isEnabled: () => !this.uploadInProgress,
isToggled: () => this.uploadInProgress,
execute: () => registry.executeCommand(UploadSketch.Commands.UPLOAD_SKETCH.id)
});
}
Expand Down Expand Up @@ -69,6 +75,16 @@ export class UploadSketch extends SketchContribution {
}

async uploadSketch(usingProgrammer: boolean = false): Promise<void> {

// even with buttons disabled, better to double check if an upload is already in progress
if (this.uploadInProgress) {
return;
}

// toggle the toolbar button and menu item state.
// uploadInProgress will be set to false whether the upload fails or not
this.uploadInProgress = true;

const sketch = await this.sketchServiceClient.currentSketch();
if (!sketch) {
return;
Expand Down Expand Up @@ -131,6 +147,7 @@ export class UploadSketch extends SketchContribution {
} catch (e) {
this.messageService.error(e.toString());
} finally {
this.uploadInProgress = false;
if (monitorConfig) {
const { board, port } = monitorConfig;
try {
Expand Down
22 changes: 20 additions & 2 deletions arduino-ide-extension/src/browser/contributions/verify-sketch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,21 @@ export class VerifySketch extends SketchContribution {
@inject(BoardsServiceProvider)
protected readonly boardsServiceClientImpl: BoardsServiceProvider;

verifyInProgress = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a protected field, not a public mutable property. Same for the upload part.


registerCommands(registry: CommandRegistry): void {
registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
execute: () => this.verifySketch()
execute: () => this.verifySketch(),
isEnabled: () => !this.verifyInProgress,
});
registry.registerCommand(VerifySketch.Commands.EXPORT_BINARIES, {
execute: () => this.verifySketch(true)
execute: () => this.verifySketch(true),
isEnabled: () => !this.verifyInProgress,
});
registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
isEnabled: () => !this.verifyInProgress,
isToggled: () => this.verifyInProgress,
execute: () => registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id)
});
}
Expand Down Expand Up @@ -65,7 +71,17 @@ export class VerifySketch extends SketchContribution {
}

async verifySketch(exportBinaries?: boolean): Promise<void> {

// even with buttons disabled, better to double check if a verify is already in progress
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better to double check

Why? This code should not run if isEnabled is implemented correctly for the command handler. Did you experience a bug?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this check in order to future-proof the verify-sketch implementation:

https://arduino.atlassian.net/browse/ATL-1045 reports an error (Error: Request upload failed with message: 2 UNKNOWN: exit status 1) when a verify/build is run while another is in progress.

At the moment we only have buttons/menu items, but the check whether or not continue with the action should be inside the action handler itself in my opinion..

Do you have concerns about this approach?

if (this.verifyInProgress) {
return;
}

// toggle the toolbar button and menu item state.
// verifyInProgress will be set to false whether the compilation fails or not
this.verifyInProgress = true;
const sketch = await this.sketchServiceClient.currentSketch();

if (!sketch) {
return;
}
Expand All @@ -90,6 +106,8 @@ export class VerifySketch extends SketchContribution {
this.messageService.info('Done compiling.', { timeout: 1000 });
} catch (e) {
this.messageService.error(e.toString());
} finally {
this.verifyInProgress = false;
}
}

Expand Down
13 changes: 11 additions & 2 deletions arduino-ide-extension/src/browser/style/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,24 @@
background: var(--theia-arduino-toolbar-background);
}

.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
background: (--theia-arduino-toolbar-hoverBackground);
.p-TabBar-toolbar .item.arduino-tool-item:hover > div {
background: white;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot use hard-coded color so neither white nor rgb(255,204,0) is acceptable. We use VS Code themes, any new colors we want to use have to be derived from the available theme colors.

Here is the Theia doc: https://github.com/eclipse-theia/theia/pull/6475/files#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4ed

}

.arduino-verify-sketch--toolbar,
.arduino-upload-sketch--toolbar {
border-radius: 12px;
}

.item.arduino-tool-item.toggled {
background-color: unset;
opacity: 1;
}

.item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar {
background-color: rgb(255,204,0) !important;
}

.arduino-tool-icon {
height: 24px;
width: 24px;
Expand Down
8 changes: 7 additions & 1 deletion arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export namespace ArduinoToolbarComponent {
commands: CommandRegistry,
labelParser: LabelParser,
commandIsEnabled: (id: string) => boolean,
commandIsToggled: (id: string) => boolean,
executeCommand: (e: React.MouseEvent<HTMLElement>) => void
}
export interface State {
Expand All @@ -39,7 +40,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
}
}
const command = this.props.commands.getCommand(item.command);
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? 'enabled' : ''}`
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? 'enabled' : ''} ${command && this.props.commandIsToggled(command.id) ? 'toggled' : ''}`
return <div key={item.id} className={cls} >
<div className={item.id}>
<div
Expand Down Expand Up @@ -112,6 +113,10 @@ export class ArduinoToolbar extends ReactWidget {
protected commandIsEnabled(command: string): boolean {
return this.commands.isEnabled(command, this);
}
protected readonly doCommandIsToggled = (id: string) => this.commandIsToggled(id);
protected commandIsToggled(command: string): boolean {
return this.commands.isToggled(command, this);
}

protected render(): React.ReactNode {
return <ArduinoToolbarComponent
Expand All @@ -121,6 +126,7 @@ export class ArduinoToolbar extends ReactWidget {
items={[...this.items.values()]}
commands={this.commands}
commandIsEnabled={this.doCommandIsEnabled}
commandIsToggled={this.doCommandIsToggled}
executeCommand={this.executeCommand}
/>
}
Expand Down