fix(webapp): session toolbar loading issues (#1106)

* fix(webapp): session toolbar loading issues Issue: DGW-230 * fix(webapp): fix syntax issue from resolving conflicts. * fix(webapp) fix syntax issues.
Devolutions · Nov 14, 2024 · 1442a1d · 1442a1d
1 parent 1195345
commit 1442a1d
Show file tree

Hide file tree

Showing 9 changed files with 1,839 additions and 2,134 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.html b/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.html
@@ -7,47 +7,11 @@
       [isFormExists]="true"></web-client-form>
   </div>
 
-  <div #sessionToolbar
-       id="sessionToolbar"
-       *ngIf="!isFullScreenMode || (isFullScreenMode && showToolbarDiv)"
-       [ngClass]="isFullScreenMode?'session-toolbar-layer':''"
-       class="session-toolbar">
-
-    <div class="session-toolbar-left-group">
-
-    </div>
-
-    <div class="session-toolbar-middle-group">
-      <p-button
-        (onClick)="scaleTo(screenScale.Full)"
-        label="Full Screen"
-        icon="dvl-icon dvl-icon-fullscreen"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-
-      <p-button
-        (onClick)="scaleTo(screenScale.Fit)"
-        label="Fit to Screen"
-        icon="dvl-icon dvl-icon-minimize"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-      <p-button
-        (onClick)="scaleTo(screenScale.Real)"
-        label="Actual Size"
-        icon="dvl-icon dvl-icon-screen"
-        iconPos="left"></p-button>
-    </div>
-
-    <div class="session-toolbar-right-group">
-      <p-button (onClick)="startTerminationProcess()"
-                styleClass="other"
-                label="Close Session"
-                icon="dvl-icon dvl-icon-close"
-                iconPos="left"></p-button>
-    </div>
-  </div>
+  <session-toolbar
+    [sessionContainerParent]="sessionContainerElement"
+    [middleButtons]="middleToolbarButtons"
+    [rightButtons]="rightToolbarButtons">
+  </session-toolbar>
 
   <div class="loading-info-container" *ngIf="loading">
     <div class="loading-info">

diff --git a/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts b/webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts
@@ -64,6 +64,27 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
   showToolbarDiv = true;
   loading = true;
 
+  middleToolbarButtons = [
+    {
+      label: 'Fit to Screen',
+      icon: 'dvl-icon dvl-icon-minimize',
+      action: () => this.scaleTo(this.screenScale.Fit),
+    },
+    {
+      label: 'Actual Size',
+      icon: 'dvl-icon dvl-icon-screen',
+      action: () => this.scaleTo(this.screenScale.Real),
+    },
+  ];
+
+  rightToolbarButtons = [
+    {
+      label: 'Close Session',
+      icon: 'dvl-icon dvl-icon-close',
+      action: () => this.startTerminationProcess(),
+    },
+  ];
+
   protected removeElement = new Subject();
   private remoteClientEventListener: (event: Event) => void;
   private remoteClient: UserInteraction;

diff --git a/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.html b/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.html
@@ -7,59 +7,12 @@
       [isFormExists]="true"></web-client-form>
   </div>
 
-  <div #sessionToolbar
-       id="sessionToolbar"
-       *ngIf="!isFullScreenMode || (isFullScreenMode && showToolbarDiv)"
-       [ngClass]="isFullScreenMode?'session-toolbar-layer':''"
-       class="session-toolbar">
-
-    <div class="session-toolbar-left-group">
-      <p-button
-        (onClick)="sendWindowsKey()"
-        label="Start"
-        icon="dvl-icon dvl-icon-windows"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-
-      <p-button
-        (onClick)="sendCtrlAltDel()"
-        label="Ctrl+Alt+Del"
-        icon="dvl-icon dvl-icon-admin"
-        iconPos="left"></p-button>
-    </div>
-
-    <div class="session-toolbar-middle-group">
-      <p-button
-        (onClick)="scaleTo(screenScale.Full)"
-        label="Full Screen"
-        icon="dvl-icon dvl-icon-fullscreen"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-
-      <p-button
-        (onClick)="scaleTo(screenScale.Fit)"
-        label="Fit to Screen"
-        icon="dvl-icon dvl-icon-minimize"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-      <p-button
-        (onClick)="scaleTo(screenScale.Real)"
-        label="Actual Size"
-        icon="dvl-icon dvl-icon-screen"
-        iconPos="left"></p-button>
-    </div>
-
-    <div class="session-toolbar-right-group">
-      <p-button (onClick)="startTerminationProcess()"
-        styleClass="other"
-                label="Close Session"
-                icon="dvl-icon dvl-icon-close"
-                iconPos="left"></p-button>
-    </div>
-  </div>
+  <session-toolbar
+    [sessionContainerParent]="sessionContainerElement"
+    [leftButtons]="leftToolbarButtons"
+    [middleButtons]="middleToolbarButtons"
+    [rightButtons]="rightToolbarButtons">
+  </session-toolbar>
 
   <div class="loading-info-container" *ngIf="loading">
     <div class="loading-info">

diff --git a/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts b/webapp/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts
@@ -63,6 +63,40 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   showToolbarDiv = true;
   loading = true;
 
+  leftToolbarButtons = [
+    {
+      label: 'Start',
+      icon: 'dvl-icon dvl-icon-windows',
+      action: () => this.sendWindowsKey(),
+    },
+    {
+      label: 'Ctrl+Alt+Del',
+      icon: 'dvl-icon dvl-icon-admin',
+      action: () => this.sendCtrlAltDel(),
+    },
+  ];
+
+  middleToolbarButtons = [
+    {
+      label: 'Fit to Screen',
+      icon: 'dvl-icon dvl-icon-minimize',
+      action: () => this.scaleTo(this.screenScale.Fit),
+    },
+    {
+      label: 'Actual Size',
+      icon: 'dvl-icon dvl-icon-screen',
+      action: () => this.scaleTo(this.screenScale.Real),
+    },
+  ];
+
+  rightToolbarButtons = [
+    {
+      label: 'Close Session',
+      icon: 'dvl-icon dvl-icon-close',
+      action: () => this.startTerminationProcess(),
+    },
+  ];
+
   protected removeElement = new Subject();
   private remoteClientEventListener: (event: Event) => void;
   private remoteClient: UserInteraction;
@@ -331,7 +365,6 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   private initSessionEventHandler(): void {
     this.remoteClient.sessionListener.subscribe({
       next: (event: SessionEvent): void => {
-        console.log('event', event);
         switch (event.type) {
           case SessionEventType.STARTED:
             this.handleSessionStarted(event);

diff --git a/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.html b/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.html
@@ -7,59 +7,12 @@
       [isFormExists]="true"></web-client-form>
   </div>
 
-  <div #sessionToolbar
-       id="sessionToolbar"
-       *ngIf="!isFullScreenMode || (isFullScreenMode && showToolbarDiv)"
-       [ngClass]="isFullScreenMode?'session-toolbar-layer':''"
-       class="session-toolbar">
-
-    <div class="session-toolbar-left-group">
-      <p-button
-        (onClick)="sendWindowsKey()"
-        label="Start"
-        icon="dvl-icon dvl-icon-windows"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-
-      <p-button
-        (onClick)="sendCtrlAltDel()"
-        label="Ctrl+Alt+Del"
-        icon="dvl-icon dvl-icon-admin"
-        iconPos="left"></p-button>
-    </div>
-
-    <div class="session-toolbar-middle-group">
-      <p-button
-        (onClick)="scaleTo(screenScale.Full)"
-        label="Full Screen"
-        icon="dvl-icon dvl-icon-fullscreen"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-
-      <p-button
-        (onClick)="scaleTo(screenScale.Fit)"
-        label="Fit to Screen"
-        icon="dvl-icon dvl-icon-minimize"
-        iconPos="left"></p-button>
-
-      <div class="separator"></div>
-      <p-button
-        (onClick)="scaleTo(screenScale.Real)"
-        label="Actual Size"
-        icon="dvl-icon dvl-icon-screen"
-        iconPos="left"></p-button>
-    </div>
-
-    <div class="session-toolbar-right-group">
-      <p-button (onClick)="startTerminationProcess()"
-                styleClass="other"
-                label="Close Session"
-                icon="dvl-icon dvl-icon-close"
-                iconPos="left"></p-button>
-    </div>
-  </div>
+  <session-toolbar
+    [sessionContainerParent]="sessionContainerElement"
+    [leftButtons]="leftToolbarButtons"
+    [middleButtons]="middleToolbarButtons"
+    [rightButtons]="rightToolbarButtons">
+  </session-toolbar>
 
   <div class="loading-info-container" *ngIf="loading">
     <div class="loading-info">

diff --git a/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts b/webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts
@@ -64,6 +64,40 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
   showToolbarDiv = true;
   loading = true;
 
+  leftToolbarButtons = [
+    {
+      label: 'Start',
+      icon: 'dvl-icon dvl-icon-windows',
+      action: () => this.sendWindowsKey(),
+    },
+    {
+      label: 'Ctrl+Alt+Del',
+      icon: 'dvl-icon dvl-icon-admin',
+      action: () => this.sendCtrlAltDel(),
+    },
+  ];
+
+  middleToolbarButtons = [
+    {
+      label: 'Fit to Screen',
+      icon: 'dvl-icon dvl-icon-minimize',
+      action: () => this.scaleTo(this.screenScale.Fit),
+    },
+    {
+      label: 'Actual Size',
+      icon: 'dvl-icon dvl-icon-screen',
+      action: () => this.scaleTo(this.screenScale.Real),
+    },
+  ];
+
+  rightToolbarButtons = [
+    {
+      label: 'Close Session',
+      icon: 'dvl-icon dvl-icon-close',
+      action: () => this.startTerminationProcess(),
+    },
+  ];
+
   protected removeElement: Subject<unknown> = new Subject();
   private remoteClient: UserInteraction;
   private remoteClientEventListener: (event: Event) => void;

diff --git a/webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.html b/webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.html
@@ -11,7 +11,7 @@
                 [icon]="button.icon"
                 iconPos="left"></p-button>
 
-      <div class="separator"></div>
+      <div class="separator" *ngIf="!last"></div>
 
     </ng-container>
   </div>
@@ -31,7 +31,7 @@
                 [icon]="button.icon"
                 iconPos="left"></p-button>
 
-      <div class="separator"></div>
+      <div class="separator" *ngIf="!last"></div>
 
     </ng-container>
   </div>
@@ -43,7 +43,7 @@
                 [icon]="button.icon"
                 iconPos="left"></p-button>
 
-      <div class="separator" *ngIf="rightButtons.length > 1"></div>
+      <div class="separator" *ngIf="rightButtons.length > 1 && !last"></div>
 
     </ng-container>
   </div>

diff --git a/webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.scss b/webapp/src/client/app/shared/components/session-toolbar/session-toolbar.component.scss
@@ -29,7 +29,7 @@
   flex: 1;
 }
 
-.session-toolbar-right-group {
+.session-toolbar-right-group, .session-toolbar-left-group  {
   display: flex;
   align-items: center;
 }