From 5214f9f76176e6c85025fc91ee55f002d5b4b190 Mon Sep 17 00:00:00 2001 From: Richard Cox Date: Mon, 24 Aug 2020 13:46:03 +0100 Subject: [PATCH] Fix the position of the header guide array (#4524) - shown when there are no registered endpoints (and some incoming scenarios) - position is determined by location of associated button in header - position of button can change given visibility of other buttons (notification bell, endpoint backup, etc) - now check positiion after a delay, add fade in to mask delay --- .../no-content-message.component.scss | 5 +++++ .../no-content-message.component.ts | 19 ++++++++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.scss b/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.scss index e9ea57ee5e..b46c1ba6fb 100644 --- a/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.scss +++ b/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.scss @@ -26,6 +26,7 @@ } &__link { display: flex; + opacity: 0%; position: absolute; right: 113px; top: 54px; @@ -39,6 +40,10 @@ font-size: 16px; margin-top: 26px; } + &--show { + opacity: 100%; + transition: opacity .6s; + } } &__menu { margin-top: 0; diff --git a/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.ts b/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.ts index a303a443e2..e156f3cf0d 100644 --- a/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.ts +++ b/src/frontend/packages/core/src/shared/components/no-content-message/no-content-message.component.ts @@ -29,13 +29,18 @@ export class NoContentMessageComponent implements AfterViewInit { constructor(private renderer: Renderer2) { } ngAfterViewInit() { - // Align the prompt with the toolbar item - if (this.toolBarLinkElement) { - const elem = document.getElementById(this.toolbarAlign); - if (elem) { - const right = document.body.clientWidth - elem.getBoundingClientRect().right; - this.renderer.setStyle(this.toolBarLinkElement.nativeElement, 'right', right + 'px'); + // Align the prompt with the toolbar item ... + // Note - Only execute after a delay. The final place of the target element may change given visibility of other menu items + // (polling disabled, notification bell). We should come back to this and replace the timeout with a better way of determining readyness + setTimeout(() => { + if (this.toolBarLinkElement) { + const elem = document.getElementById(this.toolbarAlign); + if (elem) { + const right = document.body.clientWidth - elem.getBoundingClientRect().right - 3; + this.renderer.setStyle(this.toolBarLinkElement.nativeElement, 'right', right + 'px'); + this.renderer.addClass(this.toolBarLinkElement.nativeElement, 'app-no-content-container__link--show') + } } - } + }, 500); } }