diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss index 9cd680f..b2f54bb 100644 --- a/src/assets/styles/common-help-mode.scss +++ b/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; +} + diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts index 064674d..f433b3e 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() 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); } diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 0751f19..39ff275 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/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({ @@ -75,7 +76,7 @@ export class HelpModeService { if (!this.isHelpModeActive) { return; } - + Object.values(this._elements).forEach(({ helperElement }) => { this._renderer.addClass(helperElement, 'help-highlight'); setTimeout(() => { @@ -84,13 +85,15 @@ export class HelpModeService { }); } - addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void { - this._elements[elementName] = { element, helperElement }; + addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement, updateElementPosition: boolean): void { + this._elements[elementName] = { element, helperElement, updateElementPosition }; } private _enableHelperElements() { - Object.values(this._elements).forEach(({ element, helperElement }) => { - this._renderer.setStyle(element, 'position', 'relative'); + Object.values(this._elements).forEach(({ element, helperElement, updateElementPosition }) => { + if (updateElementPosition) { + this._renderer.setStyle(element, 'position', 'relative'); + } this._renderer.appendChild(element, helperElement); }); } diff --git a/src/lib/listing/table-content/table-content.component.html b/src/lib/listing/table-content/table-content.component.html index 3625c8a..7bfcd81 100644 --- a/src/lib/listing/table-content/table-content.component.html +++ b/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 @@ -
+
diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss index 4c8763a..30500b0 100644 --- a/src/lib/listing/table-content/table-content.component.scss +++ b/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; } diff --git a/src/lib/listing/table-content/table-content.component.ts b/src/lib/listing/table-content/table-content.component.ts index 7af8571..57f48b3 100644 --- a/src/lib/listing/table-content/table-content.component.ts +++ b/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 extends AutoUnsubscribe constructor( @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent, readonly listingService: ListingService, + readonly helpModeService: HelpModeService, ) { super(); this.addSubscription = this.listingComponent.noContent$.subscribe(() => {