refactor(admin): polish UX, consistency and overall quality
Admin isolation (Task 1): extended isAdminRoute to also match /edit - the Marketplace Builder no longer renders the storefront header/back- button/footer, matching the isolation the backoffice already had since Sprint 1. Verified no regression on /backoffice or real storefront routes (catalog still shows the storefront header). Added a 'back to dashboard' link on the Builder overview page, since removing the storefront header also removed the only way back to /backoffice from within the Builder. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -63,9 +63,10 @@ export class App implements OnInit {
|
|||||||
const url = navEnd.urlAfterRedirects || navEnd.url;
|
const url = navEnd.urlAfterRedirects || navEnd.url;
|
||||||
// Home pages: /ru, /en, /hy (with or without trailing slash)
|
// Home pages: /ru, /en, /hy (with or without trailing slash)
|
||||||
this.isHomePage.set(/^\/[a-z]{2}\/?$/.test(url) || url === '/' || url === '');
|
this.isHomePage.set(/^\/[a-z]{2}\/?$/.test(url) || url === '/' || url === '');
|
||||||
// Admin backoffice owns its own shell (AdminLayoutComponent) - the
|
// Admin backoffice and the Marketplace Builder (/edit) own their own
|
||||||
// storefront header/back-button/footer never render there.
|
// shells (AdminLayoutComponent / ProjectEditorPageComponent's sidebar) -
|
||||||
this.isAdminRoute.set(/^\/[a-z]{2}\/backoffice(\/|$|\?)/.test(url));
|
// the storefront header/back-button/footer never render on either.
|
||||||
|
this.isAdminRoute.set(/^\/[a-z]{2}\/(backoffice|edit)(\/|$|\?)/.test(url));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
<main class="builder-overview">
|
<main class="builder-overview">
|
||||||
|
<a class="builder-overview__back" [routerLink]="['/', 'backoffice', 'dashboard'] | langRoute">
|
||||||
|
<span class="pi pi-arrow-left" aria-hidden="true"></span>{{ 'adminShell.pages.dashboard.title' | translate }}
|
||||||
|
</a>
|
||||||
<header class="builder-overview__hero">
|
<header class="builder-overview__hero">
|
||||||
<p class="builder-overview__eyebrow">{{ 'builder.appName' | translate }}</p>
|
<p class="builder-overview__eyebrow">{{ 'builder.appName' | translate }}</p>
|
||||||
<h1 class="builder-overview__title">{{ 'builder.overviewTitle' | translate }}</h1>
|
<h1 class="builder-overview__title">{{ 'builder.overviewTitle' | translate }}</h1>
|
||||||
|
|||||||
@@ -7,6 +7,26 @@
|
|||||||
gap: var(--space-lg);
|
gap: var(--space-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.builder-overview__back {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
align-self: flex-start;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--primary-color);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.builder-overview__hero {
|
.builder-overview__hero {
|
||||||
padding: var(--space-lg);
|
padding: var(--space-lg);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { RouterLink } from '@angular/router';
|
|||||||
import { take } from 'rxjs/operators';
|
import { take } from 'rxjs/operators';
|
||||||
import { forkJoin } from 'rxjs';
|
import { forkJoin } from 'rxjs';
|
||||||
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
||||||
|
import { LangRoutePipe } from '../../../pipes/lang-route.pipe';
|
||||||
import { LanguageService } from '../../../services/language.service';
|
import { LanguageService } from '../../../services/language.service';
|
||||||
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
import { ProjectEditorFacade } from '../facade/project-editor.facade';
|
||||||
import { BackofficeDataService } from '../../../core/backoffice/backoffice-data.service';
|
import { BackofficeDataService } from '../../../core/backoffice/backoffice-data.service';
|
||||||
@@ -48,7 +49,7 @@ const SECTION_LABEL_KEYS: Record<string, string> = {
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'app-builder-overview-page',
|
selector: 'app-builder-overview-page',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [RouterLink, TranslatePipe],
|
imports: [RouterLink, TranslatePipe, LangRoutePipe],
|
||||||
templateUrl: './builder-overview-page.component.html',
|
templateUrl: './builder-overview-page.component.html',
|
||||||
styleUrl: './builder-overview-page.component.scss',
|
styleUrl: './builder-overview-page.component.scss',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
|||||||
Reference in New Issue
Block a user