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
cloudfoundry · Aug 24, 2020 · 5214f9f · 5214f9f
1 parent 027f9c3
commit 5214f9f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/.../packages/core/src/shared/components/no-content-message/no-content-message.component.scss b/.../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/...nd/packages/core/src/shared/components/no-content-message/no-content-message.component.ts b/...nd/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);
   }
 }