feat(admin-ui): Improve styling of facet values

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

@@ -25,7 +25,12 @@
         <td class="left">{{ facet.code }}</td>
         <td class="left">{{ facet.name }}</td>
         <td class="left">
-            <vdr-chip *ngFor="let value of facet.values">{{ value.name }}</vdr-chip>
+            <vdr-facet-value-chip
+                *ngFor="let value of facet.values"
+                [facetValue]="value"
+                [removable]="false"
+                [displayFacetName]="false"
+            ></vdr-facet-value-chip>
         </td>
         <td class="right">
             <vdr-table-row-action

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

@@ -62,7 +62,7 @@
     </div>
     <div class="clr-row">
         <div class="clr-col">
-            <h3>{{ 'catalog.facets' | translate }}</h3>
+            <h4>{{ 'catalog.facets' | translate }}</h4>
             <div class="facets">
                 <vdr-facet-value-chip
                     *ngFor="let facetValue of (facetValues$ | async)"

admin-ui/src/app/catalog/components/product-category-tree/product-category-tree-node.component.html

@@ -17,7 +17,14 @@
                 <clr-icon shape="folder"></clr-icon>
                 {{ category.name }}
             </div>
-            <div class="flex-spacer"></div>
+            <div class="flex-spacer">
+                <vdr-facet-value-chip
+                    *ngFor="let facetValue of category.facetValues"
+                    [facetValue]="facetValue"
+                    [displayFacetName]="false"
+                    [removable]="false"
+                ></vdr-facet-value-chip>
+            </div>
             <a class="btn btn-link btn-sm" [routerLink]="['./', category.id]">
                 <clr-icon shape="edit"></clr-icon>
                 {{ 'common.edit' | translate }}

admin-ui/src/app/catalog/components/product-category-tree/product-category-tree-node.component.scss

@@ -11,6 +11,7 @@
     .category-detail {
         padding: 12px;
         display: flex;
+        align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid $color-grey-2;
 

admin-ui/src/app/shared/components/chip/chip.component.scss

@@ -10,7 +10,7 @@
     border-radius: 3px;
     margin: 6px;
     &.with-background {
-        color: $color-grey-1;
+        color: transparentize($color-grey-1, 0.2);
         border-color: transparent;
     }
 }

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

@@ -1,4 +1,9 @@
-<vdr-chip icon="times" [colorFrom]="facetValue.facet.name" (iconClick)="remove.emit()">
-    <span class="facet-name">{{ facetValue.facet.name }}</span>
+<vdr-chip
+    [icon]="removable ? 'times' : undefined"
+    [colorFrom]="facetValue.facet.name"
+    (iconClick)="remove.emit()"
+    [title]="facetValue.facet.name + ' - ' + facetValue.name"
+>
+    <span *ngIf="displayFacetName" class="facet-name">{{ facetValue.facet.name }}</span>
     {{ facetValue.name }}
 </vdr-chip>

admin-ui/src/app/shared/components/facet-value-chip/facet-value-chip.component.ts

@@ -9,5 +9,7 @@ import { FacetValue } from 'shared/generated-types';
 })
 export class FacetValueChipComponent {
     @Input() facetValue: FacetValue.Fragment;
+    @Input() removable = true;
+    @Input() displayFacetName = true;
     @Output() remove = new EventEmitter<void>();
 }

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

@@ -23,6 +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-facet": "Add facet",
     "add-facet-value": "Add facet value",
     "apply-facets": "Apply facets",
     "assets-selected-count": "{ count } assets selected",
@@ -43,7 +44,6 @@
     "move-down": "Move down",
     "move-to": "Move to",
     "move-up": "Move up",
-    "no-facets": "No facets",
     "no-featured-asset": "No featured asset",
     "no-selection": "No selection",
     "notify-create-assets-success": "Created {count, plural, one {new Asset} other {{count} new Assets}}",
@@ -105,7 +105,6 @@
     "password": "Password",
     "remember-me": "Remember me",
     "remove": "Remove",
-    "save-changes": "Save changes",
     "select": "Select...",
     "update": "Update",
     "updated": "Updated",