diff --git a/src/app/features/project-editor/builder/builder-groups.model.ts b/src/app/features/project-editor/builder/builder-groups.model.ts index c86bd13..151ac16 100644 --- a/src/app/features/project-editor/builder/builder-groups.model.ts +++ b/src/app/features/project-editor/builder/builder-groups.model.ts @@ -1,4 +1,5 @@ import { ProjectEditorSectionId } from '../models/project-editor.model'; +import { AppIconName } from '../../../shared/ui/icon/icon-registry'; export type BuilderGroupId = | 'marketplace' @@ -12,7 +13,7 @@ export type BuilderGroupId = export interface BuilderGroup { id: BuilderGroupId; - icon: string; + icon: AppIconName; labelKey: string; descriptionKey: string; purposeKey: string; @@ -31,7 +32,7 @@ export interface BuilderGroup { export const BUILDER_GROUPS: BuilderGroup[] = [ { id: 'marketplace', - icon: 'pi-shop', + icon: 'store', labelKey: 'builder.groupMarketplaceLabel', descriptionKey: 'builder.groupMarketplaceDescription', purposeKey: 'builder.groupMarketplacePurpose', @@ -41,7 +42,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'branding', - icon: 'pi-palette', + icon: 'palette', labelKey: 'builder.groupBrandingLabel', descriptionKey: 'builder.groupBrandingDescription', purposeKey: 'builder.groupBrandingPurpose', @@ -53,7 +54,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'homepage', - icon: 'pi-home', + icon: 'home', labelKey: 'builder.groupHomepageLabel', descriptionKey: 'builder.groupHomepageDescription', purposeKey: 'builder.groupHomepagePurpose', @@ -63,7 +64,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'content', - icon: 'pi-file-edit', + icon: 'edit', labelKey: 'builder.groupContentLabel', descriptionKey: 'builder.groupContentDescription', purposeKey: 'builder.groupContentPurpose', @@ -73,7 +74,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'languages', - icon: 'pi-globe', + icon: 'globe', labelKey: 'builder.groupLanguagesLabel', descriptionKey: 'builder.groupLanguagesDescription', purposeKey: 'builder.groupLanguagesPurpose', @@ -83,7 +84,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'features', - icon: 'pi-sliders-h', + icon: 'slidersHorizontal', labelKey: 'builder.groupFeaturesLabel', descriptionKey: 'builder.groupFeaturesDescription', purposeKey: 'builder.groupFeaturesPurpose', @@ -93,7 +94,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'navigation', - icon: 'pi-compass', + icon: 'compass', labelKey: 'builder.groupNavigationLabel', descriptionKey: 'builder.groupNavigationDescription', purposeKey: 'builder.groupNavigationPurpose', @@ -103,7 +104,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'preview', - icon: 'pi-desktop', + icon: 'monitor', labelKey: 'builder.groupPreviewLabel', descriptionKey: 'builder.groupPreviewDescription', purposeKey: 'builder.groupPreviewPurpose', diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html index 810b8f7..3fb7181 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html @@ -14,7 +14,7 @@ (click)="runCommand(item)" > @if (item.icon) { - + } @else { {{ item.label }} } diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts index 2f4f41e..940a873 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts @@ -3,14 +3,16 @@ import { TranslateService } from '../../../../i18n/translate.service'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { validateHtml } from '../../schema/validators/primitives'; import { CodeEditorComponent } from '../../../../shared/ui/code-editor/code-editor.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; export interface HtmlEditorToolbarCommand { id: string; label: string; command: string; value?: string; - /** PrimeIcons class (e.g. 'pi-list'); when set the icon renders instead of the label. */ - icon?: string; + /** Lucide icon name (see icon-registry.ts); when set the icon renders instead of the label. */ + icon?: AppIconName; /** i18n key for the tooltip/aria-label. */ titleKey?: string; } @@ -21,14 +23,14 @@ export const HTML_EDITOR_TOOLBAR: HtmlEditorToolbarCommand[] = [ { id: 'underline', label: 'U', command: 'underline', titleKey: 'builder.htmlToolUnderline' }, { id: 'h2', label: 'H2', command: 'formatBlock', value: 'H2', titleKey: 'builder.htmlToolHeading' }, { id: 'h3', label: 'H3', command: 'formatBlock', value: 'H3', titleKey: 'builder.htmlToolSubheading' }, - { id: 'ul', label: '', icon: 'pi-list', command: 'insertUnorderedList', titleKey: 'builder.htmlToolBulletList' }, + { id: 'ul', label: '', icon: 'list', command: 'insertUnorderedList', titleKey: 'builder.htmlToolBulletList' }, { id: 'ol', label: '1.', command: 'insertOrderedList', titleKey: 'builder.htmlToolNumberedList' }, - { id: 'link', label: '', icon: 'pi-link', command: 'createLink', titleKey: 'builder.htmlToolLink' }, - { id: 'image', label: '', icon: 'pi-image', command: 'insertImage', titleKey: 'builder.htmlToolImage' }, - { id: 'table', label: '', icon: 'pi-table', command: 'insertHTML', value: '
  
', titleKey: 'builder.htmlToolTable' }, - { id: 'hr', label: '', icon: 'pi-minus', command: 'insertHorizontalRule', titleKey: 'builder.htmlToolDivider' }, - { id: 'codeblock', label: '', icon: 'pi-code', command: 'formatBlock', value: 'PRE', titleKey: 'builder.htmlToolCodeBlock' }, - { id: 'embed', label: '', icon: 'pi-video', command: 'insertEmbed', titleKey: 'builder.htmlToolEmbed' }, + { id: 'link', label: '', icon: 'link', command: 'createLink', titleKey: 'builder.htmlToolLink' }, + { id: 'image', label: '', icon: 'image', command: 'insertImage', titleKey: 'builder.htmlToolImage' }, + { id: 'table', label: '', icon: 'table', command: 'insertHTML', value: '
  
', titleKey: 'builder.htmlToolTable' }, + { id: 'hr', label: '', icon: 'minus', command: 'insertHorizontalRule', titleKey: 'builder.htmlToolDivider' }, + { id: 'codeblock', label: '', icon: 'code', command: 'formatBlock', value: 'PRE', titleKey: 'builder.htmlToolCodeBlock' }, + { id: 'embed', label: '', icon: 'video', command: 'insertEmbed', titleKey: 'builder.htmlToolEmbed' }, ]; /** Visual grouping for the toolbar: text style | headings | lists | insert | advanced. */ @@ -43,7 +45,7 @@ export const HTML_EDITOR_TOOLBAR_GROUPS: string[][] = [ @Component({ selector: 'app-marketplace-html-editor', standalone: true, - imports: [TranslatePipe, CodeEditorComponent], + imports: [TranslatePipe, CodeEditorComponent, IconComponent], templateUrl: './marketplace-html-editor.component.html', styleUrls: ['./marketplace-html-editor.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/features/project-editor/components/project-editor-nav.component.html b/src/app/features/project-editor/components/project-editor-nav.component.html index 033c85b..91b7380 100644 --- a/src/app/features/project-editor/components/project-editor-nav.component.html +++ b/src/app/features/project-editor/components/project-editor-nav.component.html @@ -2,9 +2,9 @@ @for (item of groups(); track item.group.id) {
- + {{ item.group.labelKey | translate }} - +
- +

{{ 'builder.overviewNextStepLabel' | translate }}

@if (nextStepLabelKey(); as labelKey) { @@ -46,11 +46,13 @@ @for (group of groups; track group.id) {
- - + +

{{ group.labelKey | translate }}

{{ group.descriptionKey | translate }}

@@ -66,10 +68,10 @@ @for (check of readinessChecklist(); track check.labelKey) {
  • @switch (check.state) { - @case ('true') { } - @case ('false') { } - @case ('loading') { } - @default { } + @case ('true') { } + @case ('false') { } + @case ('loading') { } + @default { } } {{ check.labelKey | translate }}
    • @@ -81,10 +83,10 @@
    - {{ 'builder.preview' | translate }} + {{ 'builder.preview' | translate }} - {{ 'builder.general' | translate }} + {{ 'builder.general' | translate }}
    diff --git a/src/app/features/project-editor/pages/builder-overview-page.component.ts b/src/app/features/project-editor/pages/builder-overview-page.component.ts index cf59891..4ecde0b 100644 --- a/src/app/features/project-editor/pages/builder-overview-page.component.ts +++ b/src/app/features/project-editor/pages/builder-overview-page.component.ts @@ -9,12 +9,14 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { BackofficeDataService } from '../../../core/backoffice/backoffice-data.service'; import { BUILDER_GROUPS } from '../builder/builder-groups.model'; import { BuilderSectionStatus } from '../models/project-editor.model'; +import { IconComponent } from '../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../shared/ui/icon/icon-registry'; -const STATUS_ICON: Record = { - complete: 'pi-check-circle', - 'in-progress': 'pi-circle-fill', - 'not-started': 'pi-circle', - unknown: 'pi-question-circle', +const STATUS_ICON: Record = { + complete: 'checkCircle', + 'in-progress': 'circle', + 'not-started': 'circle', + unknown: 'help', }; const STATUS_LABEL_KEY: Record = { @@ -49,7 +51,7 @@ const SECTION_LABEL_KEYS: Record = { @Component({ selector: 'app-builder-overview-page', standalone: true, - imports: [RouterLink, TranslatePipe, LangRoutePipe], + imports: [RouterLink, TranslatePipe, LangRoutePipe, IconComponent], templateUrl: './builder-overview-page.component.html', styleUrl: './builder-overview-page.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project-editor/pages/project-editor-page.component.html b/src/app/features/project-editor/pages/project-editor-page.component.html index f12ac53..c83ff1a 100644 --- a/src/app/features/project-editor/pages/project-editor-page.component.html +++ b/src/app/features/project-editor/pages/project-editor-page.component.html @@ -5,11 +5,11 @@
    @if (!textContrastPasses()) {

    - + {{ 'builder.brandContrastWarning' | translate }}

    } diff --git a/src/app/features/project-editor/sections/brand/brand-overview.component.ts b/src/app/features/project-editor/sections/brand/brand-overview.component.ts index 5db424a..47aea3d 100644 --- a/src/app/features/project-editor/sections/brand/brand-overview.component.ts +++ b/src/app/features/project-editor/sections/brand/brand-overview.component.ts @@ -3,6 +3,7 @@ import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { LanguageService } from '../../../../services/language.service'; import { ProjectEditorFacade } from '../../facade/project-editor.facade'; import { contrastRatio } from './contrast.util'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; interface BrandHealthItem { labelKey: string; @@ -12,7 +13,7 @@ interface BrandHealthItem { @Component({ selector: 'app-brand-overview', standalone: true, - imports: [TranslatePipe], + imports: [TranslatePipe, IconComponent], templateUrl: './brand-overview.component.html', styleUrl: './brand-overview.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project-editor/sections/footer-section.component.html b/src/app/features/project-editor/sections/footer-section.component.html index 6bee0cd..00d9d30 100644 --- a/src/app/features/project-editor/sections/footer-section.component.html +++ b/src/app/features/project-editor/sections/footer-section.component.html @@ -89,7 +89,7 @@ @for (column of columns(); track column.id) {
    - +
    @@ -97,7 +97,7 @@
    @for (link of column.links; track link.id) {
    - +