feat(admin-ui): Sticky action bar & other minor styling tweaks

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

@@ -24,19 +24,17 @@
     <div class="clr-row">
         <div class="clr-col">
     <section class="form-block" formGroupName="product">
-        <label>{{ 'catalog.product' | translate }}</label>
         <vdr-form-field [label]="'catalog.product-name' | translate" for="name">
             <input id="name" type="text" formControlName="name" (input)="updateSlug($event.target.value)">
         </vdr-form-field>
         <vdr-form-field [label]="'catalog.slug' | translate" for="slug">
             <input id="slug" type="text" formControlName="slug">
         </vdr-form-field>
-        <vdr-form-field [label]="'common.description' | translate" for="description">
-            <textarea id="description" formControlName="description"></textarea>
-        </vdr-form-field>
+        <vdr-rich-text-editor formControlName="description"
+                              [label]="'common.description' | translate"></vdr-rich-text-editor>
 
         <section formGroupName="customFields" *ngIf="customFields.length">
-            <label>{{ 'catalog.custom-fields' }}</label>
+            <label>{{ 'common.custom-fields' | translate }}</label>
             <ng-container *ngFor="let customField of customFields">
                 <vdr-custom-field-control *ngIf="customFieldIsSet(customField.name)"
                                           [customFieldsFormGroup]="productForm.get(['product', 'customFields'])"

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

@@ -1,5 +1,13 @@
 @import "variables";
 
+:host {
+    ::ng-deep {
+        trix-toolbar {
+            top: 24px;
+        }
+    }
+}
+
 .option-groups-list {
 
 }

admin-ui/src/app/shared/components/action-bar/action-bar.component.scss

@@ -1,4 +1,12 @@
+@import "variables";
+
 :host {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    background-color: $color-grey-1;
+    position: sticky;
+    top: -24px;
+    z-index: 5;
+    border-bottom: 1px solid $color-grey-3;
 }

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

@@ -1,5 +1,11 @@
 @import "variables";
 
+thead th {
+    position: sticky;
+    top: 24px;
+    z-index: 1;
+}
+
 .table-footer {
     display: flex;
     align-items: baseline;

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

@@ -1,5 +1,5 @@
 <clr-dropdown>
-    <button type="button" class="btn btn-outline-primary" clrDropdownTrigger>
+    <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
         <clr-icon shape="world"></clr-icon>
         {{ 'common.language' | translate }}: {{ currentLanguageCode | uppercase }}
         <clr-icon shape="caret down"></clr-icon>

admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -22,6 +22,7 @@ trix-editor {
     padding: 12px 12px 0;
     position: sticky;
     top: -24px;
+    z-index: 10;
 }
 
 label {

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

@@ -78,6 +78,7 @@
     "create": "Create",
     "created": "Created",
     "created-at": "Created at",
+    "custom-fields": "Custom fields",
     "description": "Description",
     "edit": "Edit",
     "edit-field": "Edit field",

admin-ui/src/styles/styles.scss

@@ -17,3 +17,7 @@ a:link, a:visited {
 .clr-form-control {
     margin-top: 0;
 }
+
+.table {
+    border-color: $color-grey-2;
+}