From 24fbe8de35943e3cf8308093721ee4fd1044c00d Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Sat, 12 Feb 2022 00:21:48 +0200
Subject: [PATCH 1/7] WIP on refactoring help mode logic

---
 src/assets/styles/common-help-mode.scss       | 10 +--
 src/lib/help-mode/help-mode.directive.ts      | 30 +++-----
 src/lib/help-mode/help-mode.service.ts        | 71 +++++++++++++------
 .../help-mode/help-mode.component.ts          | 10 ++-
 .../page-header/page-header.component.html    |  5 +-
 .../table-header/table-header.component.html  |  2 +-
 6 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss
index 9b1bb72..da99dd4 100644
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@@ -1,17 +1,11 @@
-.help-mode-on-mouse-over {
+.help-mode {
     z-index: 10;
     position: absolute;
-    top: -5px;
-    left: -5px;
-    width: 100%;
-    height: 100%;
-    padding-right: 5px;
-    padding-bottom: 10px;
     transition: all 0.25s;
 }
 
 .help-highlight,
-.help-mode-on-mouse-over:hover {
+.help-mode:hover {
     background: rgba(92, 229, 148, 0.5);
     box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
     cursor: help;
diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts
index d8e7e7d..0cf3b60 100644
--- a/src/lib/help-mode/help-mode.directive.ts
+++ b/src/lib/help-mode/help-mode.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
 import { HelpModeService } from './help-mode.service';
 import { Router } from '@angular/router';
 
@@ -24,28 +24,18 @@ export class HelpModeDirective implements OnInit {
     }
 
     private _createHelperElement() {
-        const elementNameWithId = `${this.elementName}-${this._getRandomId()}`;
+
         const element = this._elementRef.nativeElement as HTMLElement;
+        const helperElementName = `${this.elementName}-${this._generateId()}`;
 
-        if (!this._isDisabledElement()) {
-            const helperElement = this._renderer.createElement('div') as HTMLElement;
-            this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
-            this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
-
-            this._helpModeService.addElement(elementNameWithId, element, helperElement);
-        }
+        const helperElement = this._renderer.createElement('a') as HTMLElement;
+        this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
+        this._renderer.setAttribute(helperElement, 'target', '_blank');
+        this._renderer.addClass(helperElement, 'help-mode');
+        this._helpModeService.addElement(helperElementName, element, helperElement);
     }
 
-    private _isDisabledElement() {
-        return this._path === 'dossiers' && this.elementName === 'filter-for-status';
-    }
-
-    private _getRandomId(): string {
-        return Math.random().toString(36).substr(2, 9);
-    }
-
-
-    @HostListener('click') onClick(): void {
-        this._helpModeService.openDocsFor(this.elementName);
+    private _generateId(): string {
+        return Math.random().toString(36).substring(2, 9);
     }
 }
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index 8f22d07..fd2cba9 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -19,7 +19,7 @@ export class HelpModeService {
     private readonly _helpModeDialogIsOpened$ = new BehaviorSubject(false);
     readonly helpModeDialogIsOpened$ = this._helpModeDialogIsOpened$.asObservable();
 
-    private readonly _elements: Record<string, Helper> = {};
+    private readonly _helperElements: Record<string, Helper> = {};
     private readonly _renderer: Renderer2;
 
     constructor(
@@ -53,29 +53,29 @@ export class HelpModeService {
         return ref;
     }
 
-    openDocsFor(elementName: string): void {
-        if (this.isHelpModeActive) {
-            window.open(`${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`);
-        }
+    getDocsLink(elementName: string): string {
+        return `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`;
     }
 
     activateHelpMode(): void {
-        this._isHelpModeActive$.next(true);
-        this.openHelpModeDialog();
-        this._enableHelperElements();
+        if (!this.isHelpModeActive) {
+            this._isHelpModeActive$.next(true);
+            this.openHelpModeDialog();
+            setTimeout(() => {
+                this._enableHelperElements();
+            });
+        }
     }
 
     deactivateHelpMode(): void {
-        this._isHelpModeActive$.next(false);
-        this._disableHelperElements();
+        if (this.isHelpModeActive) {
+            this._isHelpModeActive$.next(false);
+            this._disableHelperElements();
+        }
     }
 
     highlightHelperElements(): void {
-        if (!this.isHelpModeActive) {
-            return;
-        }
-
-        Object.values(this._elements).forEach(({ helperElement }) => {
+        Object.values(this._helperElements).forEach(({ helperElement }) => {
             this._renderer.addClass(helperElement, 'help-highlight');
             setTimeout(() => {
                 this._renderer.removeClass(helperElement, 'help-highlight');
@@ -83,21 +83,46 @@ export class HelpModeService {
         });
     }
 
-    addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void {
-        this._elements[elementName] = { element, helperElement };
+    addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement): void {
+        this._helperElements[helperElementName] = { element, helperElement };
+    }
+
+    updateHelperElements() {
+        Object.values(this._helperElements).forEach(({element, helperElement }) => {
+            this._updateHelperElement(element, helperElement);
+        });
+    }
+
+    private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement) {
+        const dimensions = this._getElementDimensions(element);
+        helperElement.style.cssText = `
+                top:${dimensions.y}px;
+                left:${dimensions.x}px;
+                width:${dimensions.width}px;
+                height:${dimensions.height}px;
+            `;
     }
 
     private _enableHelperElements() {
-        Object.values(this._elements).forEach(({ element, helperElement }) => {
-            this._renderer.setStyle(element, 'position', 'relative');
-            this._renderer.appendChild(element, helperElement);
+        Object.values(this._helperElements).forEach(({ element, helperElement }) => {
+            document.body.appendChild(helperElement)
+            this._updateHelperElement(element, helperElement);
         });
     }
 
     private _disableHelperElements() {
-        Object.values(this._elements).forEach(({ element, helperElement }) => {
-            this._renderer.removeStyle(element, 'position');
-            this._renderer.removeChild(element, helperElement);
+        Object.values(this._helperElements).forEach(({ helperElement }) => {
+            document.body.removeChild(helperElement)
         });
     }
+
+    private _getElementDimensions(element: HTMLElement) {
+        const rect = element.getBoundingClientRect();
+        return {
+            y: rect.top + window.pageYOffset,
+            x: rect.left + window.pageXOffset,
+            height: rect.height,
+            width: rect.width,
+        };
+    }
 }
diff --git a/src/lib/help-mode/help-mode/help-mode.component.ts b/src/lib/help-mode/help-mode/help-mode.component.ts
index 39c246c..c9a189a 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.ts
+++ b/src/lib/help-mode/help-mode/help-mode.component.ts
@@ -25,6 +25,14 @@ export class HelpModeComponent {
     }
 
     @HostListener('click') onClick(): void {
-        this.helpModeService.highlightHelperElements();
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.highlightHelperElements();
+        }
+    }
+
+    @HostListener('window:resize') onResize(event: any) {
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.updateHelperElements();
+        }
     }
 }
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index ccdbc72..c79755f 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -1,7 +1,7 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" [iqserHelpMode]="helpModeKey" class="filters">
+    <div *ngIf="filters$ | async as filters" class="filters">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -16,7 +16,6 @@
             (click)="resetFilters()"
             *ngIf="showResetFilters$ | async"
             class="reset-filters"
-            iqserHelpMode="reset-filters"
             translate="reset-filters"
         ></div>
     </div>
@@ -30,7 +29,6 @@
                 *ngIf="!config.hide"
                 [icon]="config.icon"
                 [id]="config.label.replace('.', '-')"
-                [iqserHelpMode]="config.helpModeKey"
                 [label]="config.label | translate"
                 [type]="config.type"
             ></iqser-icon-button>
@@ -43,7 +41,6 @@
                     *ngIf="!config.hide"
                     [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
-                    [iqserHelpMode]="config.helpModeKey"
                     [tooltip]="config.label"
                     tooltipPosition="below"
                 ></iqser-circle-button>
diff --git a/src/lib/listing/table-header/table-header.component.html b/src/lib/listing/table-header/table-header.component.html
index 360352c..06d9dc4 100644
--- a/src/lib/listing/table-header/table-header.component.html
+++ b/src/lib/listing/table-header/table-header.component.html
@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters *ngIf="quickFilters$ | async" iqserHelpMode="dossiers-quickfilter-my-dossiers"></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>

From 6bc8881a8f44672b6419ed2bf3e9d8b940bed26f Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Sat, 12 Feb 2022 01:04:11 +0200
Subject: [PATCH 2/7] added back remained keys for dossiers list screen

---
 src/assets/styles/common-help-mode.scss       | 82 -------------------
 .../page-header/page-header.component.html    |  3 +-
 .../table-header/table-header.component.html  |  2 +-
 3 files changed, 3 insertions(+), 84 deletions(-)

diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss
index da99dd4..bd92653 100644
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@@ -11,87 +11,5 @@
     cursor: help;
 }
 
-.help-mode-on-mouse-over-new-dossier-button,
-.help-mode-on-mouse-over-filter-dossier-list,
-.help-mode-on-mouse-over-filter-document-list,
-.help-mode-on-mouse-over-dossiers-quickfilter-my-dossiers,
-.help-mode-on-mouse-over-new-dossier {
-    padding-right: 10px;
-}
 
-.help-mode-on-mouse-over-search-in-entire-application,
-.help-mode-on-mouse-over-open-notifications,
-.help-mode-on-mouse-over-bulk-select-annotations,
-.help-mode-on-mouse-over-assign-reviewer {
-    padding-left: 4px;
-}
-
-.help-mode-on-mouse-over-edit-dossier-owner {
-    padding-left: 5px;
-}
-
-.help-mode-on-mouse-over-edit-dossier-member {
-    margin-left: 3px;
-}
-
-.help-mode-on-mouse-over-open-usermenu {
-    padding-top: 1px;
-    margin-left: 5px;
-}
-
-.help-mode-on-mouse-over-standard-view,
-.help-mode-on-mouse-over-delta-view,
-.help-mode-on-mouse-over-preview-view {
-    margin-left: 1px;
-}
-
-.help-mode-on-mouse-over-workload-filter {
-    height: 14px;
-    width: 50px;
-    margin-top: 10px;
-    margin-left: 15px;
-}
-
-.help-mode-on-mouse-over-reset-filters {
-    padding-left: 4px;
-}
-
-.help-mode-on-mouse-over-dossier-list,
-.help-mode-on-mouse-over-document-list {
-    margin-top: 5px;
-    height: calc(100% - 70px);
-}
-
-.help-mode-on-mouse-over-dossier-features {
-    height: 50px;
-    margin-top: 17px;
-    width: 95%;
-}
-
-.help-mode-on-mouse-over-edit-dossier-from-list {
-    padding-left: 5px ;
-}
-
-.help-mode-on-mouse-over-redaction-edit-reason,
-.help-mode-on-mouse-over-redaction-remove-only-here,
-.help-mode-on-mouse-over-redaction-remove-from-dictionary,
-.help-mode-on-mouse-over-redaction-false-positive,
-.help-mode-on-mouse-over-recommendation-accept-or-reject {
-    width: 20px;
-    height: 20px;
-    margin-left: 9px;
-    margin-top: 8px;
-}
-
-.help-mode-on-mouse-over-document-features {
-    margin-top: 7px;
-    margin-left: 7px;
-    height: 20px;
-    width: 95%;
-}
-
-.help-mode-on-mouse-over-navigate-in-breadcrumbs {
-    height: 20px;
-    margin-top: 20px;
-}
 
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index c79755f..187bbd9 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -1,7 +1,7 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" class="filters">
+    <div *ngIf="filters$ | async as filters" class="filters" [iqserHelpMode]="helpModeKey">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -31,6 +31,7 @@
                 [id]="config.label.replace('.', '-')"
                 [label]="config.label | translate"
                 [type]="config.type"
+                [iqserHelpMode]="config.helpModeKey"
             ></iqser-icon-button>
         </ng-container>
 
diff --git a/src/lib/listing/table-header/table-header.component.html b/src/lib/listing/table-header/table-header.component.html
index 06d9dc4..360352c 100644
--- a/src/lib/listing/table-header/table-header.component.html
+++ b/src/lib/listing/table-header/table-header.component.html
@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async" iqserHelpMode="dossiers-quickfilter-my-dossiers"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>

From d9d8dcc7f419dbcecef062110dc41b57899056f7 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 14 Feb 2022 11:13:34 +0200
Subject: [PATCH 3/7] check if body contains helper element before removing it

---
 src/lib/help-mode/help-mode.service.ts                    | 6 ++++--
 src/lib/listing/page-header/models/button-config.model.ts | 1 -
 src/lib/listing/page-header/page-header.component.html    | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index fd2cba9..65f6107 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -54,7 +54,7 @@ export class HelpModeService {
     }
 
     getDocsLink(elementName: string): string {
-        return `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`;
+        return this._docs[elementName] ? `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}` : '';
     }
 
     activateHelpMode(): void {
@@ -112,7 +112,9 @@ export class HelpModeService {
 
     private _disableHelperElements() {
         Object.values(this._helperElements).forEach(({ helperElement }) => {
-            document.body.removeChild(helperElement)
+            if (document.body.contains(helperElement)) {
+                document.body.removeChild(helperElement);
+            }
         });
     }
 
diff --git a/src/lib/listing/page-header/models/button-config.model.ts b/src/lib/listing/page-header/models/button-config.model.ts
index a51a41e..67ab4d8 100644
--- a/src/lib/listing/page-header/models/button-config.model.ts
+++ b/src/lib/listing/page-header/models/button-config.model.ts
@@ -3,5 +3,4 @@ import { ActionConfig } from './action-config.model';
 
 export interface ButtonConfig extends ActionConfig {
     readonly type?: IconButtonType;
-    readonly helpModeKey?: string;
 }
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index 187bbd9..3bb6c79 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -44,6 +44,7 @@
                     [icon]="config.icon"
                     [tooltip]="config.label"
                     tooltipPosition="below"
+                    [iqserHelpMode]="config.helpModeKey"
                 ></iqser-circle-button>
             </ng-container>
 

From 53c3a6b30494f063ca323cb21ffff072c3204db2 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Mon, 14 Feb 2022 15:55:22 +0200
Subject: [PATCH 4/7] added helper element only if elementName property exists,
 updated breadcrumbs container for helpmode

---
 src/assets/styles/common-breadcrumbs.scss | 43 ++++++++++++-----------
 src/lib/help-mode/help-mode.directive.ts  |  4 ++-
 src/lib/help-mode/help-mode.service.ts    |  4 +--
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss
index 54ebbac..8a29b26 100644
--- a/src/assets/styles/common-breadcrumbs.scss
+++ b/src/assets/styles/common-breadcrumbs.scss
@@ -13,29 +13,32 @@
         min-width: 16px;
     }
 }
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    .breadcrumb {
+        text-decoration: none;
+        color: var(--iqser-accent);
+        font-weight: 600;
+        width: fit-content;
+        white-space: nowrap;
 
-.breadcrumb {
-    text-decoration: none;
-    color: var(--iqser-accent);
-    font-weight: 600;
-    width: fit-content;
-    white-space: nowrap;
+        &.back {
+            display: flex !important;
+            justify-content: center;
+            align-items: center;
 
-    &.back {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
+            mat-icon {
+                margin-right: 8px;
+            }
+        }
 
-        mat-icon {
-            margin-right: 8px;
+        &:last-child {
+            @include common-mixins.line-clamp(1);
+        }
+
+        &.active {
+            color: var(--iqser-primary);
         }
     }
-
-    &:last-child {
-        @include common-mixins.line-clamp(1);
-    }
-
-    &.active {
-        color: var(--iqser-primary);
-    }
 }
diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts
index 0cf3b60..a446861 100644
--- a/src/lib/help-mode/help-mode.directive.ts
+++ b/src/lib/help-mode/help-mode.directive.ts
@@ -20,7 +20,9 @@ export class HelpModeDirective implements OnInit {
     }
 
     ngOnInit(): void {
-        this._createHelperElement();
+        if (this.elementName) {
+            this._createHelperElement();
+        }
     }
 
     private _createHelperElement() {
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index 65f6107..6f3c1f6 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -121,8 +121,8 @@ export class HelpModeService {
     private _getElementDimensions(element: HTMLElement) {
         const rect = element.getBoundingClientRect();
         return {
-            y: rect.top + window.pageYOffset,
-            x: rect.left + window.pageXOffset,
+            y: rect.top,
+            x: rect.left,
             height: rect.height,
             width: rect.width,
         };

From 9e21637009dd66744ac1ff722eed65c6bb5c2707 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Wed, 16 Feb 2022 00:38:32 +0200
Subject: [PATCH 5/7] WIP RED-2657 -> fixing more keys

---
 src/lib/filtering/filters.module.ts                    |  3 ++-
 src/lib/filtering/models/filter.model.ts               |  1 +
 src/lib/filtering/models/nested-filter.ts              |  2 ++
 .../quick-filters/quick-filters.component.html         |  1 +
 src/lib/help-mode/help-mode.service.ts                 |  2 ++
 src/lib/listing/page-header/page-header.component.html |  6 ++++--
 src/lib/listing/page-header/page-header.component.ts   | 10 +++++++++-
 .../listing/scroll-button/scroll-button.component.html |  4 ++--
 .../listing/table-header/table-header.component.html   |  2 +-
 9 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/lib/filtering/filters.module.ts b/src/lib/filtering/filters.module.ts
index 4796037..21b9f2f 100644
--- a/src/lib/filtering/filters.module.ts
+++ b/src/lib/filtering/filters.module.ts
@@ -8,9 +8,10 @@ import { PopupFilterComponent } from './popup-filter/popup-filter.component';
 import { QuickFiltersComponent } from './quick-filters/quick-filters.component';
 import { IqserIconsModule } from '../icons';
 import { IqserInputsModule } from '../inputs';
+import { IqserHelpModeModule } from '../help-mode';
 
 const matModules = [MatCheckboxModule, MatMenuModule];
-const modules = [TranslateModule, IqserButtonsModule, IqserIconsModule, IqserInputsModule];
+const modules = [TranslateModule, IqserButtonsModule, IqserIconsModule, IqserInputsModule, IqserHelpModeModule];
 const components = [QuickFiltersComponent, PopupFilterComponent];
 
 @NgModule({
diff --git a/src/lib/filtering/models/filter.model.ts b/src/lib/filtering/models/filter.model.ts
index c955f26..c44e9f8 100644
--- a/src/lib/filtering/models/filter.model.ts
+++ b/src/lib/filtering/models/filter.model.ts
@@ -8,4 +8,5 @@ export interface IFilter {
     readonly checker?: (obj?: unknown) => boolean;
     readonly required?: boolean;
     readonly disabled?: boolean;
+    readonly helpModeKey?: string;
 }
diff --git a/src/lib/filtering/models/nested-filter.ts b/src/lib/filtering/models/nested-filter.ts
index 5560c52..e035c82 100644
--- a/src/lib/filtering/models/nested-filter.ts
+++ b/src/lib/filtering/models/nested-filter.ts
@@ -6,6 +6,7 @@ export class NestedFilter extends Filter implements INestedFilter, IListable {
     expanded: boolean;
     indeterminate: boolean;
     disabled?: boolean;
+    helpModeKey?: string;
     readonly children: Filter[];
 
     constructor(nestedFilter: INestedFilter) {
@@ -13,6 +14,7 @@ export class NestedFilter extends Filter implements INestedFilter, IListable {
         this.expanded = !!nestedFilter.expanded;
         this.indeterminate = !!nestedFilter.indeterminate;
         this.disabled = !!nestedFilter.disabled;
+        this.helpModeKey = nestedFilter.helpModeKey;
         this.children = nestedFilter.children ?? [];
     }
 }
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.html b/src/lib/filtering/quick-filters/quick-filters.component.html
index b35d198..5e5cf12 100644
--- a/src/lib/filtering/quick-filters/quick-filters.component.html
+++ b/src/lib/filtering/quick-filters/quick-filters.component.html
@@ -5,6 +5,7 @@
         [class.active]="filter.checked"
         [class.disabled]="filter.disabled"
         class="quick-filter"
+        [iqserHelpMode]="filter.helpModeKey"
     >
         {{ filter.label }}
     </div>
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index 6f3c1f6..140186e 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -59,6 +59,7 @@ export class HelpModeService {
 
     activateHelpMode(): void {
         if (!this.isHelpModeActive) {
+            document.body.style.setProperty('overflow', 'hidden');
             this._isHelpModeActive$.next(true);
             this.openHelpModeDialog();
             setTimeout(() => {
@@ -69,6 +70,7 @@ export class HelpModeService {
 
     deactivateHelpMode(): void {
         if (this.isHelpModeActive) {
+            document.body.style.removeProperty('overflow');
             this._isHelpModeActive$.next(false);
             this._disableHelperElements();
         }
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index 3bb6c79..e23b73c 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -1,13 +1,13 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" class="filters" [iqserHelpMode]="helpModeKey">
+    <div *ngIf="filters$ | async as filters" class="filters">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
         <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
-            <iqser-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug"></iqser-popup-filter>
+            <iqser-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug" [iqserHelpMode]="filterHelpModeKey"></iqser-popup-filter>
         </ng-container>
 
         <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -17,6 +17,7 @@
             *ngIf="showResetFilters$ | async"
             class="reset-filters"
             translate="reset-filters"
+            [iqserHelpMode]="resetFiltersHelpModeKey"
         ></div>
     </div>
 
@@ -58,6 +59,7 @@
                 [tooltip]="'common.close' | translate"
                 icon="iqser:close"
                 tooltipPosition="below"
+                iqserHelpMode="edit_dossier_in_dossier"
             ></iqser-circle-button>
         </div>
     </div>
diff --git a/src/lib/listing/page-header/page-header.component.ts b/src/lib/listing/page-header/page-header.component.ts
index 4e9eb9a..bd60fa5 100644
--- a/src/lib/listing/page-header/page-header.component.ts
+++ b/src/lib/listing/page-header/page-header.component.ts
@@ -25,7 +25,7 @@ export class PageHeaderComponent<T extends IListable> {
     @Input() viewModeSelection?: TemplateRef<unknown>;
     @Input() searchPlaceholder?: string;
     @Input() searchWidth?: number | 'full';
-    @Input() helpModeKey?: 'filter-dossier-list' | 'filter-document-list';
+    @Input() helpModeKey?: 'dossier' | 'document';
     @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
     @Output() readonly closeAction = new EventEmitter();
 
@@ -53,4 +53,12 @@ export class PageHeaderComponent<T extends IListable> {
     trackByLabel<K extends { label?: string }>(index: number, item: K): string | undefined {
         return item.label;
     }
+
+    get filterHelpModeKey() {
+        return !!this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
+    }
+
+    get resetFiltersHelpModeKey() {
+        return !!this.helpModeKey ? `delete_${this.helpModeKey}_filter` : '';
+    }
 }
diff --git a/src/lib/listing/scroll-button/scroll-button.component.html b/src/lib/listing/scroll-button/scroll-button.component.html
index b04b249..e30974d 100644
--- a/src/lib/listing/scroll-button/scroll-button.component.html
+++ b/src/lib/listing/scroll-button/scroll-button.component.html
@@ -1,7 +1,7 @@
-<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer">
+<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer" iqserHelpMode="scroll_up_and_down">
     <mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
 </button>
 
-<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer">
+<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer" iqserHelpMode="scroll_up_and_down">
     <mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
 </button>
diff --git a/src/lib/listing/table-header/table-header.component.html b/src/lib/listing/table-header/table-header.component.html
index 360352c..06d9dc4 100644
--- a/src/lib/listing/table-header/table-header.component.html
+++ b/src/lib/listing/table-header/table-header.component.html
@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters *ngIf="quickFilters$ | async" iqserHelpMode="dossiers-quickfilter-my-dossiers"></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>

From a3a090162cf50221004026886d437b1626c49e2f Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Thu, 17 Feb 2022 09:05:11 +0200
Subject: [PATCH 6/7] fix to display helpers only when the elements are visible

---
 src/assets/styles/common-help-mode.scss       |  3 -
 src/lib/help-mode/help-mode.directive.ts      |  3 +-
 src/lib/help-mode/help-mode.service.ts        | 71 ++++++++++++++++---
 .../scroll-button.component.html              |  4 +-
 .../table-content.component.html              |  1 +
 5 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss
index bd92653..9f7a7b8 100644
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@@ -10,6 +10,3 @@
     box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
     cursor: help;
 }
-
-
-
diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts
index a446861..dac74b5 100644
--- a/src/lib/help-mode/help-mode.directive.ts
+++ b/src/lib/help-mode/help-mode.directive.ts
@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 })
 export class HelpModeDirective implements OnInit {
     @Input('iqserHelpMode') elementName!: string;
+    @Input() isVirtualScrollElement: boolean = false;
     private _path: string;
 
     constructor(
@@ -34,7 +35,7 @@ export class HelpModeDirective implements OnInit {
         this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
         this._renderer.setAttribute(helperElement, 'target', '_blank');
         this._renderer.addClass(helperElement, 'help-mode');
-        this._helpModeService.addElement(helperElementName, element, helperElement);
+        this._helpModeService.addElement(helperElementName, element, helperElement, this.isVirtualScrollElement);
     }
 
     private _generateId(): string {
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index 140186e..de00234 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -8,8 +8,12 @@ import { HELP_DOCS, MANUAL_BASE_URL } from './tokens';
 interface Helper {
     readonly element: HTMLElement;
     readonly helperElement: HTMLElement;
+    readonly isVirtualScrollElement: boolean;
 }
 
+const VIRTUAL_SCROLL_ID = 'virtual-scroll';
+const SCROLL_BUTTONS_IDS = ['scroll-up', 'scroll-down'];
+
 @Injectable({
     providedIn: 'root',
 })
@@ -77,7 +81,7 @@ export class HelpModeService {
     }
 
     highlightHelperElements(): void {
-        Object.values(this._helperElements).forEach(({ helperElement }) => {
+        Object.values(this._helperElements).forEach(({ element, helperElement }) => {
             this._renderer.addClass(helperElement, 'help-highlight');
             setTimeout(() => {
                 this._renderer.removeClass(helperElement, 'help-highlight');
@@ -85,30 +89,77 @@ export class HelpModeService {
         });
     }
 
-    addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement): void {
-        this._helperElements[helperElementName] = { element, helperElement };
+    addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement, isVirtualScrollElement: boolean): void {
+        this._helperElements[helperElementName] = { element, helperElement, isVirtualScrollElement };
     }
 
     updateHelperElements() {
-        Object.values(this._helperElements).forEach(({element, helperElement }) => {
-            this._updateHelperElement(element, helperElement);
+        Object.values(this._helperElements).forEach(({element, helperElement, isVirtualScrollElement }) => {
+            this._updateHelperElement(element, helperElement, isVirtualScrollElement);
         });
     }
 
-    private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement) {
-        const dimensions = this._getElementDimensions(element);
-        helperElement.style.cssText = `
+    private _isElementVisible(element: HTMLElement, isVirtualScrollElement: boolean): boolean {
+
+        const elementRect = element.getBoundingClientRect();
+        if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) {
+            return false;
+        }
+
+        if (isVirtualScrollElement) {
+            const virtualScroll: any = document.getElementById(VIRTUAL_SCROLL_ID);
+
+            if (!virtualScroll) {
+                return false;
+            }
+
+            const virtualScrollRect = virtualScroll.getBoundingClientRect();
+
+            if (!(elementRect.top > virtualScrollRect.top
+                && elementRect.left > virtualScrollRect.left
+                && elementRect.bottom < virtualScrollRect.bottom
+                && elementRect.right < virtualScrollRect.right)) {
+                return false;
+            }
+
+            for (const id of SCROLL_BUTTONS_IDS) {
+                const scroll: any = document.getElementById(id);
+
+                const elementRect = element.getBoundingClientRect();
+                const scrollRect = scroll.getBoundingClientRect();
+
+                if(elementRect.top + elementRect.height > scrollRect.top
+                    && elementRect.left + elementRect.width > scrollRect.left
+                    && elementRect.bottom - elementRect.height < scrollRect.bottom
+                    && elementRect.right - elementRect.width < scrollRect.right) {
+                    return false
+                }
+            }
+        }
+
+        return true;
+    }
+
+    private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement, isVirtualScrollElement: boolean) {
+        if (this._isElementVisible(element, isVirtualScrollElement)) {
+            const dimensions = this._getElementDimensions(element);
+            helperElement.style.cssText = `
                 top:${dimensions.y}px;
                 left:${dimensions.x}px;
                 width:${dimensions.width}px;
                 height:${dimensions.height}px;
             `;
+            helperElement.classList.add('help-mode')
+        } else {
+            helperElement.classList.remove('help-mode')
+        }
+
     }
 
     private _enableHelperElements() {
-        Object.values(this._helperElements).forEach(({ element, helperElement }) => {
+        Object.values(this._helperElements).forEach(({ element, helperElement, isVirtualScrollElement }) => {
             document.body.appendChild(helperElement)
-            this._updateHelperElement(element, helperElement);
+            this._updateHelperElement(element, helperElement, isVirtualScrollElement);
         });
     }
 
diff --git a/src/lib/listing/scroll-button/scroll-button.component.html b/src/lib/listing/scroll-button/scroll-button.component.html
index e30974d..a0954c3 100644
--- a/src/lib/listing/scroll-button/scroll-button.component.html
+++ b/src/lib/listing/scroll-button/scroll-button.component.html
@@ -1,7 +1,7 @@
-<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer" iqserHelpMode="scroll_up_and_down">
+<button (click)="scroll(buttonType.top)" [hidden]="(showScrollUp$ | async) === false" class="scroll-button top pointer" iqserHelpMode="scroll_up_and_down" id="scroll-up">
     <mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
 </button>
 
-<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer" iqserHelpMode="scroll_up_and_down">
+<button (click)="scroll(buttonType.bottom)" [hidden]="(showScrollDown$ | async) === false" class="scroll-button bottom pointer" iqserHelpMode="scroll_up_and_down" id="scroll-down">
     <mat-icon svgIcon="iqser:arrow-down-o"></mat-icon>
 </button>
diff --git a/src/lib/listing/table-content/table-content.component.html b/src/lib/listing/table-content/table-content.component.html
index 7e6ce90..12f79ee 100644
--- a/src/lib/listing/table-content/table-content.component.html
+++ b/src/lib/listing/table-content/table-content.component.html
@@ -5,6 +5,7 @@
         [maxBufferPx]="1500"
         [minBufferPx]="300"
         iqserHasScrollbar
+        id="virtual-scroll"
     >
         <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
             <!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->

From 39c089ec87d11c48e3ef2186aaafe59d17085b98 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Fri, 18 Feb 2022 10:14:44 +0200
Subject: [PATCH 7/7] updated key for reset dossier list filters helper element

---
 src/lib/listing/page-header/page-header.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/listing/page-header/page-header.component.ts b/src/lib/listing/page-header/page-header.component.ts
index bd60fa5..5494a04 100644
--- a/src/lib/listing/page-header/page-header.component.ts
+++ b/src/lib/listing/page-header/page-header.component.ts
@@ -59,6 +59,6 @@ export class PageHeaderComponent<T extends IListable> {
     }
 
     get resetFiltersHelpModeKey() {
-        return !!this.helpModeKey ? `delete_${this.helpModeKey}_filter` : '';
+        return this.helpModeKey === 'dossier' ? 'reset_filters' : `delete_document_filter`;
     }
 }