Support toggled state in arduino toolbar items

Author: fstasi

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<void> {
+
+        this.verifyInProgress = true;
         const sketch = await this.sketchServiceClient.currentSketch();
+        this.verifyInProgress = false;
+
         if (!sketch) {
             return;
         }

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;

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<HTMLElement>) => void
     }
     export interface State {
@@ -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
@@ -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
@@ -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}
         />
     }