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

feat(project-editor): adopt Design System primitives across editor sections

Browse Source 
Applied app-input/app-form-field/app-button to 9 of 11 Project Editor
sections: general, branding, theme, footer, homepage, widgets, languages,
navigation, preview. header and features sections were left unchanged -
they contain only checkboxes and selects, and no Checkbox/Select primitive
exists yet.

Theme section's 8 color pickers stay native <input type=color> (app-input's
type union doesn't include 'color') but are now wrapped in app-form-field
for consistent label/hint treatment. Added app-form-field.full grid-column
rule to section.shared.scss (shared by all 11 sections) alongside the
existing label.full rule, since the custom element doesn't match that
selector.

Production build green, arch:check passes.
This commit is contained in:
sdarbinyan
2026-07-15 07:55:38 +04:00
parent 53d6a8e169
commit f82344e0dd
19 changed files with 89 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/features/project-editor/sections/navigation-section.component.html
View File

@@ -1,7 +1,7 @@
<section class="editor-section-card">
<div class="editor-actions">
<h2>{{ 'builder.navigationHeader' | translate }}</h2>
<button type="button" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</button>
<app-button variant="primary" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</app-button>
</div>
<div class="stack-list">
@@ -10,14 +10,14 @@
<div class="editor-actions">
<h3>{{ labelOf(item) }}</h3>
<div class="editor-actions">
<button type="button" class="secondary" (click)="move('header', item.id, -1)">↑</button>
<button type="button" class="secondary" (click)="move('header', item.id, 1)">↓</button>
<button type="button" class="secondary" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</button>
<app-button variant="secondary" size="sm" (click)="move('header', item.id, -1)">&uarr;</app-button>
<app-button variant="secondary" size="sm" (click)="move('header', item.id, 1)">&darr;</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><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
<label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
<label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(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"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('header', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
</div>
</article>
@@ -27,7 +27,7 @@
<div class="editor-actions">
<h2>{{ 'builder.navigationFooter' | translate }}</h2>
@if (footerLinks(); as footer) {
<button type="button" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</button>
<app-button variant="primary" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</app-button>
}
</div>
@@ -38,14 +38,14 @@
<div class="editor-actions">
<h3>{{ labelOf(item) }}</h3>
<div class="editor-actions">
<button type="button" class="secondary" (click)="move('footer', item.id, -1)">↑</button>
<button type="button" class="secondary" (click)="move('footer', item.id, 1)">↓</button>
<button type="button" class="secondary" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</button>
<app-button variant="secondary" size="sm" (click)="move('footer', item.id, -1)">&uarr;</app-button>
<app-button variant="secondary" size="sm" (click)="move('footer', item.id, 1)">&darr;</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><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
<label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
<label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(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"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('footer', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
</div>
</article>