f82344e0dd
Applied app-input/app-form-field/app-button to 9 of 11 Project Editor sections: general, branding, theme, footer, homepage, widgets, languages, navigation, preview. header and features sections were left unchanged - they contain only checkboxes and selects, and no Checkbox/Select primitive exists yet. Theme section's 8 color pickers stay native <input type=color> (app-input's type union doesn't include 'color') but are now wrapped in app-form-field for consistent label/hint treatment. Added app-form-field.full grid-column rule to section.shared.scss (shared by all 11 sections) alongside the existing label.full rule, since the custom element doesn't match that selector. Production build green, arch:check passes.
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
|
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
|
import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';
|
|
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
|
|
|
|
export interface ThemeModeOption {
|
|
value: 'light' | 'dark' | 'system';
|
|
labelKey: string;
|
|
descKey: string;
|
|
}
|
|
|
|
export interface SiteLayoutOption {
|
|
value: PlatformLayoutType;
|
|
labelKey: string;
|
|
descKey: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-project-editor-theme-section',
|
|
standalone: true,
|
|
imports: [FormsModule, TranslatePipe, FormFieldComponent],
|
|
templateUrl: './theme-section.component.html',
|
|
styleUrls: ['./section.shared.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class ProjectEditorThemeSectionComponent {
|
|
private readonly facade = inject(ProjectEditorFacade);
|
|
readonly bootstrap = this.facade.bootstrap;
|
|
|
|
readonly themeModeOptions: ThemeModeOption[] = [
|
|
{ value: 'light', labelKey: 'builder.themeModeLight', descKey: 'builder.themeModeLightDesc' },
|
|
{ value: 'dark', labelKey: 'builder.themeModeDark', descKey: 'builder.themeModeDarkDesc' },
|
|
{ value: 'system', labelKey: 'builder.themeModeSystem', descKey: 'builder.themeModeSystemDesc' },
|
|
];
|
|
|
|
readonly siteLayoutOptions: SiteLayoutOption[] = [
|
|
{ value: 'default', labelKey: 'builder.siteLayoutDefault', descKey: 'builder.siteLayoutDefaultDesc' },
|
|
{ value: 'sidebar-left', labelKey: 'builder.siteLayoutSidebarLeft', descKey: 'builder.siteLayoutSidebarLeftDesc' },
|
|
{ value: 'carousel-home', labelKey: 'builder.siteLayoutCarouselHome', descKey: 'builder.siteLayoutCarouselHomeDesc' },
|
|
{ value: 'minimal', labelKey: 'builder.siteLayoutMinimal', descKey: 'builder.siteLayoutMinimalDesc' },
|
|
];
|
|
|
|
updatePalette<K extends keyof ThemePaletteConfig>(key: K, value: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
theme: { ...current.theme, palette: { ...current.theme.palette, [key]: value } }
|
|
}));
|
|
}
|
|
|
|
updateThemeMode(mode: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
theme: { ...current.theme, mode: mode as 'light' | 'dark' | 'system' }
|
|
}));
|
|
}
|
|
|
|
updateSiteLayout(type: string): void {
|
|
this.facade.updateBootstrap(current => ({
|
|
...current,
|
|
layout: { ...current.layout, type: type as PlatformLayoutType }
|
|
}));
|
|
}
|
|
|
|
themeModeDescKey(mode: string): string {
|
|
return this.themeModeOptions.find(option => option.value === mode)?.descKey ?? '';
|
|
}
|
|
|
|
siteLayoutDescKey(type: string): string {
|
|
return this.siteLayoutOptions.find(option => option.value === type)?.descKey ?? '';
|
|
}
|
|
}
|