Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-5918 - changed overlappingElement property for help mode service with a list in case there are multiple overlapping elements for a single element

Browse Source
This commit is contained in:
Valentin Mihai 2023-01-05 17:53:46 +02:00
parent 7a75e1fa7f
commit 8ac8cc7828
5 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/filtering/popup-filter/popup-filter.component.html
View File

@ -29,13 +29,15 @@
[class]="(secondaryFilterGroup$ | async)?.filters.length > 0 ? 'padding-bottom-0' : ''"
xPosition="before"
>
<ng-template matMenuContent>
<iqser-filter-card
[actionsTemplate]="actionsTemplate"
[primaryFiltersLabel]="primaryFiltersLabel"
[primaryFiltersSlug]="primaryFiltersSlug"
[secondaryFiltersSlug]="secondaryFiltersSlug"
></iqser-filter-card>
</ng-template>
<div id="workload-filters">
<ng-template matMenuContent>
<iqser-filter-card
[actionsTemplate]="actionsTemplate"
[primaryFiltersLabel]="primaryFiltersLabel"
[primaryFiltersSlug]="primaryFiltersSlug"
[secondaryFiltersSlug]="secondaryFiltersSlug"
></iqser-filter-card>
</ng-template>
</div>
</mat-menu>
</ng-container>

4
src/lib/help-mode/help-mode.directive.ts
View File

@ -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,
);
}

32
src/lib/help-mode/help-mode.service.ts
View File

@ -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);
}
},
);

2
src/lib/listing/page-header/models/action-config.model.ts
View File

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

6
src/lib/listing/page-header/page-header.component.html
View File

@ -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"
></iqser-icon-button>
@ -62,7 +62,7 @@
[icon]="config.icon"
[id]="config.id"
[iqserHelpMode]="config.helpModeKey"
[overlappingElement]="config.overlappingElement"
[overlappingElements]="config.overlappingElements"
[tooltipPosition]="'below'"
[tooltip]="config.label"
></iqser-circle-button>
@ -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"
></iqser-circle-button>