Merge remote-tracking branch 'origin/master' into RED-2830

src/assets/styles/common-help-mode.scss

@@ -40,10 +40,6 @@
     margin-left: 3px;
 }
 
-.help-mode-on-mouse-over-filter-for-editing-notes {
-    width: 100px;
-}
-
 .help-mode-on-mouse-over-open-usermenu {
     padding-top: 1px;
     margin-left: 5px;
@@ -70,8 +66,46 @@
 .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-edit-dossier-attributes {
     z-index: 20;
 }
+
+.help-mode-on-mouse-over-dossier-features {
+    z-index: 20;
+    height: 50px;
+    margin-top: 17px;
+    width: 95%;
+}
+
+.help-mode-on-mouse-over-edit-dossier-from-list {
+    z-index: 30;
+    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 {
+    z-index: 20;
+    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;
+}
+

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() updateElementPosition = true;
     private _path: string;
 
     constructor(
@@ -24,6 +25,7 @@ export class HelpModeDirective implements OnInit {
     }
 
     private _createHelperElement() {
+        const elementNameWithId = `${this.elementName}-${this._getRandomId()}`;
         const element = this._elementRef.nativeElement as HTMLElement;
 
         if (!this._isDisabledElement()) {
@@ -31,7 +33,7 @@ export class HelpModeDirective implements OnInit {
             this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
             this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
 
-            this._helpModeService.addElement(this.elementName, element, helperElement);
+            this._helpModeService.addElement(elementNameWithId, element, helperElement, this.updateElementPosition);
         }
     }
 
@@ -39,6 +41,11 @@ export class HelpModeDirective implements OnInit {
         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);
     }

src/lib/help-mode/help-mode.service.ts

@@ -8,6 +8,7 @@ import { HELP_DOCS } from './tokens';
 interface Helper {
     readonly element: HTMLElement;
     readonly helperElement: HTMLElement;
+    readonly updateElementPosition: boolean;
 }
 
 @Injectable({
@@ -84,13 +85,15 @@ export class HelpModeService {
         });
     }
 
-    addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void {
+    addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement, updateElementPosition: boolean): void {
-        this._elements[elementName] = { element, helperElement };
+        this._elements[elementName] = { element, helperElement, updateElementPosition };
     }
 
     private _enableHelperElements() {
-        Object.values(this._elements).forEach(({ element, helperElement }) => {
+        Object.values(this._elements).forEach(({ element, helperElement, updateElementPosition }) => {
-            this._renderer.setStyle(element, 'position', 'relative');
+            if (updateElementPosition) {
+                this._renderer.setStyle(element, 'position', 'relative');
+            }
             this._renderer.appendChild(element, helperElement);
         });
     }

src/lib/listing/table-content/table-content.component.html

@@ -13,6 +13,7 @@
                 (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
                 (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
                 *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
+                [class.help-mode]="helpModeService.isHelpModeActive$ | async"
                 [ngClass]="getTableItemClasses(entity)"
                 [routerLink]="entity.routerLink"
             >
@@ -20,7 +21,11 @@
             </div>
 
             <ng-template #withoutMouseEvents>
-                <div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
+                <div
+                    [class.help-mode]="helpModeService.isHelpModeActive$ | async"
+                    [ngClass]="getTableItemClasses(entity)"
+                    [routerLink]="entity.routerLink"
+                >
                     <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
                 </div>
             </ng-template>

src/lib/listing/table-content/table-content.component.scss

@@ -35,7 +35,7 @@
                 margin-top: 0;
             }
 
-            &:hover {
+            &:hover, &.help-mode {
                 .selection-column iqser-round-checkbox .wrapper {
                     opacity: 1;
                 }

src/lib/listing/table-content/table-content.component.ts

@@ -5,6 +5,7 @@ import { AutoUnsubscribe, trackBy } from '../../utils';
 import { IListable } from '../models';
 import { ListingComponent, ListingService } from '../index';
 import { HasScrollbarDirective } from '../../scrollbar';
+import { HelpModeService } from '@iqser/common-ui';
 
 @Component({
     selector: 'iqser-table-content',
@@ -29,6 +30,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
     constructor(
         @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
         readonly listingService: ListingService<T>,
+        readonly helpModeService: HelpModeService,
     ) {
         super();
         this.addSubscription = this.listingComponent.noContent$.subscribe(() => {