0c9a855232
- navigation-section: add LocaleTabs; label input now reads/writes the active locale's translation via a new editableLabel() helper instead of always the default locale. facade.updateNavLinkLabel() gained an optional locale param (defaults to current default locale, so existing callers are unaffected) and correctly promotes a plain-string label into a per-locale map when writing a non-default locale. - languages-section: wrap in SectionCard, add LocaleTabs for consistency. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
59 lines
3.8 KiB
HTML
59 lines
3.8 KiB
HTML
<app-section-card [title]="'builder.navigationHeader' | translate">
|
|
<app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="defaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
|
|
|
|
<div class="editor-actions">
|
|
<app-button variant="primary" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</app-button>
|
|
</div>
|
|
|
|
<div class="stack-list">
|
|
@for (item of headerLinks(); track item.id) {
|
|
<article class="sub-card">
|
|
<div class="editor-actions">
|
|
<h3>{{ labelOf(item) }}</h3>
|
|
<div class="editor-actions">
|
|
<app-button variant="secondary" size="sm" (click)="move('header', item.id, -1)">↑</app-button>
|
|
<app-button variant="secondary" size="sm" (click)="move('header', item.id, 1)">↓</app-button>
|
|
<app-button variant="secondary" size="sm" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
|
|
</div>
|
|
</div>
|
|
<div class="editor-grid three">
|
|
<label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
|
|
<label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
|
|
<label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('header', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
|
|
<div class="editor-actions">
|
|
<h2>{{ 'builder.navigationFooter' | translate }}</h2>
|
|
@if (footerLinks(); as footer) {
|
|
<app-button variant="primary" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</app-button>
|
|
}
|
|
</div>
|
|
|
|
@if (footerLinks(); as footer) {
|
|
<div class="stack-list">
|
|
@for (item of footer; track item.id) {
|
|
<article class="sub-card">
|
|
<div class="editor-actions">
|
|
<h3>{{ labelOf(item) }}</h3>
|
|
<div class="editor-actions">
|
|
<app-button variant="secondary" size="sm" (click)="move('footer', item.id, -1)">↑</app-button>
|
|
<app-button variant="secondary" size="sm" (click)="move('footer', item.id, 1)">↓</app-button>
|
|
<app-button variant="secondary" size="sm" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
|
|
</div>
|
|
</div>
|
|
<div class="editor-grid three">
|
|
<label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
|
|
<label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
|
|
<label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('footer', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
|
|
}
|
|
</app-section-card>
|