From aa7926da8d93542ff0d0d93de5da4547db1e3cb1 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Tue, 16 Nov 2021 13:07:21 +0200
Subject: [PATCH] WIP on updating helpmode keys and links

---
 src/assets/styles/common-help-mode.scss          | 16 ++++++++++++----
 src/lib/help-mode/help-mode.module.ts            |  2 --
 src/lib/help-mode/help-mode.service.ts           |  6 ++++--
 src/lib/listing/listing.module.ts                |  2 ++
 .../page-header/models/button-config.model.ts    |  1 +
 .../page-header/page-header.component.html       |  3 ++-
 .../listing/page-header/page-header.component.ts |  1 +
 .../table-header/table-header.component.html     |  2 +-
 8 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss
index 24a3ac3..146e7ad 100644
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@@ -1,5 +1,5 @@
 .help-mode-on-mouse-over {
-    z-index: 100;
+    z-index: 1000;
     position: absolute;
     top: -5px;
     left: -5px;
@@ -17,12 +17,20 @@
     cursor: help;
 }
 
-.help-mode-on-mouse-over-filters,
-.help-mode-on-mouse-over-quick-filters,
+.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-notifications {
+.help-mode-on-mouse-over-search-in-entire-application,
+.help-mode-on-mouse-over-open-notifications {
     padding-left: 4px;
 }
+
+.help-mode-on-mouse-over-open-usermenu {
+    padding-top: 1px;
+    margin-left: 5px;
+}
diff --git a/src/lib/help-mode/help-mode.module.ts b/src/lib/help-mode/help-mode.module.ts
index 3ce45ca..f4bcd36 100644
--- a/src/lib/help-mode/help-mode.module.ts
+++ b/src/lib/help-mode/help-mode.module.ts
@@ -6,7 +6,6 @@ import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.com
 import { HelpModeComponent } from './help-mode/help-mode.component';
 import { HelpModeDirective } from './help-mode.directive';
 import { IqserButtonsModule } from '../buttons';
-import { HelpModeService } from './help-mode.service';
 import { IqserIconsModule } from '../icons';
 
 const matModules = [MatDialogModule];
@@ -16,6 +15,5 @@ const components = [HelpModeComponent, HelpModeDialogComponent, HelpModeDirectiv
     declarations: [...components],
     imports: [CommonModule, IqserIconsModule, ...matModules, TranslateModule, IqserButtonsModule],
     exports: [...components],
-    providers: [HelpModeService],
 })
 export class IqserHelpModeModule {}
diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts
index ae36f92..0751f19 100644
--- a/src/lib/help-mode/help-mode.service.ts
+++ b/src/lib/help-mode/help-mode.service.ts
@@ -10,7 +10,9 @@ interface Helper {
     readonly helperElement: HTMLElement;
 }
 
-@Injectable()
+@Injectable({
+    providedIn: 'root',
+})
 export class HelpModeService {
     private readonly _isHelpModeActive$ = new BehaviorSubject(false);
     readonly isHelpModeActive$ = this._isHelpModeActive$.asObservable();
@@ -73,7 +75,7 @@ export class HelpModeService {
         if (!this.isHelpModeActive) {
             return;
         }
-
+        
         Object.values(this._elements).forEach(({ helperElement }) => {
             this._renderer.addClass(helperElement, 'help-highlight');
             setTimeout(() => {
diff --git a/src/lib/listing/listing.module.ts b/src/lib/listing/listing.module.ts
index 4d4df0f..4e22d91 100644
--- a/src/lib/listing/listing.module.ts
+++ b/src/lib/listing/listing.module.ts
@@ -18,6 +18,7 @@ import { WorkflowComponent } from './workflow/workflow.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PageHeaderComponent } from './page-header/page-header.component';
 import { IqserButtonsModule } from '../buttons';
+import { IqserHelpModeModule } from '../help-mode';
 
 const matModules = [MatTooltipModule];
 const components = [
@@ -39,6 +40,7 @@ const modules = [
     IqserEmptyStatesModule,
     ScrollingModule,
     RouterModule,
+    IqserHelpModeModule,
 ];
 const utils = [SyncWidthDirective];
 
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 67ab4d8..a51a41e 100644
--- a/src/lib/listing/page-header/models/button-config.model.ts
+++ b/src/lib/listing/page-header/models/button-config.model.ts
@@ -3,4 +3,5 @@ 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 ff585c3..6d950cd 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>
@@ -25,6 +25,7 @@
                 [icon]="config.icon"
                 [label]="config.label | translate"
                 [type]="config.type"
+                [iqserHelpMode]="config.helpModeKey"
             ></iqser-icon-button>
         </ng-container>
 
diff --git a/src/lib/listing/page-header/page-header.component.ts b/src/lib/listing/page-header/page-header.component.ts
index 9f395c5..4e9eb9a 100644
--- a/src/lib/listing/page-header/page-header.component.ts
+++ b/src/lib/listing/page-header/page-header.component.ts
@@ -25,6 +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() searchPosition: SearchPosition = SearchPositions.afterFilters;
     @Output() readonly closeAction = new EventEmitter();
 
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>