fixes to the tooltip z-index and dialog scaling

bitgapp · Nov 13, 2021 · be5a385 · be5a385
1 parent 36ed8eb
commit be5a385
Show file tree

Hide file tree

Showing 5 changed files with 34 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
@@ -16,7 +16,12 @@ import { FadeInOutAnimation } from '../../animations/fade-in-out'
       </eqm-tooltip>
     </div>
   `,
-  animations: [ FadeInOutAnimation ]
+  animations: [ FadeInOutAnimation ],
+  styles: [
+    `:host {
+      z-index: 10000;
+    }`
+  ]
 })
 export class TooltipContainerComponent {
   @Input() scale = 1

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -29,5 +29,5 @@
 
   <eqm-outputs *ngIf="ui.settings.outputFeatureEnabled" #outputs></eqm-outputs>
 
-  <eqm-tooltip-container [scale]="ui.scale"></eqm-tooltip-container>
 </div>
+<eqm-tooltip-container class="tooltip-container" [scale]="ui.scale" [ngStyle]="containerStyle"></eqm-tooltip-container>
diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss
@@ -112,3 +112,12 @@ $noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyA
 
 }
 
+.tooltip-container {
+  position: absolute;
+  pointer-events: none;
+  transform-origin: top left;
+  z-index: 9999;
+  min-width: 400px; 
+  top: 0;
+  left: 0;
+}
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
@@ -53,6 +53,10 @@ export class AppComponent implements OnInit, AfterContentInit {
     style.height = `${this.containerHeight / this.ui.scale}px`
     style.transform = `scale(${this.ui.scale})`
 
+    const cdkOverlays = document.getElementsByClassName('cdk-overlay-pane')
+    for (let i = 0; i < cdkOverlays.length; i++) {
+      cdkOverlays[i].setAttribute('style', `transform: scale(${this.ui.scale.toFixed(2)}); max-width: ${Math.round(90 / this.ui.scale)}vw`)
+    }
     return style
   }
 
@@ -133,7 +137,7 @@ export class AppComponent implements OnInit, AfterContentInit {
       this.ui.getSettings()
     ])
 
-    if (typeof uiSettings.privacyFormSeen !== 'boolean') {
+    if (typeof uiSettings.privacyFormSeen !== 'boolean' || true) {
       let doCollectTelemetry = uiSettings.doCollectTelemetry ?? false
       let doCollectCrashReports = await this.settings.getDoCollectCrashReports()
       let saving = false

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -68,12 +68,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { SettingsComponent } from './sections/settings/settings.component'
 import { OptionsComponent } from './components/options/options.component'
 import { HelpComponent } from './sections/help/help.component'
-import { MatDialogModule } from '@angular/material/dialog'
+import { MatDialogConfig, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog'
 import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component'
 import { EqualizerPresetsComponent } from './sections/effects/equalizers/presets/equalizer-presets.component'
 import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component'
 import { OptionsDialogComponent } from './components/options-dialog/options-dialog.component'
 import { MatSnackBarModule } from '@angular/material/snack-bar'
+import { UIService } from './services/ui.service'
 
 @NgModule({
   imports: [
@@ -114,7 +115,17 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'
     PromptDialogComponent,
     OptionsDialogComponent
   ],
-  providers: [],
+  providers: [
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: {
+        ...new MatDialogConfig(),
+        hasBackdrop: true,
+        maxWidth: 10,
+        width: '10px'
+      } as MatDialogConfig
+    }
+  ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule {}