feat(admin-ui): Numerous style tweaks

admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html

@@ -37,6 +37,6 @@
 <ng-template vdrDialogButtons>
     <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
     <button type="submit" (click)="select()" class="btn btn-primary" [disabled]="selection.length === 0">
-        {{ 'catalog.add-asset-to-product' | translate: { count: selection.length } }}
+        {{ 'catalog.add-asset-with-count' | translate: { count: selection.length } }}
     </button>
 </ng-template>

admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss

@@ -21,7 +21,8 @@
     }
 
     img {
-
+        margin: 12px;
+        box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.15)
     }
 }
 

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

@@ -22,9 +22,9 @@
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-facet="item">
-        <td class="left align-middle">{{ facet.code }}</td>
-        <td class="left align-middle">{{ facet.name }}</td>
-        <td class="left align-middle">
+        <td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.code }}</td>
+        <td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.name }}</td>
+        <td class="left align-middle" [class.private]="facet.isPrivate">
             <vdr-facet-value-chip
                 *ngFor="let value of (facet.values | slice: 0:3)"
                 [facetValue]="value"
@@ -33,19 +33,19 @@
             ></vdr-facet-value-chip>
             <vdr-chip *ngIf="facet.values.length > 3">+ {{ facet.values.length - 3 }}</vdr-chip>
         </td>
-        <td>
+        <td [class.private]="facet.isPrivate">
             <vdr-chip>
                 {{ facet.isPrivate ? ('catalog.private' | translate) : ('catalog.public' | translate) }}
             </vdr-chip>
         </td>
-        <td class="right align-middle">
+        <td class="right align-middle" [class.private]="facet.isPrivate">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"
                 [linkTo]="['./', facet.id]"
             ></vdr-table-row-action>
         </td>
-        <td class="right align-middle">
+        <td class="right align-middle" [class.private]="facet.isPrivate">
             <clr-dropdown>
                 <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
                     {{ 'common.actions' | translate }}

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

@@ -0,0 +1,7 @@
+@import "variables";
+
+td {
+    &.private {
+        background-color: $color-grey-200;
+    }
+}

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

@@ -39,13 +39,8 @@
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
-    <vdr-dt-column></vdr-dt-column>
-    <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
-    <vdr-dt-column></vdr-dt-column>
-    <vdr-dt-column></vdr-dt-column>
-    <vdr-dt-column></vdr-dt-column>
-    <ng-template let-result="item" #foo>
-        <td class="left align-middle">
+    <ng-template let-result="item">
+        <td class="left align-middle" [class.disabled]="!result.enabled">
             <div class="image-placeholder">
                 <img
                     *ngIf="
@@ -61,20 +56,20 @@
                 </ng-template>
             </div>
         </td>
-        <td class="left align-middle">
+        <td class="left align-middle" [class.disabled]="!result.enabled">
             {{ groupByProduct ? result.productName : result.productVariantName }}
         </td>
-        <td class="align-middle">
+        <td class="align-middle" [class.disabled]="!result.enabled">
             <vdr-chip *ngIf="!result.enabled">{{ 'common.disabled' | translate }}</vdr-chip>
         </td>
-        <td class="right align-middle">
+        <td class="right align-middle" [class.disabled]="!result.enabled">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"
                 [linkTo]="['./', result.productId]"
             ></vdr-table-row-action>
         </td>
-        <td class="right align-middle">
+        <td class="right align-middle" [class.disabled]="!result.enabled">
             <clr-dropdown>
                 <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
                     {{ 'common.actions' | translate }}

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

@@ -24,3 +24,6 @@
 .search-settings-menu {
     margin: 0 12px;
 }
+td.disabled {
+    background-color: $color-grey-200;
+}

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

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 :host {
     margin-top: 6px;
@@ -6,28 +7,7 @@
     width: 100%;
 
     ::ng-deep {
-
-        .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
-            background: none;
-            margin: 0;
-        }
-
-        .ng-dropdown-panel-items div.ng-option:last-child {
-            display: none;
-        }
-
-        .ng-dropdown-panel .ng-dropdown-header {
-            border: none;
-            padding: 0;
-        }
-
-        .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
-            padding: 0;
-        }
-
-        .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
-            padding-left: 8px;
-        }
+        @include ng-select-facet-values;
     }
 }
 

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

@@ -1,5 +1,9 @@
 <div class="variants-list">
-    <div class="variant-container card" *ngFor="let variant of variants; let i = index">
+    <div
+        class="variant-container card"
+        *ngFor="let variant of variants; let i = index"
+        [class.disabled]="!formArray.get([i, 'enabled']).value"
+    >
         <ng-container [formGroup]="formArray.at(i)">
             <div class="card-block header-row">
                 <div class="details">
@@ -24,7 +28,6 @@
                         </clr-input-container>
                     </vdr-title-input>
                 </div>
-                <div class="flex-spacer"></div>
                 <div>
                     <clr-toggle-wrapper>
                         <input type="checkbox" clrToggle name="enabled" formControlName="enabled" />

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

@@ -18,6 +18,10 @@
 }
 
 .variant-container {
+    transition: background-color 0.2s;
+    &.disabled {
+        background-color: $color-grey-200;
+    }
     .header-row {
         display: flex;
         align-items: center;
@@ -30,15 +34,24 @@
 
     .details {
         display: flex;
+        flex: 1;
         height: 36px;
-        // margin-left: 12px;
-        > div {
-            margin-right: 12px;
+        margin-right: 12px;
+
+        .name {
+            flex: 1;
+            ::ng-deep .clr-control-container {
+                width: 100%;
+                input.clr-input {
+                    min-width: 100%;
+                }
+            }
         }
 
         .sku {
             width: 160px;
             margin-right: 20px;
+            flex: 0;
         }
 
         ::ng-deep .name input {
@@ -85,12 +98,3 @@
         color: $color-grey-400;
     }
 }
-
-@media screen and (max-width: $breakpoint-small){
-    .details {
-        flex-direction: column;
-        ::ng-deep .clr-control-container, ::ng-deep input {
-            width: 100%
-        }
-    }
-}

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

@@ -7,9 +7,10 @@
     </ng-container>
     <vdr-dt-column>{{ 'catalog.price' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'catalog.stock-on-hand' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <ng-template let-variant="item" let-i="index">
         <ng-container [formGroup]="formArray.at(i)">
-            <td class="left align-middle">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
                 <div class="card-img">
                     <div class="featured-asset">
                         <img
@@ -22,7 +23,7 @@
                     </div>
                 </div>
             </td>
-            <td class="left align-middle">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -32,7 +33,7 @@
                     />
                 </clr-input-container>
             </td>
-            <td class="left align-middle">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -43,9 +44,11 @@
                 </clr-input-container>
             </td>
             <ng-container *ngFor="let option of variant.options">
-                <td class="left align-middle">{{ option.name }}</td>
+                <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+                    {{ option.name }}
+                </td>
             </ng-container>
-            <td class="left align-middle price">
+            <td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled']).value">
                 <clr-input-container>
                     <vdr-currency-input
                         clrInput
@@ -54,11 +57,16 @@
                     ></vdr-currency-input>
                 </clr-input-container>
             </td>
-            <td class="left align-middle stock">
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
                 <clr-input-container>
                     <input clrInput type="number" min="0" step="1" formControlName="stockOnHand" />
                 </clr-input-container>
             </td>
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
+                <clr-toggle-wrapper>
+                    <input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
+                </clr-toggle-wrapper>
+            </td>
         </ng-container>
     </ng-template>
 </vdr-data-table>

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

@@ -13,3 +13,10 @@ input {
         max-width: 96px;
     }
 }
+
+td {
+    transition: background-color 0.2s;
+    &.disabled {
+        background-color: $color-grey-200;
+    }
+}

admin-ui/src/app/shared/components/data-table/data-table.component.scss

@@ -20,6 +20,7 @@ thead th {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
+    margin-top: 6px;
 }
 
 .empty-state {

admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html

@@ -2,7 +2,6 @@
     [items]="facetValues"
     [addTag]="false"
     [hideSelected]="true"
-    groupBy="facetName"
     bindValue="id"
     multiple="true"
     appendTo="body"
@@ -10,4 +9,15 @@
     [disabled]="disabled"
     [ngModel]="value"
     (change)="onChange($event)"
-></ng-select>
+>
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+        <vdr-facet-value-chip
+            [facetValue]="item.value"
+            [removable]="true"
+            (remove)="clear(item)"
+        ></vdr-facet-value-chip>
+    </ng-template>
+    <ng-template ng-option-tmp let-item="item">
+        <vdr-facet-value-chip [facetValue]="item.value" [removable]="false"></vdr-facet-value-chip>
+    </ng-template>
+</ng-select>

admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.scss

@@ -0,0 +1,8 @@
+@import "variables";
+@import "mixins";
+
+:host {
+    ::ng-deep {
+        @include ng-select-facet-values;
+    }
+}

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

@@ -10,6 +10,7 @@
         max-width: 100%;
         &:not(:focus) {
             border-color: transparent !important;
+            background-color: transparent !important;
         }
     }
 

admin-ui/src/i18n-messages/en.json

@@ -23,7 +23,7 @@
   },
   "catalog": {
     "add-asset": "Add asset",
-    "add-asset-to-product": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}} to product",
+    "add-asset-with-count": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}}",
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "assets-selected-count": "{ count } assets selected",

admin-ui/src/styles/_mixins.scss

@@ -1,8 +1,32 @@
 @mixin no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@mixin ng-select-facet-values {
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+        background: none;
+        margin: 0;
+    }
+
+    .ng-dropdown-panel-items div.ng-option:last-child {
+        display: none;
+    }
+
+    .ng-dropdown-panel .ng-dropdown-header {
+        border: none;
+        padding: 0;
+    }
+
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+        padding: 0;
+    }
+
+    .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+        padding-left: 8px;
+    }
 }