feat: Theme engine
big changes
This commit is contained in:
@@ -1,60 +1,139 @@
|
||||
<div class="workspace-bright-theme relative flex h-screen overflow-hidden bg-background text-foreground">
|
||||
<!-- Global left servers rail always visible -->
|
||||
<aside class="w-16 flex-shrink-0 bg-transparent">
|
||||
<app-servers-rail class="h-full" />
|
||||
</aside>
|
||||
<main class="relative min-w-0 flex-1 overflow-hidden bg-background">
|
||||
<!-- Custom draggable title bar -->
|
||||
<app-title-bar />
|
||||
<div
|
||||
appThemeNode="appRoot"
|
||||
class="workspace-bright-theme relative h-screen overflow-hidden bg-background text-foreground"
|
||||
>
|
||||
<div
|
||||
class="grid h-full min-h-0 min-w-0 overflow-hidden"
|
||||
[ngStyle]="appShellLayoutStyles()"
|
||||
>
|
||||
<aside
|
||||
appThemeNode="serversRail"
|
||||
class="min-h-0 overflow-hidden bg-transparent"
|
||||
[class.hidden]="isThemeStudioFullscreen()"
|
||||
[ngStyle]="serversRailLayoutStyles()"
|
||||
>
|
||||
<app-servers-rail class="block h-full" />
|
||||
</aside>
|
||||
|
||||
@if (desktopUpdateState().restartRequired) {
|
||||
<div class="absolute inset-x-0 top-10 z-20 px-4 pt-4 pointer-events-none">
|
||||
<div class="pointer-events-auto mx-auto max-w-4xl rounded-md border border-border bg-card p-4 shadow-sm">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-foreground">Update ready to install</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
|
||||
</p>
|
||||
</div>
|
||||
<main
|
||||
appThemeNode="appWorkspace"
|
||||
class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
|
||||
[ngStyle]="appWorkspaceShellStyles()"
|
||||
>
|
||||
<app-title-bar class="block shrink-0" />
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
(click)="openUpdatesSettings()"
|
||||
class="inline-flex items-center rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
|
||||
>
|
||||
Update settings
|
||||
</button>
|
||||
<div class="relative min-h-0 flex-1 overflow-hidden">
|
||||
@if (isThemeStudioFullscreen()) {
|
||||
<div class="theme-studio-fullscreen-shell absolute inset-0 overflow-y-auto overflow-x-hidden bg-background">
|
||||
@if (themeStudioFullscreenComponent()) {
|
||||
<ng-container *ngComponentOutlet="themeStudioFullscreenComponent()"></ng-container>
|
||||
} @else {
|
||||
<div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio…</div>
|
||||
}
|
||||
</div>
|
||||
} @else { @if (desktopUpdateState().restartRequired) {
|
||||
<div class="pointer-events-none absolute inset-x-0 top-0 z-20 px-4 pt-4">
|
||||
<div class="pointer-events-auto mx-auto max-w-4xl rounded-md border border-border bg-card p-4 shadow-sm">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-foreground">Update ready to install</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="restartToApplyUpdate()"
|
||||
class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
Restart now
|
||||
</button>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
(click)="openUpdatesSettings()"
|
||||
class="inline-flex items-center rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
|
||||
>
|
||||
Update settings
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="restartToApplyUpdate()"
|
||||
class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
Restart now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="absolute inset-0 overflow-auto">
|
||||
<router-outlet />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Content area fills below the title bar without global scroll -->
|
||||
<div class="absolute inset-x-0 top-10 bottom-0 overflow-auto">
|
||||
<router-outlet />
|
||||
</div>
|
||||
</main>
|
||||
@if (isThemeStudioFullscreen()) {
|
||||
<div
|
||||
#themeStudioControlsRef
|
||||
class="pointer-events-none absolute z-[80]"
|
||||
[ngStyle]="themeStudioControlsPositionStyles()"
|
||||
>
|
||||
<div class="pointer-events-auto flex items-center gap-2 rounded-full border border-border/80 bg-card/95 px-2 py-2 shadow-2xl backdrop-blur">
|
||||
<div
|
||||
class="rounded-full border border-border bg-background px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
|
||||
[class.cursor-grabbing]="isDraggingThemeStudioControls()"
|
||||
(pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
|
||||
>
|
||||
Theme Studio
|
||||
</div>
|
||||
|
||||
<!-- Floating voice controls - shown when connected to voice and navigated away from server -->
|
||||
<button
|
||||
type="button"
|
||||
(click)="minimizeThemeStudio()"
|
||||
class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
|
||||
>
|
||||
Minimize
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="closeThemeStudio()"
|
||||
class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @if (isThemeStudioMinimized()) {
|
||||
<div class="pointer-events-none absolute bottom-4 right-4 z-[80]">
|
||||
<div class="pointer-events-auto flex items-center gap-3 rounded-2xl border border-border/80 bg-card/95 px-3 py-3 shadow-2xl backdrop-blur">
|
||||
<div class="min-w-0">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Theme Studio</p>
|
||||
<p class="mt-1 text-sm font-medium text-foreground">Minimized</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="reopenThemeStudio()"
|
||||
class="rounded-full bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
Re-open
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="dismissMinimizedThemeStudio()"
|
||||
class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @if (!isThemeStudioFullscreen()) {
|
||||
<app-floating-voice-controls />
|
||||
}
|
||||
<app-settings-modal />
|
||||
<app-screen-share-source-picker />
|
||||
<app-debug-console [showLauncher]="false" />
|
||||
<app-theme-picker-overlay />
|
||||
</div>
|
||||
|
||||
<!-- Unified Settings Modal -->
|
||||
<app-settings-modal />
|
||||
|
||||
<!-- Shared Screen Share Source Picker -->
|
||||
<app-screen-share-source-picker />
|
||||
|
||||
<!-- Shared Debug Console -->
|
||||
<app-debug-console [showLauncher]="false" />
|
||||
|
||||
Reference in New Issue
Block a user