From 8ac8cc78288dfcf9cb3ed05c1600ed2bc9cf8308 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 5 Jan 2023 17:53:46 +0200 Subject: [PATCH] RED-5918 - changed overlappingElement property for help mode service with a list in case there are multiple overlapping elements for a single element --- .../popup-filter/popup-filter.component.html | 18 ++++++----- src/lib/help-mode/help-mode.directive.ts | 4 +-- src/lib/help-mode/help-mode.service.ts | 32 +++++++++++-------- .../page-header/models/action-config.model.ts | 2 +- .../page-header/page-header.component.html | 6 ++-- 5 files changed, 34 insertions(+), 28 deletions(-) diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html index ec41649..bd2e108 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.html +++ b/src/lib/filtering/popup-filter/popup-filter.component.html @@ -29,13 +29,15 @@ [class]="(secondaryFilterGroup$ | async)?.filters.length > 0 ? 'padding-bottom-0' : ''" xPosition="before" > - - - +
+ + + +
diff --git a/src/lib/help-mode/help-mode.directive.ts b/src/lib/help-mode/help-mode.directive.ts index 8cd7084..245611f 100644 --- a/src/lib/help-mode/help-mode.directive.ts +++ b/src/lib/help-mode/help-mode.directive.ts @@ -8,7 +8,7 @@ import { HelpModeService, OverlappingElement, ScrollableParentView } from './hel export class HelpModeDirective implements OnInit { @Input('iqserHelpMode') elementName!: string; @Input() scrollableParentView!: ScrollableParentView; - @Input() overlappingElement!: OverlappingElement; + @Input() overlappingElements: OverlappingElement[] = []; @Input() dialogElement = false; constructor( @@ -37,7 +37,7 @@ export class HelpModeDirective implements OnInit { element, helperElement, this.scrollableParentView, - this.overlappingElement, + this.overlappingElements, this.dialogElement, ); } diff --git a/src/lib/help-mode/help-mode.service.ts b/src/lib/help-mode/help-mode.service.ts index 23f0124..c3e4c75 100644 --- a/src/lib/help-mode/help-mode.service.ts +++ b/src/lib/help-mode/help-mode.service.ts @@ -8,7 +8,10 @@ import { HelpDocs } from './help-docs'; const VIRTUAL_SCROLL_ID = 'virtual-scroll'; const ANNOTATIONS_LIST_ID = 'annotations-list'; -const USER_MENU_ID = 'user-menu-items'; +const OVERLAPPING_DROPDOWNS_IDS = { + USER_MENU: 'user-menu-items', + WORKLOAD_FILTER: 'workload-filters', +} const SCROLL_BUTTONS_IDS = ['scroll-up', 'scroll-down']; export const ScrollableParentViews = { @@ -20,6 +23,7 @@ export type ScrollableParentView = keyof typeof ScrollableParentViews; export const OverlappingElements = { USER_MENU: 'USER_MENU', + WORKLOAD_FILTER: 'WORKLOAD_FILTER', } as const; export type OverlappingElement = keyof typeof OverlappingElements; @@ -28,7 +32,7 @@ interface Helper { readonly element: HTMLElement; readonly helperElement: HTMLElement; readonly scrollableParentView: ScrollableParentView; - readonly overlappingElement: OverlappingElement; + readonly overlappingElements: OverlappingElement[]; readonly dialogElement?: boolean; } @@ -112,22 +116,22 @@ export class HelpModeService { element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView, - overlappingElement: OverlappingElement, + overlappingElements: OverlappingElement[], dialogElement: boolean, ): void { - this._helperElements[helperElementName] = { element, helperElement, scrollableParentView, overlappingElement, dialogElement }; + this._helperElements[helperElementName] = { element, helperElement, scrollableParentView, overlappingElements, dialogElement }; } updateHelperElements() { - Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView, overlappingElement }) => { - this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElement); + Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView, overlappingElements }) => { + this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElements); }); } private _isElementVisible( element: HTMLElement, scrollableParentView: ScrollableParentView, - overlappingElementName: OverlappingElement, + overlappingElements: OverlappingElement[], ): boolean { let elementRect: DOMRect = element.getBoundingClientRect(); if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) { @@ -175,11 +179,11 @@ export class HelpModeService { } } - if (overlappingElementName) { - const overlappingElement = document.getElementById(USER_MENU_ID); + for (const overlappingElementName of overlappingElements) { + const overlappingElement = document.getElementById(OVERLAPPING_DROPDOWNS_IDS[overlappingElementName]); if (!overlappingElement) { - return true; + continue; } const overlappingElementRect = overlappingElement.getBoundingClientRect(); @@ -197,9 +201,9 @@ export class HelpModeService { element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView, - overlappingElement: OverlappingElement, + overlappingElements: OverlappingElement[], ) { - if (this._isElementVisible(element, scrollableParentView, overlappingElement)) { + if (this._isElementVisible(element, scrollableParentView, overlappingElements)) { const dimensions = this._getElementDimensions(element); helperElement.style.cssText = ` top:${dimensions.y}px; @@ -215,10 +219,10 @@ export class HelpModeService { private _enableHelperElements() { Object.values(this._helperElements).forEach( - ({ element, helperElement, scrollableParentView, overlappingElement, dialogElement }) => { + ({ element, helperElement, scrollableParentView, overlappingElements, dialogElement }) => { if (this._dialogMode === dialogElement) { document.body.appendChild(helperElement); - this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElement); + this._updateHelperElement(element, helperElement, scrollableParentView, overlappingElements); } }, ); diff --git a/src/lib/listing/page-header/models/action-config.model.ts b/src/lib/listing/page-header/models/action-config.model.ts index 1f3b6d5..0e96c6d 100644 --- a/src/lib/listing/page-header/models/action-config.model.ts +++ b/src/lib/listing/page-header/models/action-config.model.ts @@ -5,6 +5,6 @@ import { OverlappingElement } from '../../../help-mode'; export interface ActionConfig extends BaseHeaderConfig { readonly action: ($event: MouseEvent) => void; readonly helpModeKey?: string; - readonly overlappingElement?: OverlappingElement; + readonly overlappingElements?: OverlappingElement[]; readonly disabled$?: Observable; } diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html index 318fa76..3375657 100644 --- a/src/lib/listing/page-header/page-header.component.html +++ b/src/lib/listing/page-header/page-header.component.html @@ -47,7 +47,7 @@ [icon]="config.icon" [id]="config.label.replace('.', '-')" [iqserHelpMode]="config.helpModeKey" - [overlappingElement]="config.overlappingElement" + [overlappingElements]="config.overlappingElements" [label]="config.label | translate" [type]="config.type" > @@ -62,7 +62,7 @@ [icon]="config.icon" [id]="config.id" [iqserHelpMode]="config.helpModeKey" - [overlappingElement]="config.overlappingElement" + [overlappingElements]="config.overlappingElements" [tooltipPosition]="'below'" [tooltip]="config.label" > @@ -77,7 +77,7 @@ [class.ml-6]="actionConfigs" [icon]="'iqser:close'" [iqserHelpMode]="'edit_dossier_in_dossier'" - [overlappingElement]="'USER_MENU'" + [overlappingElements]="['USER_MENU']" [tooltipPosition]="'below'" [tooltip]="'common.close' | translate" >