WIP on updating helpmode keys and links

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-new-dossier-button,
-.help-mode-on-mouse-over-quick-filters,
+.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;
+}

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 {}

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(() => {

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];
 

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;
 }

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>
 

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();
 

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>