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

RED-8882 - Help Mode design improvements

Browse Source
This commit is contained in:
Valentin Mihai 2024-05-29 10:52:33 +03:00
parent e7fca876bb
commit 3a9f36e71b
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
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 { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
import { HelpModeService } from '../index';
@Component({
@ -34,7 +34,7 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.helpModeButton) {
setTimeout(() => {
const currentComponentRect = currentComponent.getBoundingClientRect();
this.helpModeButton.style.setProperty('position', 'fixed');
this.helpModeButton.style.setProperty('position', 'absolute');
this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
document.body.appendChild(this.helpModeButton);
@ -57,4 +57,12 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
}
this.helpModeService.activateHelpMode(this.dialogButton);
}
@HostListener('window:resize', ['$event'])
onResize() {
const currentComponent = this._elementRef.nativeElement;
const currentComponentRect = currentComponent.getBoundingClientRect();
this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
}
}