Reposition HoverCard once the frame is loaded

opf · Oct 9, 2024 · ed667cc · ed667cc
1 parent 932e941
commit ed667cc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/...end/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.html b/...end/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.html
@@ -3,15 +3,16 @@
   *ngIf="turboFrameSrc"
 >
   <turbo-frame
+    #turboFrame
     loading="lazy"
     id="op-hover-card-body"
     [src]="turboFrameSrc">
     <op-content-loader
-      viewBox="0 0 180 80"
+      viewBox="0 0 180 60"
     >
-      <svg:rect x="10" y="10" width="80%" height="16" rx="1" />
-      <svg:rect x="10" y="30" width="80%" height="16" rx="1" />
-      <svg:rect x="10" y="50" width="60%" height="16" rx="1" />
+      <svg:rect x="10" y="0" width="60%" height="16" rx="1" />
+      <svg:rect x="10" y="20" width="80%" height="16" rx="1" />
+      <svg:rect x="10" y="40" width="30%" height="16" rx="1" />
     </op-content-loader>
   </turbo-frame>
 </div>
diff --git a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts
@@ -34,6 +34,7 @@ import {
   Inject,
   Input,
   OnInit,
+  ViewChild,
 } from '@angular/core';
 import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
 import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
@@ -54,6 +55,17 @@ import { WorkPackageIsolatedQuerySpaceDirective } from 'core-app/features/work-p
   hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
 })
 export class HoverCardComponent extends OpModalComponent implements OnInit {
+  @ViewChild('turboFrame')
+  set turboFrame(frame:ElementRef<HTMLIFrameElement>|undefined) {
+    if (frame !== undefined) {
+      frame.nativeElement?.addEventListener('turbo:frame-load', () => {
+        const modal = this.elementRef.nativeElement as HTMLElement;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-explicit-any
+        void this.reposition(modal, this.locals.event.target as HTMLElement);
+      });
+    }
+  }
+
   turboFrameSrc:string;
 
   @Input() public alignment?:Placement = 'bottom-end';