feat(admin-ui): Improve layout of ProductVariantList card

admin-ui/src/app/catalog/components/product-assets/product-assets.component.html

@@ -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'" />
@@ -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
@@ -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"
@@ -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

admin-ui/src/app/catalog/components/product-assets/product-assets.component.scss

@@ -4,7 +4,7 @@
     width: 340px;
     display: block;
     &.compact {
-        width: 50px;
+        width: 162px;
     }
 }
 
@@ -19,7 +19,7 @@
     padding: 6px;
 
     &.compact {
-        width: 50px;
+        width: 100%;
         min-height: 40px;
         padding: 0;
         position: relative;

admin-ui/src/app/catalog/components/product-assets/product-assets.component.ts

@@ -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, {

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -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>
@@ -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>
@@ -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"
@@ -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>
@@ -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>
@@ -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>

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss

@@ -24,9 +24,13 @@
         flex-wrap: wrap;
     }
 
+    .variant-body {
+        display: flex;
+    }
+
     .details {
         display: flex;
-        margin-left: 12px;
+        // margin-left: 12px;
         > div {
             margin-right: 12px;
         }
@@ -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;
     }
@@ -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){

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.ts

@@ -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;