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

feat(project-editor): adopt Toggle/SectionCard in homepage and widgets sections

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-16 02:07:41 +04:00
parent 475e5ad528
commit 1c51a819ed
4 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/features/project-editor/sections/homepage-section.component.html
View File

@@ -1,14 +1,13 @@
@if (homePage()) { @if (homePage()) {
<section class="editor-section-card"> <app-section-card [title]="'builder.homepage' | translate">
<h2>{{ 'builder.homepage' | translate }}</h2>
<div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)"> <div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)">
@for (section of sections(); track section.id) { @for (section of sections(); track section.id) {
<div class="sortable-item" cdkDrag> <div class="sortable-item" cdkDrag>
<div class="editor-grid four compact"> <div class="editor-grid four compact">
<strong>{{ section.id }}</strong> <strong>{{ section.id }}</strong>
<label> <label class="toggle-row">
<app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
<span>{{ 'builder.visible' | translate }}</span> <span>{{ 'builder.visible' | translate }}</span>
<input type="checkbox" [checked]="section.visible !== false" (change)="updateSection(section.id, 'visible', $any($event.target).checked)" />
<small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small> <small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small>
</label> </label>
<label> <label>
@@ -30,5 +29,5 @@
</div> </div>
} }
</div> </div>
</section> </app-section-card>
} }

4
src/app/features/project-editor/sections/homepage-section.component.ts
View File

@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe'; import { TranslatePipe } from '../../../i18n/translate.pipe';
import { InputComponent } from '../../../shared/ui/input/input.component'; import { InputComponent } from '../../../shared/ui/input/input.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
export interface LayoutStrategyOption { export interface LayoutStrategyOption {
value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split'; value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
@@ -14,7 +16,7 @@ export interface LayoutStrategyOption {
@Component({ @Component({
selector: 'app-project-editor-homepage-section', selector: 'app-project-editor-homepage-section',
standalone: true, standalone: true,
imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent], imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
templateUrl: './homepage-section.component.html', templateUrl: './homepage-section.component.html',
styleUrls: ['./section.shared.scss'], styleUrls: ['./section.shared.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

17
src/app/features/project-editor/sections/widgets-section.component.html
View File

@@ -1,6 +1,5 @@
@if (widgets().length > 0) { @if (widgets().length > 0) {
<section class="editor-section-card"> <app-section-card [title]="'builder.widgets' | translate">
<h2>{{ 'builder.widgets' | translate }}</h2>
<div class="stack-list"> <div class="stack-list">
@for (entry of widgets(); track entry.widget.id) { @for (entry of widgets(); track entry.widget.id) {
<article class="sub-card"> <article class="sub-card">
@@ -10,8 +9,8 @@
<div class="editor-grid two"> <div class="editor-grid two">
<label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label> <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
<label><span>{{ 'builder.height' | translate }}</span><small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label> <label><span>{{ 'builder.height' | translate }}</span><small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label>
<label><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['overlay']" (change)="updateProp(entry.widget.id, 'overlay', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['overlay']" (ngModelChange)="updateProp(entry.widget.id, 'overlay', $event)" [ariaLabel]="'builder.overlay' | translate" /><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small></label>
<label><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['autoplay']" (change)="updateProp(entry.widget.id, 'autoplay', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['autoplay']" (ngModelChange)="updateProp(entry.widget.id, 'autoplay', $event)" [ariaLabel]="'builder.autoplay' | translate" /><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small></label>
</div> </div>
} }
@case ('categories') { @case ('categories') {
@@ -24,10 +23,10 @@
<div class="editor-grid three"> <div class="editor-grid three">
<label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label> <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
<label><span>{{ 'builder.cardsPerRow' | translate }}</span><small class="field-desc">{{ 'builder.widgetCardsPerRowDesc' | translate }}</small><app-input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label> <label><span>{{ 'builder.cardsPerRow' | translate }}</span><small class="field-desc">{{ 'builder.widgetCardsPerRowDesc' | translate }}</small><app-input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label>
<label><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['filters']" (change)="updateProp(entry.widget.id, 'filters', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['filters']" (ngModelChange)="updateProp(entry.widget.id, 'filters', $event)" [ariaLabel]="'builder.filtersLabel' | translate" /><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small></label>
<label><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showBadges']" (change)="updateProp(entry.widget.id, 'showBadges', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showBadges']" (ngModelChange)="updateProp(entry.widget.id, 'showBadges', $event)" [ariaLabel]="'builder.showBadges' | translate" /><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small></label>
<label><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showRating']" (change)="updateProp(entry.widget.id, 'showRating', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showRating']" (ngModelChange)="updateProp(entry.widget.id, 'showRating', $event)" [ariaLabel]="'builder.showRating' | translate" /><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small></label>
<label><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showPrice']" (change)="updateProp(entry.widget.id, 'showPrice', $any($event.target).checked)" /></label> <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showPrice']" (ngModelChange)="updateProp(entry.widget.id, 'showPrice', $event)" [ariaLabel]="'builder.showPrice' | translate" /><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small></label>
</div> </div>
} }
@default { @default {
@@ -41,5 +40,5 @@
</article> </article>
} }
</div> </div>
</section> </app-section-card>
} }

4
src/app/features/project-editor/sections/widgets-section.component.ts
View File

@@ -3,11 +3,13 @@ import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe'; import { TranslatePipe } from '../../../i18n/translate.pipe';
import { InputComponent } from '../../../shared/ui/input/input.component'; import { InputComponent } from '../../../shared/ui/input/input.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
@Component({ @Component({
selector: 'app-project-editor-widgets-section', selector: 'app-project-editor-widgets-section',
standalone: true, standalone: true,
imports: [FormsModule, TranslatePipe, InputComponent], imports: [FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
templateUrl: './widgets-section.component.html', templateUrl: './widgets-section.component.html',
styleUrls: ['./section.shared.scss'], styleUrls: ['./section.shared.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush