[ADF-992] improve datatable styles according to UX guidelines (#2088)

* improve datatable style

* datatable and document list enhancements

- support to toggle header in DataTable
- Document List automatically hides header for empty content

ng2-components/ng2-alfresco-datatable/README.md

@@ -160,6 +160,7 @@ export class DataTableDemo {
 | contextMenu | boolean | false | Toggles custom context menu for the component |
 | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
 | loading | boolean | false | Flag that indicate if the datable is in loading state and need to show the loading template. Read the documentation above to know how to configure a loading template  |
+| showHeader | boolean | true | Toggles header visibility |
 
 ### DataColumn Properties
 

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -1,7 +1,8 @@
 <table
     *ngIf="data"
     class="full-width adf-data-table">
-    <thead>
+
+    <thead *ngIf="showHeader">
     <tr>
         <!-- Actions (left) -->
         <th *ngIf="actions && actionsPosition === 'left'" class="actions-column">
@@ -27,8 +28,8 @@
         </th>
     </tr>
     </thead>
-    <tbody>
 
+    <tbody>
     <ng-container *ngIf="!loading">
         <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
             [class.is-selected]="row.isSelected"

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss

@@ -1,16 +1,16 @@
 @import 'theming';
 
-$data-table-font-size: 13px !default;
+$data-table-font-size: 14px !default;
 $data-table-header-font-size: 12px !default;
 $data-table-header-sort-icon-size: 16px !default;
-$data-table-header-color: rgba(#000, 0.54) !default;
+$data-table-header-color: $alfresco-secondary-text-color !default;
-$data-table-header-sorted-color: rgba(#000, 0.87) !default;
+$data-table-header-sorted-color: $alfresco-primary-text-color !default;
-$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
+$data-table-header-sorted-icon-hover-color: $alfresco-disabled-text-color !default;
-$data-table-divider-color: rgba(#000, 0.12) !default;
+$data-table-divider-color: $alfresco-divider-color !default;
 $data-table-hover-color: #eeeeee !default;
-$data-table-selection-color: #e0e0e0 !default;
+$data-table-selection-color: #e0f7fa !default;
 $data-table-dividers: 1px solid $data-table-divider-color !default;
-$data-table-row-height: 48px !default;
+$data-table-row-height: 56px !default;
 // $data-table-last-row-height: 56px !default;
 // $data-table-header-height: 56px !default;
 $data-table-column-spacing: 36px !default;
@@ -20,9 +20,10 @@ $data-table-column-padding: $data-table-column-spacing / 2;
 $data-table-card-padding: 24px !default;
 // $data-table-button-padding-right: 16px !default;
 $data-table-cell-top: $data-table-card-padding / 2;
-
+$data-table-drag-border: 1px dashed rgb(68,138,255);
 
 .adf-data-table {
+    width: 100%;
     position: relative;
     border: $data-table-dividers;
     border-collapse: collapse;
@@ -76,6 +77,7 @@ $data-table-cell-top: $data-table-card-padding / 2;
     }
 
     td {
+        color: $alfresco-secondary-text-color;
         position: relative;
         vertical-align: middle;
         height: $data-table-row-height;
@@ -157,6 +159,7 @@ $data-table-cell-top: $data-table-card-padding / 2;
 
     .full-width {
         width: 100%;
+        color: $alfresco-primary-text-color;
     }
 
     /* Empty folder */
@@ -243,15 +246,15 @@ $data-table-cell-top: $data-table-card-padding / 2;
 
 .adf-upload__dragging {
     & > td {
-        border-top: 1px dashed rgb(68,138,255);
+        border-top: $data-table-drag-border;
-        border-bottom: 1px dashed rgb(68,138,255);
+        border-bottom: $data-table-drag-border;
 
         &:first-child {
-            border-left: 1px dashed rgb(68,138,255);
+            border-left: $data-table-drag-border;
         }
 
         &:last-child {
-            border-right: 1px dashed rgb(68,138,255);
+            border-right: $data-table-drag-border;
         }
     }
 }

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -71,6 +71,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     @Input()
     rowStyleClass: string;
 
+    @Input()
+    showHeader: boolean = true;
+
     @Output()
     rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -16,6 +16,7 @@
     [rowStyle]="rowStyle"
     [rowStyleClass]="rowStyleClass"
     [loading]="loading"
+    [showHeader]="!isEmpty()"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"