feat(admin-ui): More styling for product variant list

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

@@ -23,6 +23,7 @@
         min-height: 40px;
         padding: 0;
         position: relative;
+        padding: 6px;
     }
 
     .compact-select {

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

@@ -3,7 +3,7 @@
         <ng-container [formGroup]="formArray.at(i)">
             <div class="card-block header-row">
                 <div class="details">
-                    <div class="sku">
+                    <vdr-title-input class="sku">
                         <clr-input-container>
                             <input
                                 clrInput
@@ -12,8 +12,8 @@
                                 [placeholder]="'catalog.sku' | translate"
                             />
                         </clr-input-container>
-                    </div>
-                    <div class="name">
+                    </vdr-title-input>
+                    <vdr-title-input class="name">
                         <clr-input-container>
                             <input
                                 clrInput
@@ -22,7 +22,7 @@
                                 [placeholder]="'common.name' | translate"
                             />
                         </clr-input-container>
-                    </div>
+                    </vdr-title-input>
                 </div>
                 <div class="flex-spacer"></div>
                 <div>
@@ -75,29 +75,25 @@
                             ></vdr-variant-price-detail>
                         </div>
                         <div class="variant-form-input-row">
-                            <div class="stock">
-                                <clr-input-container>
-                                    <label>{{ 'catalog.stock-on-hand' | translate }}</label>
-                                    <input
-                                        clrInput
-                                        type="number"
-                                        min="0"
-                                        step="1"
-                                        formControlName="stockOnHand"
-                                    />
-                                </clr-input-container>
-                            </div>
-                            <div class="stock">
-                                <clr-checkbox-wrapper>
-                                    <input
-                                        type="checkbox"
-                                        clrCheckbox
-                                        name="trackInventory"
-                                        formControlName="trackInventory"
-                                    />
-                                    <label>{{ 'catalog.track-inventory' | translate }}</label>
-                                </clr-checkbox-wrapper>
-                            </div>
+                            <clr-input-container>
+                                <label>{{ 'catalog.stock-on-hand' | translate }}</label>
+                                <input
+                                    clrInput
+                                    type="number"
+                                    min="0"
+                                    step="1"
+                                    formControlName="stockOnHand"
+                                />
+                            </clr-input-container>
+                            <clr-checkbox-wrapper class="track-inventory-toggle">
+                                <input
+                                    type="checkbox"
+                                    clrCheckbox
+                                    name="trackInventory"
+                                    formControlName="trackInventory"
+                                />
+                                <label>{{ 'catalog.track-inventory' | translate }}</label>
+                            </clr-checkbox-wrapper>
                         </div>
                     </div>
                 </div>

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

@@ -36,25 +36,30 @@
             margin-right: 12px;
         }
 
-        .name, .sku {
-            font-weight: bold;
+        .sku {
+            width: 160px;
+            margin-right: 20px;
         }
 
         ::ng-deep .name input {
-           min-width: 300px;
+            min-width: 300px;
         }
     }
 
     .variant-form-input-row {
         display: flex;
         flex-wrap: wrap;
-        margin: 0 6px 24px 24px;
+        margin: 0 6px 32px 24px;
 
         > * {
-            margin-right: 12px;
+            margin-right: 24px;
         }
     }
 
+    .track-inventory-toggle {
+        margin-top: 22px;
+    }
+
     .flex-spacer {
         flex: 1;
     }
@@ -77,6 +82,7 @@
 
     .options-facets {
         display: flex;
+        color: $color-grey-400;
     }
 }
 

admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.html

@@ -1,8 +1,8 @@
 <label class="clr-control-label">{{ 'catalog.taxes' | translate }}</label>
-<div *ngIf="priceIncludesTax">
+<div *ngIf="priceIncludesTax" class="value">
     {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}
 </div>
-<div *ngIf="!priceIncludesTax">
+<div *ngIf="!priceIncludesTax" class="value">
     {{
         'catalog.price-with-tax-in-default-zone'
             | translate: { price: grossPrice$ | async | currency: currencyCode, rate: taxRate$ | async }

admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.scss

@@ -2,3 +2,7 @@
     display: flex;
     flex-direction: column;
 }
+
+.value {
+    margin-top: 3px;
+}

admin-ui/src/app/shared/components/title-input/title-input.component.html

@@ -0,0 +1,4 @@
+<ng-content></ng-content>
+<div class="edit-icon">
+    <clr-icon shape="edit"></clr-icon>
+</div>

admin-ui/src/app/shared/components/title-input/title-input.component.scss

@@ -0,0 +1,38 @@
+@import "variables";
+
+:host {
+    display: block;
+    position: relative;
+
+    ::ng-deep input {
+        font-size: 18px;
+        color: $color-grey-700;
+        max-width: 100%;
+        &:not(:focus) {
+            border-color: transparent !important;
+        }
+    }
+
+    ::ng-deep .clr-control-container {
+        max-width: 100%;
+    }
+
+    .edit-icon {
+        position: absolute;
+        right: 8px;
+        top: 6px;
+        color: $color-grey-300;
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    &:hover {
+        ::ng-deep input:not(:focus) {
+            background-color: $color-grey-200 !important;
+        }
+        .edit-icon {
+            opacity: 1;
+        }
+    }
+
+}

admin-ui/src/app/shared/components/title-input/title-input.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'vdr-title-input',
+    templateUrl: './title-input.component.html',
+    styleUrls: ['./title-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TitleInputComponent {}

admin-ui/src/app/shared/shared.module.ts

@@ -37,6 +37,7 @@ import { RichTextEditorComponent } from './components/rich-text-editor/rich-text
 import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
 import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
+import { TitleInputComponent } from './components/title-input/title-input.component';
 import { BackgroundColorFromDirective } from './directives/background-color-from.directive';
 import { CurrencyNamePipe } from './pipes/currency-name.pipe';
 import { FileSizePipe } from './pipes/file-size.pipe';
@@ -86,6 +87,7 @@ const DECLARATIONS = [
     LanguageSelectorComponent,
     RichTextEditorComponent,
     SimpleDialogComponent,
+    TitleInputComponent,
 ];
 
 @NgModule({