sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): migrate backoffice shell + product form to Lucide

Browse Source 
Admin sidebar nav, topbar icon buttons (menu, search, quick-publish,
tenant selector, notifications), and the product-form translations
disclosure icon now render via app-icon instead of PrimeIcons classes.
AdminNavLink/AdminNavAction.icon retyped to AppIconName.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-20 02:18:19 +04:00
parent 9569b6dc46
commit 330f24c8d7
5 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/features/admin/products/components/admin-product-form.component.html
View File

@@ -51,7 +51,7 @@
<details class="translations-block"> <details class="translations-block">
<summary> <summary>
<span class="pi pi-globe" aria-hidden="true"></span> <app-icon name="globe" [size]="16" />
{{ 'adminProducts.translations' | translate }} {{ 'adminProducts.translations' | translate }}
<span class="translations-block__count">{{ translatedLocalesCount() }}/{{ locales.length }}</span> <span class="translations-block__count">{{ translatedLocalesCount() }}/{{ locales.length }}</span>
</summary> </summary>
@@ -257,7 +257,7 @@
<details class="translations-block"> <details class="translations-block">
<summary> <summary>
<span class="pi pi-globe" aria-hidden="true"></span> <app-icon name="globe" [size]="16" />
{{ 'adminProducts.translations' | translate }} {{ 'adminProducts.translations' | translate }}
</summary> </summary>
<p class="translations-block__hint">{{ 'adminProducts.translationsHint' | translate }}</p> <p class="translations-block__hint">{{ 'adminProducts.translationsHint' | translate }}</p>

2
src/app/features/admin/products/components/admin-product-form.component.ts
View File

@@ -15,6 +15,7 @@ import { MarketplaceHtmlEditorComponent } from '../../../project-editor/componen
import { AdminProductHealth } from '../facade/admin-products.facade'; import { AdminProductHealth } from '../facade/admin-products.facade';
import { ProductHealthWidgetComponent, ProductHealthItem } from './product-health-widget/product-health-widget.component'; import { ProductHealthWidgetComponent, ProductHealthItem } from './product-health-widget/product-health-widget.component';
import { ProductVariantsEditorComponent } from './product-variants-editor/product-variants-editor.component'; import { ProductVariantsEditorComponent } from './product-variants-editor/product-variants-editor.component';
import { IconComponent } from '../../../../shared/ui/icon/icon.component';
export type AdminProductEditorGroup = 'general' | 'media' | 'pricing' | 'inventory' | 'categories' | 'attributes' | 'seo' | 'visibility' | 'advanced'; export type AdminProductEditorGroup = 'general' | 'media' | 'pricing' | 'inventory' | 'categories' | 'attributes' | 'seo' | 'visibility' | 'advanced';
@@ -35,6 +36,7 @@ export type AdminProductEditorGroup = 'general' | 'media' | 'pricing' | 'invento
MarketplaceHtmlEditorComponent, MarketplaceHtmlEditorComponent,
ProductHealthWidgetComponent, ProductHealthWidgetComponent,
ProductVariantsEditorComponent, ProductVariantsEditorComponent,
IconComponent,
], ],
templateUrl: './admin-product-form.component.html', templateUrl: './admin-product-form.component.html',
styleUrls: ['./admin-product-form.component.scss'], styleUrls: ['./admin-product-form.component.scss'],

18
src/app/features/admin/shell/admin-layout.component.html
View File

@@ -27,14 +27,14 @@
routerLinkActive="admin-layout__nav-link--active" routerLinkActive="admin-layout__nav-link--active"
[routerLinkActiveOptions]="{ exact: false }" [routerLinkActiveOptions]="{ exact: false }"
> >
<span class="pi {{ entry.icon }}" aria-hidden="true"></span> <app-icon [name]="entry.icon" [size]="18" />
<span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span> <span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span>
</a> </a>
</li> </li>
} @else if (entry.type === 'link' && entry.comingSoon) { } @else if (entry.type === 'link' && entry.comingSoon) {
<li> <li>
<button type="button" class="admin-layout__nav-link admin-layout__nav-link--disabled" disabled> <button type="button" class="admin-layout__nav-link admin-layout__nav-link--disabled" disabled>
<span class="pi {{ entry.icon }}" aria-hidden="true"></span> <app-icon [name]="entry.icon" [size]="18" />
<span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span> <span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span>
<span class="admin-layout__soon-badge">{{ 'adminShell.nav.comingSoonBadge' | translate }}</span> <span class="admin-layout__soon-badge">{{ 'adminShell.nav.comingSoonBadge' | translate }}</span>
</button> </button>
@@ -48,7 +48,7 @@
@if (entry.type === 'link' && entry.comingSoon) { @if (entry.type === 'link' && entry.comingSoon) {
<li> <li>
<button type="button" class="admin-layout__nav-link admin-layout__nav-link--disabled" disabled> <button type="button" class="admin-layout__nav-link admin-layout__nav-link--disabled" disabled>
<span class="pi {{ entry.icon }}" aria-hidden="true"></span> <app-icon [name]="entry.icon" [size]="18" />
<span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span> <span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span>
<span class="admin-layout__soon-badge">{{ 'adminShell.nav.comingSoonBadge' | translate }}</span> <span class="admin-layout__soon-badge">{{ 'adminShell.nav.comingSoonBadge' | translate }}</span>
</button> </button>
@@ -56,7 +56,7 @@
} @else if (entry.type === 'action') { } @else if (entry.type === 'action') {
<li> <li>
<button type="button" class="admin-layout__nav-link" (click)="logout()"> <button type="button" class="admin-layout__nav-link" (click)="logout()">
<span class="pi {{ entry.icon }}" aria-hidden="true"></span> <app-icon [name]="entry.icon" [size]="18" />
<span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span> <span class="admin-layout__nav-label">{{ entry.labelKey | translate }}</span>
</button> </button>
</li> </li>
@@ -74,7 +74,7 @@
[attr.aria-label]="(mobileDrawerOpen() ? 'adminShell.closeSidebar' : 'adminShell.openSidebar') | translate" [attr.aria-label]="(mobileDrawerOpen() ? 'adminShell.closeSidebar' : 'adminShell.openSidebar') | translate"
(click)="toggleMobileDrawer()" (click)="toggleMobileDrawer()"
> >
<span class="pi pi-bars" aria-hidden="true"></span> <app-icon name="menu" [size]="20" />
</button> </button>
<div class="admin-layout__heading"> <div class="admin-layout__heading">
@@ -102,7 +102,7 @@
<div class="admin-layout__topbar-actions"> <div class="admin-layout__topbar-actions">
<label class="admin-layout__search"> <label class="admin-layout__search">
<span class="visually-hidden">{{ 'adminShell.topbar.searchLabel' | translate }}</span> <span class="visually-hidden">{{ 'adminShell.topbar.searchLabel' | translate }}</span>
<span class="pi pi-search admin-layout__search-icon" aria-hidden="true"></span> <app-icon name="search" [size]="16" class="admin-layout__search-icon" />
<input type="search" [placeholder]="'adminShell.topbar.searchPlaceholder' | translate" /> <input type="search" [placeholder]="'adminShell.topbar.searchPlaceholder' | translate" />
</label> </label>
@@ -112,7 +112,7 @@
disabled disabled
[title]="'adminShell.topbar.quickPublishComingSoon' | translate" [title]="'adminShell.topbar.quickPublishComingSoon' | translate"
> >
<span class="pi pi-upload" aria-hidden="true"></span> <app-icon name="upload" [size]="18" />
<span class="visually-hidden">{{ 'adminShell.topbar.quickPublish' | translate }}</span> <span class="visually-hidden">{{ 'adminShell.topbar.quickPublish' | translate }}</span>
</button> </button>
@@ -122,7 +122,7 @@
disabled disabled
[title]="'adminShell.topbar.tenantSelectorComingSoon' | translate" [title]="'adminShell.topbar.tenantSelectorComingSoon' | translate"
> >
<span class="pi pi-building" aria-hidden="true"></span> <app-icon name="building" [size]="18" />
<span class="visually-hidden">{{ 'adminShell.topbar.tenantSelector' | translate }}</span> <span class="visually-hidden">{{ 'adminShell.topbar.tenantSelector' | translate }}</span>
</button> </button>
@@ -135,7 +135,7 @@
[attr.aria-label]="'adminShell.topbar.notifications' | translate" [attr.aria-label]="'adminShell.topbar.notifications' | translate"
(click)="toggleNotifications()" (click)="toggleNotifications()"
> >
<span class="pi pi-bell" aria-hidden="true"></span> <app-icon name="bell" [size]="18" />
</button> </button>
@if (notificationsOpen()) { @if (notificationsOpen()) {
<div class="admin-layout__notifications-panel" role="menu"> <div class="admin-layout__notifications-panel" role="menu">

3
src/app/features/admin/shell/admin-layout.component.ts
View File

@@ -8,11 +8,12 @@ import { TranslateService } from '../../../i18n/translate.service';
import { LanguageService } from '../../../services/language.service'; import { LanguageService } from '../../../services/language.service';
import { AdminAuthService } from '../../../core/admin-auth/admin-auth.service'; import { AdminAuthService } from '../../../core/admin-auth/admin-auth.service';
import { ADMIN_NAV_BOTTOM, ADMIN_NAV_PRIMARY, AdminBreadcrumbEntry, AdminNavEntry } from './admin-nav.model'; import { ADMIN_NAV_BOTTOM, ADMIN_NAV_PRIMARY, AdminBreadcrumbEntry, AdminNavEntry } from './admin-nav.model';
import { IconComponent } from '../../../shared/ui/icon/icon.component';
@Component({ @Component({
selector: 'app-admin-layout', selector: 'app-admin-layout',
standalone: true, standalone: true,
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe, IconComponent],
templateUrl: './admin-layout.component.html', templateUrl: './admin-layout.component.html',
styleUrl: './admin-layout.component.scss', styleUrl: './admin-layout.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,

42
src/app/features/admin/shell/admin-nav.model.ts
View File

@@ -1,7 +1,9 @@
import { AppIconName } from '../../../shared/ui/icon/icon-registry';
export interface AdminNavLink { export interface AdminNavLink {
type: 'link'; type: 'link';
id: string; id: string;
icon: string; icon: AppIconName;
labelKey: string; labelKey: string;
/** Segments appended to /:lang/backoffice/. Mutually exclusive with absolutePath. */ /** Segments appended to /:lang/backoffice/. Mutually exclusive with absolutePath. */
path?: string[]; path?: string[];
@@ -19,35 +21,35 @@ export interface AdminNavGroup {
export interface AdminNavAction { export interface AdminNavAction {
type: 'action'; type: 'action';
id: string; id: string;
icon: string; icon: AppIconName;
labelKey: string; labelKey: string;
} }
export type AdminNavEntry = AdminNavLink | AdminNavGroup | AdminNavAction; export type AdminNavEntry = AdminNavLink | AdminNavGroup | AdminNavAction;
export const ADMIN_NAV_PRIMARY: AdminNavEntry[] = [ export const ADMIN_NAV_PRIMARY: AdminNavEntry[] = [
{ type: 'link', id: 'dashboard', icon: 'pi-home', labelKey: 'adminShell.nav.dashboard', path: ['dashboard'] }, { type: 'link', id: 'dashboard', icon: 'home', labelKey: 'adminShell.nav.dashboard', path: ['dashboard'] },
{ type: 'group', labelKey: 'adminShell.nav.catalogGroup' }, { type: 'group', labelKey: 'adminShell.nav.catalogGroup' },
{ type: 'link', id: 'products', icon: 'pi-box', labelKey: 'adminShell.nav.products', path: ['products'] }, { type: 'link', id: 'products', icon: 'package', labelKey: 'adminShell.nav.products', path: ['products'] },
{ type: 'link', id: 'categories', icon: 'pi-tags', labelKey: 'adminShell.nav.categories', path: ['categories'] }, { type: 'link', id: 'categories', icon: 'tags', labelKey: 'adminShell.nav.categories', path: ['categories'] },
{ type: 'link', id: 'orders', icon: 'pi-shopping-cart', labelKey: 'adminShell.nav.orders', path: ['orders'] }, { type: 'link', id: 'orders', icon: 'cart', labelKey: 'adminShell.nav.orders', path: ['orders'] },
{ type: 'link', id: 'customers', icon: 'pi-user', labelKey: 'adminShell.nav.customers', path: ['customers'] }, { type: 'link', id: 'customers', icon: 'user', labelKey: 'adminShell.nav.customers', path: ['customers'] },
{ type: 'link', id: 'transactions', icon: 'pi-credit-card', labelKey: 'adminShell.nav.transactions', path: ['transactions'] }, { type: 'link', id: 'transactions', icon: 'creditCard', labelKey: 'adminShell.nav.transactions', path: ['transactions'] },
{ type: 'link', id: 'moderation', icon: 'pi-star', labelKey: 'adminShell.nav.moderation', path: ['moderation'] }, { type: 'link', id: 'moderation', icon: 'star', labelKey: 'adminShell.nav.moderation', path: ['moderation'] },
{ type: 'link', id: 'reports', icon: 'pi-chart-bar', labelKey: 'adminShell.nav.reports', comingSoon: true }, { type: 'link', id: 'reports', icon: 'chartBar', labelKey: 'adminShell.nav.reports', comingSoon: true },
{ type: 'link', id: 'content', icon: 'pi-file-edit', labelKey: 'adminShell.nav.content', absolutePath: ['edit', 'static-pages'] }, { type: 'link', id: 'content', icon: 'edit', labelKey: 'adminShell.nav.content', absolutePath: ['edit', 'static-pages'] },
{ type: 'link', id: 'media', icon: 'pi-images', labelKey: 'adminShell.nav.mediaLibrary', path: ['media'] }, { type: 'link', id: 'media', icon: 'images', labelKey: 'adminShell.nav.mediaLibrary', path: ['media'] },
{ type: 'link', id: 'marketplace-builder', icon: 'pi-sitemap', labelKey: 'adminShell.nav.marketplaceBuilder', absolutePath: ['edit'] }, { type: 'link', id: 'marketplace-builder', icon: 'network', labelKey: 'adminShell.nav.marketplaceBuilder', absolutePath: ['edit'] },
{ type: 'link', id: 'users', icon: 'pi-users', labelKey: 'adminShell.nav.users', path: ['users'] }, { type: 'link', id: 'users', icon: 'users', labelKey: 'adminShell.nav.users', path: ['users'] },
{ type: 'link', id: 'settings', icon: 'pi-cog', labelKey: 'adminShell.nav.settings', comingSoon: true }, { type: 'link', id: 'settings', icon: 'settings', labelKey: 'adminShell.nav.settings', comingSoon: true },
{ type: 'link', id: 'monitoring', icon: 'pi-desktop', labelKey: 'adminShell.nav.monitoring', path: ['monitoring'] }, { type: 'link', id: 'monitoring', icon: 'monitor', labelKey: 'adminShell.nav.monitoring', path: ['monitoring'] },
{ type: 'link', id: 'analytics', icon: 'pi-chart-line', labelKey: 'adminShell.nav.analytics', path: ['analytics'] }, { type: 'link', id: 'analytics', icon: 'chartLine', labelKey: 'adminShell.nav.analytics', path: ['analytics'] },
]; ];
export const ADMIN_NAV_BOTTOM: AdminNavEntry[] = [ export const ADMIN_NAV_BOTTOM: AdminNavEntry[] = [
{ type: 'link', id: 'documentation', icon: 'pi-book', labelKey: 'adminShell.nav.documentation', comingSoon: true }, { type: 'link', id: 'documentation', icon: 'book', labelKey: 'adminShell.nav.documentation', comingSoon: true },
{ type: 'link', id: 'help', icon: 'pi-question-circle', labelKey: 'adminShell.nav.help', comingSoon: true }, { type: 'link', id: 'help', icon: 'help', labelKey: 'adminShell.nav.help', comingSoon: true },
{ type: 'action', id: 'logout', icon: 'pi-sign-out', labelKey: 'adminShell.nav.logout' }, { type: 'action', id: 'logout', icon: 'logOut', labelKey: 'adminShell.nav.logout' },
]; ];
export interface AdminBreadcrumbEntry { export interface AdminBreadcrumbEntry {