feat: Theme engine
big changes
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
|
||||
@if (isOpen()) {
|
||||
@if (isOpen() && !isThemeStudioFullscreen()) {
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
|
||||
@@ -16,7 +16,8 @@
|
||||
<!-- Modal -->
|
||||
<div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
|
||||
<div
|
||||
class="pointer-events-auto relative bg-card border border-border rounded-xl shadow-2xl w-full max-w-4xl h-[min(680px,85vh)] flex overflow-hidden transition-all duration-200"
|
||||
class="pointer-events-auto relative flex w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-card shadow-2xl transition-all duration-200"
|
||||
style="height: min(680px, 85vh)"
|
||||
[class.scale-100]="animating()"
|
||||
[class.opacity-100]="animating()"
|
||||
[class.scale-95]="!animating()"
|
||||
@@ -29,7 +30,7 @@
|
||||
tabindex="-1"
|
||||
>
|
||||
<!-- Side Navigation -->
|
||||
<nav class="w-52 flex-shrink-0 bg-secondary/40 border-r border-border flex flex-col">
|
||||
<nav class="flex w-52 flex-shrink-0 flex-col border-r border-border bg-secondary/40">
|
||||
<div class="p-4 border-b border-border">
|
||||
<h2 class="text-lg font-semibold text-foreground">Settings</h2>
|
||||
</div>
|
||||
@@ -99,7 +100,15 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-t border-border px-4 py-3">
|
||||
<div class="mt-auto space-y-3 border-t border-border px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
(click)="restoreDefaultTheme()"
|
||||
class="w-full rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-left text-xs font-medium text-destructive transition-colors hover:bg-destructive/15"
|
||||
>
|
||||
Restore default theme
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="openThirdPartyLicenses()"
|
||||
@@ -122,6 +131,9 @@
|
||||
@case ('network') {
|
||||
Network
|
||||
}
|
||||
@case ('theme') {
|
||||
Theme Studio
|
||||
}
|
||||
@case ('notifications') {
|
||||
Notifications
|
||||
}
|
||||
@@ -148,16 +160,18 @@
|
||||
}
|
||||
}
|
||||
</h3>
|
||||
<button
|
||||
(click)="close()"
|
||||
type="button"
|
||||
class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ng-icon
|
||||
name="lucideX"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
(click)="close()"
|
||||
type="button"
|
||||
class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ng-icon
|
||||
name="lucideX"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable Content Area -->
|
||||
@@ -169,6 +183,74 @@
|
||||
@case ('network') {
|
||||
<app-network-settings />
|
||||
}
|
||||
@case ('theme') {
|
||||
<div class="mx-auto flex h-full max-w-3xl items-center justify-center">
|
||||
<div class="w-full rounded-[1.5rem] border border-border bg-card/90 p-6 shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
|
||||
<h4 class="mt-2 text-xl font-semibold text-foreground">{{ activeThemeName() }}</h4>
|
||||
</div>
|
||||
|
||||
@if (themeStudioMinimized()) {
|
||||
<span class="rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Minimized</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (savedThemesAvailable()) {
|
||||
<div class="mt-5">
|
||||
<label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Saved Theme</label>
|
||||
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<select
|
||||
class="min-w-[16rem] flex-1 rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-primary/15"
|
||||
[value]="selectedSavedTheme()?.fileName || ''"
|
||||
[disabled]="savedThemesBusy() && savedThemes().length === 0"
|
||||
(change)="onSavedThemeSelect($event)"
|
||||
>
|
||||
<option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
|
||||
@for (savedTheme of savedThemes(); track savedTheme.fileName) {
|
||||
<option
|
||||
[value]="savedTheme.fileName"
|
||||
[disabled]="!savedTheme.isValid"
|
||||
>
|
||||
{{ savedTheme.themeName }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="editSelectedSavedTheme()"
|
||||
[disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
|
||||
class="inline-flex items-center rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
Edit In Studio
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
(click)="openThemeStudio()"
|
||||
class="inline-flex items-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
{{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="restoreDefaultTheme()"
|
||||
class="inline-flex items-center rounded-full border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
|
||||
>
|
||||
Restore Default
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@case ('notifications') {
|
||||
<app-notifications-settings />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user