tooltips are getting scale to correct positioning

bitgapp · Oct 2, 2021 · a4f7891 · a4f7891
1 parent f6395b4
commit a4f7891
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/modules/components/src/components/tooltip/tooltip-container.component.ts b/modules/components/src/components/tooltip/tooltip-container.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TooltipService } from './tooltip.service'
 import { FadeInOutAnimation } from '../../animations/fade-in-out'
 
@@ -11,12 +11,14 @@ import { FadeInOutAnimation } from '../../animations/fade-in-out'
         [text]="tooltip.text"
         [parent]="tooltip.parent"
         [positionSide]="tooltip.positionSide"
+        [scale]="scale"
         [showArrow]="tooltip.showArrow">
       </eqm-tooltip>
     </div>
   `,
   animations: [ FadeInOutAnimation ]
 })
 export class TooltipContainerComponent {
+  @Input() scale = 1
   constructor (public tooltipService: TooltipService) {}
 }
diff --git a/modules/components/src/components/tooltip/tooltip.component.ts b/modules/components/src/components/tooltip/tooltip.component.ts
@@ -20,6 +20,8 @@ export class TooltipComponent implements OnInit {
   @Input() parent?: any
   @Input() positionSide: TooltipPositionSide = 'top'
   @Input() showArrow: Boolean = true
+  @Input() scale = 1
+
   public padding = 10
 
   @ViewChild('arrow', {
@@ -51,9 +53,9 @@ export class TooltipComponent implements OnInit {
     let x = -999
     let y = -999
     const body = document.body
-    const html = document.documentElement
-    const viewHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
-    const viewWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+    const viewHeight = body.offsetHeight / this.scale
+    const viewWidth = body.offsetWidth / this.scale
+
     const tooltipEl = this.tooltip.nativeElement
     const tooltipWidth = parseInt(tooltipEl.offsetWidth) + 3
     const tooltipHeight = parseInt(tooltipEl.offsetHeight) + 2

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -28,5 +28,5 @@
   <eqm-divider *ngIf="ui.settings.equalizersFeatureEnabled"></eqm-divider>
 
   <eqm-outputs *ngIf="ui.settings.outputFeatureEnabled" #outputs></eqm-outputs>
-  <eqm-tooltip-container></eqm-tooltip-container>
+  <eqm-tooltip-container [scale]="ui.scale"></eqm-tooltip-container>
 </div>