From 4e05e788469f8070c8f2b3c240a389f012e99bd7 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 26 Feb 2018 14:57:27 +0000 Subject: [PATCH] fix empty datatable hiding the header (#3003) --- .../components/datatable/datatable.component.html | 10 ++++------ .../components/datatable/datatable.component.scss | 1 + .../datatable/datatable.component.spec.ts | 13 +++++++++++++ .../components/datatable/datatable.component.ts | 8 ++++++++ .../process-attachment-list.component.scss | 9 +-------- .../attachment/task-attachment-list.component.scss | 8 +------- 6 files changed, 28 insertions(+), 21 deletions(-) diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index 4fb4ada050..d7376cc890 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/lib/core/datatable/components/datatable/datatable.component.html @@ -2,7 +2,7 @@ *ngIf="data" class="full-width" [class.adf-data-table-card]="display === 'gallery'" [class.adf-data-table]="display === 'list'"> -
+
@@ -173,11 +173,10 @@
-
-
+
@@ -200,8 +199,7 @@
-
+
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 54cefdcff8..7d17f5e498 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -363,6 +363,7 @@ .adf-no-content-container { padding: 0 !important; border: none !important; + width: 100%; & > img { width: 100%; diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index 7c9c16bbb5..59d516edec 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -111,6 +111,19 @@ describe('DataTable', () => { expect(element.querySelector('.adf-datatable-header')).toBe(null); }); + it('should hide the header if there are no elements inside', () => { + let newData = new ObjectDataTableAdapter( + ); + + dataTable.ngOnChanges({ + data: new SimpleChange(null, newData, false) + }); + + fixture.detectChanges(); + + expect(element.querySelector('.adf-datatable-header')).toBe(null); + }); + it('should show the header if showHeader is true', () => { let newData = new ObjectDataTableAdapter( [ diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 43b4b48437..550f9243a3 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -535,6 +535,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck }); } + isEmpty() { + return this.data.getRows().length === 0; + } + + isHeaderVisible() { + return this.showHeader && !this.loading && !this.isEmpty(); + } + private emitRowSelectionEvent(name: string, row: DataRow) { const domEvent = new CustomEvent(name, { detail: { diff --git a/lib/process-services/attachment/process-attachment-list.component.scss b/lib/process-services/attachment/process-attachment-list.component.scss index 27b2a771b0..a158054f87 100644 --- a/lib/process-services/attachment/process-attachment-list.component.scss +++ b/lib/process-services/attachment/process-attachment-list.component.scss @@ -1,10 +1,6 @@ @mixin adf-process-attachment-list-theme($theme) { - adf-datatable ::ng-deep th span { - color: #232323; - } - - adf-datatable ::ng-deep .data-cell { + .data-cell { cursor: pointer !important; } @@ -19,7 +15,6 @@ font-size: 24px; line-height: 1.33; letter-spacing: -1px; - color: #000000; } .adf-empty-list-drag_drop { @@ -28,7 +23,6 @@ font-size: 56px; line-height: 1; letter-spacing: -2px; - color: #000000; margin-top: 40px !important; word-break: break-all; white-space: pre-line; @@ -40,7 +34,6 @@ font-size: 16px; line-height: 1.5; letter-spacing: -0.4px; - color: #000000; margin-top: 17px; word-break: break-all; white-space: pre-line; diff --git a/lib/process-services/attachment/task-attachment-list.component.scss b/lib/process-services/attachment/task-attachment-list.component.scss index 34dc6093d2..740b7d232a 100644 --- a/lib/process-services/attachment/task-attachment-list.component.scss +++ b/lib/process-services/attachment/task-attachment-list.component.scss @@ -1,10 +1,7 @@ @mixin adf-task-attachment-list-theme($theme) { - adf-datatable ::ng-deep th span { - color: #232323; - } - adf-datatable ::ng-deep .data-cell { + adf-datatable .data-cell { cursor: pointer !important; } @@ -19,7 +16,6 @@ font-size: 24px; line-height: 1.33; letter-spacing: -1px; - color: #000000; } .adf-empty-list-drag_drop { @@ -28,7 +24,6 @@ font-size: 56px; line-height: 1; letter-spacing: -2px; - color: #000000; margin-top: 40px; word-break: break-all; white-space: pre-line; @@ -44,7 +39,6 @@ font-size: 16px; line-height: 1.5; letter-spacing: -0.4px; - color: #000000; margin-top: 17px; word-break: break-all; white-space: pre-line;