From be42d929ebd96a6874579c27d594be7db888edff Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Fri, 13 Sep 2024 09:38:43 +0000
Subject: [PATCH] Move bottom callouts to top when callout is destroyed; fix
 css selector

---
 .../callout/dynamic-top.directive.ts          | 28 ++++++++++++-
 modules/ui/src/styles.scss                    | 39 ++++++++-----------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/modules/ui/src/app/components/callout/dynamic-top.directive.ts b/modules/ui/src/app/components/callout/dynamic-top.directive.ts
index f1481125e..309b1bb19 100644
--- a/modules/ui/src/app/components/callout/dynamic-top.directive.ts
+++ b/modules/ui/src/app/components/callout/dynamic-top.directive.ts
@@ -1,10 +1,16 @@
-import { AfterViewInit, Directive, Renderer2, ElementRef } from '@angular/core';
+import {
+  AfterViewInit,
+  Directive,
+  Renderer2,
+  ElementRef,
+  OnDestroy,
+} from '@angular/core';
 
 @Directive({
   selector: '[appDynamicTop]',
   standalone: true,
 })
-export class DynamicTopDirective implements AfterViewInit {
+export class DynamicTopDirective implements AfterViewInit, OnDestroy {
   constructor(
     private renderer: Renderer2,
     private element: ElementRef
@@ -20,6 +26,10 @@ export class DynamicTopDirective implements AfterViewInit {
     this.setTop();
   }
 
+  ngOnDestroy() {
+    this.moveBottomCalloutsToTop();
+  }
+
   private setTop() {
     const firstCallout =
       this.element.nativeElement.parentNode?.firstElementChild;
@@ -39,4 +49,18 @@ export class DynamicTopDirective implements AfterViewInit {
       }
     }
   }
+
+  private moveBottomCalloutsToTop() {
+    let top = 0; // next callout should be moved to top
+    const next = this.element.nativeElement.nextElementSibling;
+    let el = next.nodeName === 'APP-CALLOUT' ? next : null;
+    while (el) {
+      this.renderer.setStyle(el, 'top', `${top}px`);
+      top = el.offsetHeight - 36;
+      el =
+        el.nextElementSibling.nodeName === 'APP-CALLOUT'
+          ? el.nextElementSibling
+          : null;
+    }
+  }
 }
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index 0e04a118e..e2a252391 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -260,29 +260,22 @@ body:has(.filter-dialog-content)
   opacity: 0;
 }
 
-body
-  #main:has(app-callout)
-  app-device-repository:not(:has(.device-repository-content-empty)),
-body #main:has(app-callout) app-history:not(:has(.results-content-empty)),
-body #main:has(app-callout) app-progress:not(:has(.progress-content-empty)),
-body #main:has(app-callout) app-risk-assessment .risk-assessment-container {
-  margin-top: 96px;
-}
-
-body
-  #main:has(app-callout + app-callout)
-  app-device-repository:not(:has(.device-repository-content-empty)),
-body
-  #main:has(app-callout + app-callout)
-  app-history:not(:has(.results-content-empty)),
-body
-  #main:has(app-callout + app-callout)
-  app-progress:not(:has(.progress-content-empty)),
-body
-  #main:has(app-callout + app-callout)
-  app-risk-assessment
-  .risk-assessment-container {
-  margin-top: 156px;
+body #main:has(> app-callout) {
+  & app-device-repository:not(:has(.device-repository-content-empty)),
+  & app-history:not(:has(.results-content-empty)),
+  & app-progress:not(:has(.progress-content-empty)),
+  & app-risk-assessment .risk-assessment-container {
+    margin-top: 96px;
+  }
+}
+
+body #main:has(> app-callout + app-callout) {
+  & app-device-repository:not(:has(.device-repository-content-empty)),
+  & app-history:not(:has(.results-content-empty)),
+  & app-progress:not(:has(.progress-content-empty)),
+  & app-risk-assessment .risk-assessment-container {
+    margin-top: 156px;
+  }
 }
 
 body:has(app-risk-assessment .profiles-drawer) #main app-callout {