From d04dba27f73fff5b931d15099ebdd32e4f352f6b Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 14:47:41 +0100 Subject: [PATCH 1/6] Support toggled state in arduino toolbar items --- .../src/browser/contributions/verify-sketch.ts | 7 +++++++ arduino-ide-extension/src/browser/style/main.css | 8 ++++++++ .../src/browser/toolbar/arduino-toolbar.tsx | 8 +++++++- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts index fe9b3e074..d0c9c73b1 100644 --- a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts +++ b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts @@ -18,6 +18,8 @@ export class VerifySketch extends SketchContribution { @inject(BoardsServiceProvider) protected readonly boardsServiceClientImpl: BoardsServiceProvider; + verifyInProgress = false; + registerCommands(registry: CommandRegistry): void { registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, { execute: () => this.verifySketch() @@ -27,6 +29,7 @@ export class VerifySketch extends SketchContribution { }); registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, { isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left', + isToggled: () => this.verifyInProgress, execute: () => registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id) }); } @@ -65,7 +68,11 @@ export class VerifySketch extends SketchContribution { } async verifySketch(exportBinaries?: boolean): Promise { + + this.verifyInProgress = true; const sketch = await this.sketchServiceClient.currentSketch(); + this.verifyInProgress = false; + if (!sketch) { return; } diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 8bb9d1253..9521e1eb4 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -24,6 +24,14 @@ border-radius: 12px; } +.item.arduino-tool-item.toggled { + background-color: unset; +} + +.item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar { + background-color: rgb(255,204,0) !important; +} + .arduino-tool-icon { height: 24px; width: 24px; diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx index f9b6b5ab0..91ea3f131 100644 --- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx +++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx @@ -13,6 +13,7 @@ export namespace ArduinoToolbarComponent { commands: CommandRegistry, labelParser: LabelParser, commandIsEnabled: (id: string) => boolean, + commandIsToggled: (id: string) => boolean, executeCommand: (e: React.MouseEvent) => void } export interface State { @@ -39,7 +40,7 @@ export class ArduinoToolbarComponent extends React.Component
this.commandIsToggled(id); + protected commandIsToggled(command: string): boolean { + return this.commands.isToggled(command, this); + } protected render(): React.ReactNode { return } From b33141996ec7f8e565f4e944a360f713bf5cd835 Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 14:47:58 +0100 Subject: [PATCH 2/6] fix hover state on toolbar items --- arduino-ide-extension/src/browser/style/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 9521e1eb4..c0b1d50a1 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -15,8 +15,8 @@ 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; } .arduino-verify-sketch--toolbar, From 757e8d19fd20030f88fb08016d9c3322ff62fa34 Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 17:01:00 +0100 Subject: [PATCH 3/6] Improved statemanagement for ToolbarItem and Menus --- .../src/browser/contributions/verify-sketch.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts index d0c9c73b1..b113fc58c 100644 --- a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts +++ b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts @@ -22,13 +22,16 @@ export class VerifySketch extends SketchContribution { 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) }); @@ -69,10 +72,11 @@ export class VerifySketch extends SketchContribution { async verifySketch(exportBinaries?: boolean): Promise { + // 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(); - this.verifyInProgress = false; - + if (!sketch) { return; } @@ -97,6 +101,8 @@ export class VerifySketch extends SketchContribution { this.messageService.info('Done compiling.', { timeout: 1000 }); } catch (e) { this.messageService.error(e.toString()); + } finally { + this.verifyInProgress = false; } } From 7e945522dcce4f7f58d5ecdd56187d1776444cfb Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 17:01:26 +0100 Subject: [PATCH 4/6] Disable Upload buttons while a sketch upload is already in progress --- .../src/browser/contributions/upload-sketch.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/arduino-ide-extension/src/browser/contributions/upload-sketch.ts b/arduino-ide-extension/src/browser/contributions/upload-sketch.ts index 4f0109aa8..c17b723d5 100644 --- a/arduino-ide-extension/src/browser/contributions/upload-sketch.ts +++ b/arduino-ide-extension/src/browser/contributions/upload-sketch.ts @@ -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) }); } @@ -69,6 +75,11 @@ export class UploadSketch extends SketchContribution { } async uploadSketch(usingProgrammer: boolean = false): Promise { + + // 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; @@ -131,6 +142,7 @@ export class UploadSketch extends SketchContribution { } catch (e) { this.messageService.error(e.toString()); } finally { + this.uploadInProgress = false; if (monitorConfig) { const { board, port } = monitorConfig; try { From 885841549e883bc969a2930fd4887c89b53ed712 Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 17:04:49 +0100 Subject: [PATCH 5/6] toggled state to have override disabled button opacity --- arduino-ide-extension/src/browser/style/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index c0b1d50a1..e7341c006 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -26,6 +26,7 @@ .item.arduino-tool-item.toggled { background-color: unset; + opacity: 1; } .item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar { From cf3445af4770193df257d2a2978f7e29781a7f34 Mon Sep 17 00:00:00 2001 From: Francesco Stasi Date: Tue, 9 Mar 2021 17:11:05 +0100 Subject: [PATCH 6/6] doublecheck internal status before verify/upload a sketch --- .../src/browser/contributions/upload-sketch.ts | 5 +++++ .../src/browser/contributions/verify-sketch.ts | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/arduino-ide-extension/src/browser/contributions/upload-sketch.ts b/arduino-ide-extension/src/browser/contributions/upload-sketch.ts index c17b723d5..82fc23ebe 100644 --- a/arduino-ide-extension/src/browser/contributions/upload-sketch.ts +++ b/arduino-ide-extension/src/browser/contributions/upload-sketch.ts @@ -76,6 +76,11 @@ export class UploadSketch extends SketchContribution { async uploadSketch(usingProgrammer: boolean = false): Promise { + // 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; diff --git a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts index b113fc58c..4301d571d 100644 --- a/arduino-ide-extension/src/browser/contributions/verify-sketch.ts +++ b/arduino-ide-extension/src/browser/contributions/verify-sketch.ts @@ -72,6 +72,11 @@ export class VerifySketch extends SketchContribution { async verifySketch(exportBinaries?: boolean): Promise { + // even with buttons disabled, better to double check if a verify is already in progress + 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;