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

RED-9731: fixed help button position on resize + small filters fix.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-08-01 14:38:32 +03:00
parent 80fceb45dd
commit 28acee573d
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/common-menu.scss
View File

@ -58,7 +58,7 @@
}
&.padding-left {
padding-left: 56px;
padding-left: 56px !important;
}
&:last-of-type {

44
src/lib/help-mode/help-button/help-button.component.ts
View File

@ -1,5 +1,5 @@
/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
import { Component, effect, ElementRef, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
import { Component, effect, ElementRef, HostListener, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
import { MatIcon } from '@angular/material/icon';
import { HelpModeService } from '../help-mode.service';
import { MatTooltip } from '@angular/material/tooltip';
@ -26,9 +26,9 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
effect(() => {
if (this.helpModeService.isHelpModeActive()) {
this.#helpModeHasBeenActivated = true;
this.#applyActiveButtonStyles();
setTimeout(() => this.#applyActiveButtonStyles(), 300);
} else if (this.#helpModeHasBeenActivated) {
this.#applyInactiveButtonStyles();
setTimeout(() => this.#applyInactiveButtonStyles(), 300);
}
});
}
@ -42,6 +42,15 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
}
get currentComponentRect() {
return this._elementRef.nativeElement.getBoundingClientRect();
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.helpModeService.isHelpModeActive()) this.#applyActiveButtonStyles();
}
ngOnInit() {
if (this.dialogButton) {
const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
@ -53,8 +62,11 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
if (this.dialogButton) {
const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
defaultButton.style.removeProperty('z-index');
if (!this.helpModeService.isHelpModeActive()) {
document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.removeChild(this.helpModeButton().nativeElement);
const helpButtonElement = document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0];
if (helpButtonElement.contains(this.helpModeButton().nativeElement))
helpButtonElement?.removeChild(this.helpModeButton().nativeElement);
}
}
}
@ -68,23 +80,17 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
}
#applyActiveButtonStyles() {
const currentComponent = this._elementRef.nativeElement;
const currentComponentRect = currentComponent.getBoundingClientRect();
setTimeout(() => {
this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
this.helpModeButton().nativeElement.style.setProperty('top', `${currentComponentRect.top}px`);
this.helpModeButton().nativeElement.style.setProperty('left', `${currentComponentRect.left}px`);
document.body.appendChild(this.helpModeButton().nativeElement);
}, 500);
this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
this.helpModeButton().nativeElement.style.setProperty('top', `${this.currentComponentRect.top}px`);
this.helpModeButton().nativeElement.style.setProperty('left', `${this.currentComponentRect.left}px`);
document.body.appendChild(this.helpModeButton().nativeElement);
}
#applyInactiveButtonStyles() {
setTimeout(() => {
this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
document.body.removeChild(this.helpModeButton().nativeElement);
document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
}, 500);
this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
document.body.removeChild(this.helpModeButton().nativeElement);
document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
}
}