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

color

Browse Source
This commit is contained in:
sdarbinyan
2026-03-24 03:12:04 +04:00
parent 2a41062769
commit ee23fd2d3c
4 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/pages/item-detail/item-detail.component.html
View File

@@ -102,19 +102,19 @@
}
</div>
@if (availableColours().length || availableSizes().length || item()!.colour || item()!.size) {
@if (availableColours().length || availableSizes().length || item()!.colour || (item()!.size && item()!.size!.toLowerCase() !== 'default')) {
<div class="novo-variants">
@if (availableColours().length) {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
@for (c of availableColours(); track c) {
<span class="variant-chip colour-chip" [class.active]="selectedColour() === c" (click)="selectColour(c)">{{ c }}</span>
<span class="colour-swatch" [class.active]="selectedColour() === c" [style.background-color]="c" [title]="c" (click)="selectColour(c)"></span>
}
</div>
} @else if (item()!.colour) {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
<span class="variant-chip colour-chip active">{{ item()!.colour }}</span>
<span class="colour-swatch active" [style.background-color]="item()!.colour" [title]="item()!.colour"></span>
</div>
}
@if (availableSizes().length) {
@@ -124,7 +124,7 @@
<span class="variant-chip size-chip" [class.active]="selectedSize() === s" (click)="selectSize(s)">{{ s }}</span>
}
</div>
} @else if (item()!.size) {
} @else if (item()!.size && item()!.size!.toLowerCase() !== 'default') {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.size' | translate }}:</span>
<span class="variant-chip size-chip active">{{ item()!.size }}</span>
@@ -381,19 +381,19 @@
}
</div>
@if (availableColours().length || availableSizes().length || item()!.colour || item()!.size) {
@if (availableColours().length || availableSizes().length || item()!.colour || (item()!.size && item()!.size!.toLowerCase() !== 'default')) {
<div class="dx-variants">
@if (availableColours().length) {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
@for (c of availableColours(); track c) {
<span class="variant-chip colour-chip" [class.active]="selectedColour() === c" (click)="selectColour(c)">{{ c }}</span>
<span class="colour-swatch" [class.active]="selectedColour() === c" [style.background-color]="c" [title]="c" (click)="selectColour(c)"></span>
}
</div>
} @else if (item()!.colour) {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
<span class="variant-chip colour-chip active">{{ item()!.colour }}</span>
<span class="colour-swatch active" [style.background-color]="item()!.colour" [title]="item()!.colour"></span>
</div>
}
@if (availableSizes().length) {
@@ -403,7 +403,7 @@
<span class="variant-chip size-chip" [class.active]="selectedSize() === s" (click)="selectSize(s)">{{ s }}</span>
}
</div>
} @else if (item()!.size) {
} @else if (item()!.size && item()!.size!.toLowerCase() !== 'default') {
<div class="variant-group">
<span class="variant-label">{{ 'itemDetail.size' | translate }}:</span>
<span class="variant-chip size-chip active">{{ item()!.size }}</span>

22
src/app/pages/item-detail/item-detail.component.scss
View File

@@ -296,7 +296,7 @@ $dx-card-bg: #f5f3f9;
// Variant chips (colour/size) — shared between dexar and novo
.dx-variants, .novo-variants {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
@@ -304,6 +304,7 @@ $dx-card-bg: #f5f3f9;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.variant-label {
@@ -335,6 +336,25 @@ $dx-card-bg: #f5f3f9;
box-shadow: 0 0 0 2px rgba(73, 118, 113, 0.25);
}
}
.colour-swatch {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid $dx-border;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
flex-shrink: 0;
&:hover {
border-color: $dx-primary;
}
&.active {
border-color: $dx-primary;
box-shadow: 0 0 0 2px rgba(73, 118, 113, 0.25);
}
}
}
.dx-attributes, .novo-attributes {

2
src/app/pages/item-detail/item-detail.component.ts
View File

@@ -47,7 +47,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
const filtered = colour
? details.filter(d => (d.colour || d.color) === colour)
: details;
const unique = [...new Set(filtered.map(d => d.size).filter((s): s is string => !!s))];
const unique = [...new Set(filtered.map(d => d.size).filter((s): s is string => !!s && s.toLowerCase() !== 'default'))];
return unique;
});