feat(project-editor): finish field descriptions + enum dropdowns across all sections
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Wires up the remaining editor sections (theme, header, footer, homepage, widgets, features, languages, navigation) with the description text and dropdown UX started for General/Branding: - Every enum-backed field is now a <select> with a description per option, not free text: theme.mode, the new site-wide layout.type (previously had no editor at all - added to the Theme section, and added to that section's reset-scope), homepage section layout.strategy, and catalog.navigationMode (also previously unedited, added to Features). - Every other field (colors, header toggles, footer contact/company fields, widget props, feature flags, language add, nav link label/url/visible) gets a one-line plain-language description under its label via the new *Desc i18n keys (en/ru/hy) prepared earlier. - Genuinely open text (widget layout variant strings, JSON props) stays free text, description-only, per the existing widgetLayoutDesc/widgetJsonDesc wording - not force-fit into a dropdown. Verified: tsc --noEmit and ng build both clean.
This commit is contained in:
@@ -2,7 +2,19 @@ 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 { ThemePaletteConfig } from '../../../shared/models/config';
|
||||
import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';
|
||||
|
||||
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',
|
||||
@@ -16,10 +28,45 @@ 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 ?? '';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user