Skip to content

Commit

Permalink
feat(admin-ui): Improve layout of ProductVariantList card
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed May 6, 2019
1 parent cbfff34 commit 8ecd2c3
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 72 deletions.
23 changes: 6 additions & 17 deletions admin-ui/src/app/catalog/components/product-assets/product-assets.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="card" *ngIf="!compact; else: compactView">
<div class="card" *ngIf="!compact; else compactView">
<div class="card-img">
<div class="featured-asset">
<img *ngIf="featuredAsset" [src]="featuredAsset!.preview + '?preset=small'" />
Expand All @@ -19,21 +19,9 @@

<ng-template #compactView>
<div class="featured-asset compact">
<clr-dropdown *ngIf="featuredAsset">
<img clrDropdownTrigger [src]="featuredAsset!.preview + '?preset=tiny'" />
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<button
type="button"
class="remove-asset"
clrDropdownItem
(click)="removeAsset(featuredAsset)"
>
{{ 'catalog.remove-asset' | translate }}
</button>
</clr-dropdown-menu>
</clr-dropdown>
<img *ngIf="featuredAsset" [src]="featuredAsset!.preview + '?preset=thumb'" />

<div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="48"></clr-icon></div>
<div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="150"></clr-icon></div>
</div>
<ng-container *ngTemplateOutlet="assetList"></ng-container>
<button
Expand All @@ -42,12 +30,13 @@
(click)="selectAssets()"
>
<clr-icon shape="attachment"></clr-icon>
{{ 'catalog.add-asset' | translate }}
</button>
</ng-template>

<ng-template #assetList>
<div class="all-assets" [class.compact]="compact">
<ng-container *ngFor="let asset of getAssetList()">
<ng-container *ngFor="let asset of assets">
<clr-dropdown>
<div
class="asset-thumb"
Expand All @@ -56,7 +45,7 @@
[title]=""
tabindex="0"
>
<img [src]="asset.preview + (compact ? '?w=20' : '?preset=tiny')" />
<img [src]="asset.preview + '?preset=tiny'" />
</div>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<button
Expand Down
4 changes: 2 additions & 2 deletions admin-ui/src/app/catalog/components/product-assets/product-assets.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
width: 340px;
display: block;
&.compact {
width: 50px;
width: 162px;
}
}

Expand All @@ -19,7 +19,7 @@
padding: 6px;

&.compact {
width: 50px;
width: 100%;
min-height: 40px;
padding: 0;
position: relative;
Expand Down
9 changes: 0 additions & 9 deletions admin-ui/src/app/catalog/components/product-assets/product-assets.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,6 @@ export class ProductAssetsComponent {

constructor(private modalService: ModalService, private changeDetector: ChangeDetectorRef) {}

nonFeaturedAssets(): Asset[] {
const featuredAssetId = this.featuredAsset && this.featuredAsset.id;
return this.assets.filter(a => a.id !== featuredAssetId);
}

getAssetList(): Asset[] {
return this.compact ? this.nonFeaturedAssets() : this.assets;
}

selectAssets() {
this.modalService
.fromComponent(AssetPickerDialogComponent, {
Expand Down
67 changes: 32 additions & 35 deletions ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,7 @@
<div class="with-selected">
<vdr-select-toggle
size="small"
[selected]="areAllSelected()"
(selectedChange)="toggleSelectAll()"
></vdr-select-toggle>
<ng-content></ng-content>
</div>
<div class="variants-list">
<div class="variant-container card" *ngFor="let variant of variants; let i = index">
<ng-container [formGroup]="formArray.at(i)">
<div class="card-block header-row">
<div class="toggle">
<vdr-select-toggle
size="small"
[selected]="isVariantSelected(variant.id)"
(selectedChange)="toggleSelectVariant(variant.id)"
></vdr-select-toggle>
</div>
<div class="details">
<div class="sku">
<clr-input-container>
Expand All @@ -39,12 +24,6 @@
</clr-input-container>
</div>
</div>
<div *ngIf="variant.options.length">
<div class="options">
{{ 'catalog.options' | translate }}:
<vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
</div>
</div>
<div class="flex-spacer"></div>
<div>
<clr-toggle-wrapper>
Expand All @@ -54,7 +33,7 @@
</div>
</div>
<div class="card-block">
<div class="row">
<div class="variant-body">
<div class="assets">
<vdr-product-assets
[compact]="true"
Expand All @@ -63,8 +42,8 @@
(change)="onAssetChange(variant.id, $event)"
></vdr-product-assets>
</div>
<div class="col">
<div class="pricing">
<div class="variant-form-inputs">
<div class="variant-form-input-row">
<div class="tax-category">
<clr-select-container>
<label>{{ 'catalog.tax-category' | translate }}</label>
Expand Down Expand Up @@ -94,6 +73,8 @@
[priceIncludesTax]="variant.priceIncludesTax"
[taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
></vdr-variant-price-detail>
</div>
<div class="variant-form-input-row">
<div class="stock">
<clr-input-container>
<label>{{ 'catalog.stock-on-hand' | translate }}</label>
Expand Down Expand Up @@ -122,17 +103,33 @@
</div>
</div>
<div class="card-block">
<div class="facets">
<vdr-facet-value-chip
*ngFor="let facetValue of existingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<vdr-facet-value-chip
*ngFor="let facetValue of pendingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<div class="options-facets">
<div *ngIf="variant.options.length">
<div class="options">
{{ 'catalog.options' | translate }}:
<vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
</div>
</div>
<div class="flex-spacer"></div>
<div class="facets">
<vdr-facet-value-chip
*ngFor="let facetValue of existingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<vdr-facet-value-chip
*ngFor="let facetValue of pendingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<button
class="btn btn-sm btn-secondary"
(click)="selectFacetValueClick.emit([variant.id])"
>
<clr-icon shape="plus"></clr-icon>
{{ 'catalog.add-facets' | translate }}
</button>
</div>
</div>
</div>
</ng-container>
Expand Down
28 changes: 19 additions & 9 deletions ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,13 @@
flex-wrap: wrap;
}

.variant-body {
display: flex;
}

.details {
display: flex;
margin-left: 12px;
// margin-left: 12px;
> div {
margin-right: 12px;
}
Expand All @@ -40,6 +44,16 @@
}
}

.variant-form-input-row {
display: flex;
flex-wrap: wrap;
margin: 0 6px 24px 24px;

> * {
margin-right: 12px;
}
}

.flex-spacer {
flex: 1;
}
Expand All @@ -53,20 +67,16 @@
align-items: center;
}

.row {
display: flex;
}

.assets {
margin-right: 12px;
}

.pricing {
display: flex;
> div {
margin-right: 12px;
}
}

.options-facets {
display: flex;
}
}

@media screen and (max-width: $breakpoint-small){
Expand Down
1 change: 1 addition & 0 deletions admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
@Input() facets: FacetWithValues.Fragment[];
@Output() assetChange = new EventEmitter<VariantAssetChange>();
@Output() selectionChange = new EventEmitter<string[]>();
@Output() selectFacetValueClick = new EventEmitter<string[]>();
selectedVariantIds: string[] = [];
private facetValues: FacetValue.Fragment[];
private formSubscription: Subscription;
Expand Down

0 comments on commit 8ecd2c3

Please sign in to comment.