From 3a9f36e71b184e66eb791af19deeb258f8ec333d Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 29 May 2024 10:52:33 +0300 Subject: [PATCH 1/3] RED-8882 - Help Mode design improvements --- .../help-mode/help-button/help-button.component.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index 984c562..b086ab7 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -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`); + } } From 5b7dd6a55a9c90e34601068767a4785d23683434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 May 2024 21:01:39 +0300 Subject: [PATCH 2/3] Added clamp-5 mixin --- src/assets/styles/common-texts.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss index 0e9194e..9959674 100644 --- a/src/assets/styles/common-texts.scss +++ b/src/assets/styles/common-texts.scss @@ -149,6 +149,10 @@ pre { @include mixins.line-clamp(4); } +.clamp-5 { + @include mixins.line-clamp(5); +} + .no-wrap { white-space: nowrap; } From 5eef6d403a57c224eec836d9d98787c6a128c50a Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 6 Jun 2024 18:29:48 +0300 Subject: [PATCH 3/3] check for existing help mode button --- src/lib/help-mode/help-button/help-button.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index b086ab7..e7a949f 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -62,7 +62,7 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { 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`); + this.helpModeButton?.style.setProperty('top', `${currentComponentRect.top}px`); + this.helpModeButton?.style.setProperty('left', `${currentComponentRect.left}px`); } }