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

12
src/app/features/project-editor/sections/footer-section.component.html
View File

@@ -2,14 +2,14 @@
<section class="editor-section-card">
<h2>{{ 'builder.footer' | translate }}</h2>
<div class="editor-grid two">
<label><span>{{ 'builder.companyName' | translate }}</span><small class="field-desc">{{ 'builder.companyNameDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></label>
<label><span>{{ 'builder.address' | translate }}</span><small class="field-desc">{{ 'builder.addressDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></label>
<label><span>{{ 'builder.phone' | translate }}</span><small class="field-desc">{{ 'builder.phoneDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></label>
<label><span>{{ 'builder.email' | translate }}</span><small class="field-desc">{{ 'builder.emailDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></label>
<label class="full"><span>{{ 'builder.copyright' | translate }}</span><small class="field-desc">{{ 'builder.copyrightDesc' | translate }}</small><input type="text" [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></label>
<app-form-field [label]="'builder.companyName' | translate" [hint]="'builder.companyNameDesc' | translate"><app-input [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></app-form-field>
<app-form-field [label]="'builder.address' | translate" [hint]="'builder.addressDesc' | translate"><app-input [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></app-form-field>
<app-form-field [label]="'builder.phone' | translate" [hint]="'builder.phoneDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></app-form-field>
<app-form-field [label]="'builder.email' | translate" [hint]="'builder.emailDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></app-form-field>
<app-form-field class="full" [label]="'builder.copyright' | translate" [hint]="'builder.copyrightDesc' | translate"><app-input [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></app-form-field>
<label class="full"><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small><textarea rows="4" [ngModel]="paymentIconsValue()" (ngModelChange)="updatePaymentIcons($event)"></textarea></label>
<label class="full"><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small><textarea rows="4" [ngModel]="socialLinksValue()" (ngModelChange)="updateSocialLinks($event)"></textarea></label>
<label class="full"><span>{{ 'builder.staticPages' | translate }}</span><small class="field-desc">{{ 'builder.staticPagesFieldDesc' | translate }}</small><input type="text" [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></label>
<app-form-field class="full" [label]="'builder.staticPages' | translate" [hint]="'builder.staticPagesFieldDesc' | translate"><app-input [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></app-form-field>
</div>
</section>
}