refactor(webapp): add 'on' and 'off' states for Toggle Cursor Button (#1337)

Author: RRRadicalEdward

webapp/src/client/app/modules/web-client/ard/web-client-ard.component.html

@@ -10,6 +10,7 @@
   <session-toolbar
     [sessionContainerParent]="sessionContainerElement"
     [middleButtons]="middleToolbarButtons"
+    [middleToggleButtons]="middleToolbarToggleButtons"
     [rightButtons]="rightToolbarButtons">
   </session-toolbar>
 

webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts

@@ -78,10 +78,14 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
       icon: 'dvl-icon dvl-icon-screen',
       action: () => this.scaleTo(this.screenScale.Real),
     },
+  ];
+
+  middleToolbarToggleButtons = [
     {
       label: 'Toggle Cursor Kind',
-      icon: 'dvl-icon dvl-icon-toggle',
+      icon: 'dvl-icon dvl-icon-cursor',
       action: () => this.toggleCursorKind(),
+      isActive: () => !this.cursorOverrideActive,
     },
   ];
 

webapp/src/client/app/modules/web-client/form/form-controls/enable-display-configuration-control/enable-display-configuration-control.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { BaseComponent } from '@shared/bases/base.component';
+import { ArdQualityMode } from '@shared/enums/ard-quality-mode.enum';
 import { WebFormService } from '@shared/services/web-form.service';
 
 @Component({

webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.html

@@ -11,6 +11,7 @@
     [sessionContainerParent]="sessionContainerElement"
     [leftButtons]="leftToolbarButtons"
     [middleButtons]="middleToolbarButtons"
+    [middleToggleButtons]="middleToolbarToggleButtons"
     [rightButtons]="rightToolbarButtons"
     [checkboxes]="checkboxes">
   </session-toolbar>

webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts

@@ -64,6 +64,7 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   rdpError: { kind: string; backtrace: string };
   isFullScreenMode = false;
   showToolbarDiv = true;
+  useUnicodeKeyboard = false;
   cursorOverrideActive = false;
 
   leftToolbarButtons = [
@@ -90,10 +91,14 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
       icon: 'dvl-icon dvl-icon-screen',
       action: () => this.scaleTo(this.screenScale.Real),
     },
+  ];
+
+  middleToolbarToggleButtons = [
     {
       label: 'Toggle Cursor Kind',
       icon: 'dvl-icon dvl-icon-cursor',
       action: () => this.toggleCursorKind(),
+      isActive: () => !this.cursorOverrideActive,
     },
   ];
 
@@ -108,8 +113,11 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   checkboxes = [
     {
       label: 'Unicode Keyboard Mode',
-      checked: false,
-      action: (checked: boolean) => this.setKeyboardUnicodeMode(checked),
+      action: () => {
+        this.useUnicodeKeyboard = !this.useUnicodeKeyboard;
+        this.setKeyboardUnicodeMode(this.useUnicodeKeyboard);
+      },
+      isChecked: () => this.useUnicodeKeyboard,
     },
   ];
 

webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.html

@@ -11,6 +11,7 @@
     [sessionContainerParent]="sessionContainerElement"
     [leftButtons]="leftToolbarButtons"
     [middleButtons]="middleToolbarButtons"
+    [middleToggleButtons]="middleToolbarToggleButtons"
     [rightButtons]="rightToolbarButtons">
   </session-toolbar>
 

webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts

@@ -98,10 +98,14 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
       icon: 'dvl-icon dvl-icon-screen',
       action: () => this.scaleTo(this.screenScale.Real),
     },
+  ];
+
+  middleToolbarToggleButtons = [
     {
       label: 'Toggle Cursor Kind',
-      icon: 'dvl-icon dvl-icon-toggle',
+      icon: 'dvl-icon dvl-icon-cursor',
       action: () => this.toggleCursorKind(),
+      isActive: () => !this.cursorOverrideActive,
     },
   ];
 

webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.html

@@ -34,11 +34,25 @@
       <div class="separator" *ngIf="!last"></div>
 
     </ng-container>
+
+    <div class="separator" *ngIf="middleToggleButtons.length > 0"></div>
+
+    <ng-container *ngFor="let button of middleToggleButtons; let i = index; let last = last">
+      <p-button (click)="button.action()"
+                [label]="button.label"
+                [icon]="button.icon"
+                iconPos="left"
+                [styleClass]="button.isActive() ? '' : 'p-button-inactive'">
+              </p-button>
+
+      <div class="separator" *ngIf="!last"></div>
+
+    </ng-container>
   </div>
 
   <div class="session-toolbar-middle-group" *ngIf="checkboxes.length > 0">
     <ng-container *ngFor="let checkbox of checkboxes; let i = index; let last = last">
-        <p-checkbox [(ngModel)]="checkbox.checked" (onChange)="checkbox.action(checkbox.checked)"
+        <p-checkbox (onChange)="checkbox.action()"
                   [label]="checkbox.label" [binary]="true"></p-checkbox>
 
         <div class="separator" *ngIf="checkboxes.length > 1 && !last"></div>

webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.scss

@@ -76,3 +76,7 @@
   flex-direction: column;
   height: 100%;
 }
+
+::ng-deep .p-button-inactive .p-button-icon {
+  color: gray !important;
+}

webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.ts

@@ -21,6 +21,13 @@ export class SessionToolbarComponent {
     action: () => void;
   }[] = [];
 
+  @Input() middleToggleButtons: {
+    label: string;
+    icon: string;
+    action: () => void;
+    isActive: () => boolean;
+  }[] = [];
+
   @Input() rightButtons: {
     label: string;
     icon: string;
@@ -29,8 +36,8 @@ export class SessionToolbarComponent {
 
   @Input() checkboxes: {
     label: string;
-    checked: boolean;
-    action: (checked: boolean) => void;
+    action: () => void;
+    isChecked: () => boolean;
   }[] = [];
 
   isFullScreenMode = false;