From 99381829c3d06461d7ccba335ade777e29a24927 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 6 Dec 2022 00:56:30 +0200
Subject: [PATCH] RED-5673 - Help mode links overlay the open user menu

---
 .../base-screen/base-screen.component.html    | 20 ++++++++++---------
 .../dossier-details.component.html            |  1 +
 ...sier-overview-screen-header.component.html |  3 +++
 .../dossier-overview/config.service.ts        |  2 ++
 .../dossiers-listing/config.service.ts        | 11 +++++++++-
 .../file-workload.component.html              |  2 ++
 ...ile-preview-right-container.component.html |  1 +
 .../user-management.component.html            |  1 +
 .../expandable-file-actions.component.html    |  3 +++
 .../expandable-file-actions.component.ts      | 13 +++++++++++-
 .../team-members/team-members.component.html  |  1 +
 libs/common-ui                                |  2 +-
 12 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index a9c6bb4ef..f2d16cdf0 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -35,16 +35,18 @@
         <iqser-user-button [matMenuTriggerFor]="userMenu" id="userMenu"></iqser-user-button>
 
         <mat-menu #userMenu="matMenu" xPosition="before">
-            <ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
-                <a (click)="item.action?.()" *ngIf="item.show" [id]="item.id" [routerLink]="item.routerLink" mat-menu-item>
-                    {{ item.name | translate }}
-                </a>
-            </ng-container>
+            <div id="user-menu-items">
+                <ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
+                    <a (click)="item.action?.()" *ngIf="item.show" [id]="item.id" [routerLink]="item.routerLink" mat-menu-item>
+                        {{ item.name | translate }}
+                    </a>
+                </ng-container>
 
-            <button (click)="userService.logout()" id="logout" mat-menu-item>
-                <mat-icon svgIcon="iqser:logout"></mat-icon>
-                <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
-            </button>
+                <button (click)="userService.logout()" id="logout" mat-menu-item>
+                    <mat-icon svgIcon="iqser:logout"></mat-icon>
+                    <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
+                </button>
+            </div>
         </mat-menu>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
index 2ac0c31fc..e7f81d1d9 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -22,6 +22,7 @@
                     *allow="roles.dossiers.edit; if: currentUser.isManager"
                     [icon]="'iqser:edit'"
                     [iqserHelpMode]="'dashboard_in_dossier'"
+                    [overlappingElement]="'USER_MENU'"
                     [tooltipPosition]="'below'"
                     [tooltip]="'dossier-details.edit-owner' | translate"
                     class="ml-14"
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
index 3aeac614a..89c7a8f38 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html
@@ -11,6 +11,7 @@
             [dossier]="dossier"
             [files]="entitiesService.all$ | async"
             [iqserHelpMode]="'edit_dossier_in_dossier'"
+            [overlappingElement]="'USER_MENU'"
             [tooltipPosition]="'below'"
         ></redaction-file-download-btn>
 
@@ -20,6 +21,7 @@
             [disabled]="listingService.areSomeSelected$ | async"
             [icon]="'iqser:csv'"
             [iqserHelpMode]="'edit_dossier_in_dossier'"
+            [overlappingElement]="'USER_MENU'"
             [tooltipPosition]="'below'"
             [tooltip]="'dossier-overview.header-actions.download-csv' | translate"
         ></iqser-circle-button>
@@ -41,6 +43,7 @@
             [icon]="'iqser:upload'"
             [id]="'upload-document-btn'"
             [iqserHelpMode]="'edit_dossier_in_dossier'"
+            [overlappingElement]="'USER_MENU'"
             [tooltipPosition]="'below'"
             [tooltip]="'dossier-overview.header-actions.upload-document' | translate"
             [type]="circleButtonTypes.primary"
diff --git a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
index 7d305d603..503d5655b 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
@@ -11,6 +11,7 @@ import {
     ListingMode,
     ListingModes,
     NestedFilter,
+    OverlappingElements,
     TableColumnConfig,
     WorkflowColumn,
     WorkflowConfig,
@@ -160,6 +161,7 @@ export class ConfigService {
                 icon: 'iqser:edit',
                 hide: !this.currentUser.isManager && !this._iqserPermissionsService.has(ROLES.dossiers.edit),
                 helpModeKey: 'edit_dossier_in_dossier',
+                overlappingElement: OverlappingElements.USER_MENU,
                 disabled$,
             },
         ];
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/config.service.ts b/apps/red-ui/src/app/modules/dossiers-listing/config.service.ts
index 73f02491f..f4f5c4d3f 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/config.service.ts
@@ -1,5 +1,13 @@
 import { Injectable, TemplateRef } from '@angular/core';
-import { ButtonConfig, IFilterGroup, INestedFilter, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
+import {
+    ButtonConfig,
+    IFilterGroup,
+    INestedFilter,
+    keyChecker,
+    NestedFilter,
+    OverlappingElements,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import {
     annotationDefaultColorConfig,
     AnnotationShapeMap,
@@ -65,6 +73,7 @@ export class ConfigService {
                 icon: 'iqser:plus',
                 type: 'primary',
                 helpModeKey: 'new_dossier_button',
+                overlappingElement: OverlappingElements.USER_MENU,
             },
         ];
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
index 9477bf81c..0ff06f0a2 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
@@ -17,6 +17,7 @@
                 (click)="multiSelectService.activate()"
                 *ngIf="(multiSelectService.enabled$ | async) && (multiSelectInactive$ | async)"
                 [iqserHelpMode]="'workload_in_editor'"
+                [overlappingElement]="'USER_MENU'"
                 class="all-caps-label primary pointer"
                 translate="file-preview.tabs.annotations.select"
             ></div>
@@ -24,6 +25,7 @@
             <iqser-popup-filter
                 [actionsTemplate]="annotationFilterActionTemplate"
                 [iqserHelpMode]="'workload_in_editor'"
+                [overlappingElement]="'USER_MENU'"
                 [primaryFiltersSlug]="'primaryFilters'"
                 [secondaryFiltersSlug]="'secondaryFilters'"
             ></iqser-popup-filter>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
index 4cf9e2b41..4e20fe5af 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
@@ -21,6 +21,7 @@
             [annotations]="[annotation]"
             [canPerformAnnotationActions]="pdfProxyService.canPerformAnnotationActions$ | async"
             [iqserHelpMode]="getActionsHelpModeKey(annotation)"
+            [overlappingElement]="'USER_MENU'"
             [scrollableParentView]="scrollableParentView"
         ></redaction-annotation-actions>
     </ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
index 7985ef1cc..04857832d 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
@@ -37,6 +37,7 @@
             [icon]="'iqser:edit'"
             [id]="'change-assignee'"
             [iqserHelpMode]="'document_features_in_editor'"
+            [overlappingElement]="'USER_MENU'"
             [tooltipPosition]="'below'"
             [tooltip]="assignTooltip$ | async"
         ></iqser-circle-button>
diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.html b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.html
index a76e7f9cf..bc0959a85 100644
--- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.html
@@ -13,6 +13,7 @@
         [type]="btn.buttonType || buttonType"
         [iqserHelpMode]="helpModeKey"
         [scrollableParentView]="scrollableParentView"
+        [overlappingElement]="overlappingElement"
     ></iqser-circle-button>
 
     <!-- download redacted file-->
@@ -25,6 +26,7 @@
         [type]="buttonType"
         [iqserHelpMode]="helpModeKey"
         [scrollableParentView]="scrollableParentView"
+        [overlappingElement]="overlappingElement"
     ></redaction-file-download-btn>
 
     <!-- exclude from redaction -->
@@ -39,6 +41,7 @@
             [ngClass]="btn.class"
             [iqserHelpMode]="helpModeKey"
             [scrollableParentView]="scrollableParentView"
+            [overlappingElement]="overlappingElement"
             color="primary"
         ></mat-slide-toggle>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
index b795769e0..7dc7730c1 100644
--- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
@@ -1,6 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { Action, ActionTypes, File } from '@red/domain';
-import { CircleButtonType, IqserTooltipPosition, ScrollableParentView, ScrollableParentViews, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonType,
+    IqserTooltipPosition,
+    OverlappingElements,
+    ScrollableParentView,
+    ScrollableParentViews,
+    Toaster,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { PermissionsService } from '@services/permissions.service';
@@ -88,4 +95,8 @@ export class ExpandableFileActionsComponent implements OnChanges {
         button.action($event);
         this.matMenu.closeMenu();
     }
+
+    get overlappingElement() {
+        return this.helpModeKey === 'document_features_in_editor' ? OverlappingElements.USER_MENU : undefined;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html
index 77d431388..50284ec6f 100644
--- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html
@@ -23,6 +23,7 @@
         [class.large-spacing]="largeSpacing"
         [icon]="'iqser:plus'"
         [iqserHelpMode]="'edit_dossier_members'"
+        [overlappingElement]="'USER_MENU'"
         [size]="32"
         [tooltip]="'dossier-details.assign-members' | translate"
         [type]="circleButtonTypes.primary"
diff --git a/libs/common-ui b/libs/common-ui
index 70938dcea..be87af014 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 70938dcea23f80cb8cffefc371122079b3ec79b7
+Subproject commit be87af01477ef705491833fbbade5278af7fa4fe