diff --git a/modules/components/src/components/tooltip/tooltip-container.component.ts b/modules/components/src/components/tooltip/tooltip-container.component.ts index effd25c..b0fe67f 100644 --- 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' `, - 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 index 5540a19..39f934c 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -29,5 +29,5 @@ - + diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss index 5cbf5a8..d63a3cc 100644 --- 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; +} \ No newline at end of file diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 64ca05d..d5e2b19 100644 --- 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 index 00df21e..75ae38a 100644 --- 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 {}