From 7da9bd89cb9c0a4bc225be863be3554feefa14b5 Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Fri, 1 Mar 2019 17:23:31 +0100 Subject: [PATCH] [ADF-4122] Add sticky header feature to datatable and refactor styles (#4370) * [ADF-4122] Add sticky header config to datatable and refactor styles * [ADF-4122] Fix core unit tests * [ADF-4122] Commit requested changes * [ADF-4122] Fix e2e tests * Update docs/core/datatable.component.md Co-Authored-By: davidcanonieto --- demo-shell/src/app/app.component.scss | 6 +- .../datatable/datatable.component.html | 55 +-- .../datatable/datatable.component.ts | 17 +- .../app/components/files/files.component.html | 5 +- .../app/components/files/files.component.scss | 18 +- .../process-service.component.scss | 10 +- .../trashcan/trashcan.component.html | 4 +- docs/core/data-column.component.md | 2 +- docs/core/datatable.component.md | 76 ++++ docs/docassets/images/datatable-expand-5.png | Bin 0 -> 103154 bytes .../images/datatable-sticky-header.png | Bin 0 -> 56846 bytes .../images/datatable-truncated-text.png | Bin 0 -> 62353 bytes .../images/datatable-wrapped-text.png | Bin 0 -> 81099 bytes e2e/pages/adf/contentServicesPage.ts | 20 +- e2e/pages/adf/dialog/contentListPage.ts | 2 +- e2e/pages/adf/process-services/tasksPage.ts | 2 +- ...content-node-selector-panel.component.html | 2 +- ...content-node-selector-panel.component.scss | 47 +-- .../components/document-list.component.scss | 13 +- .../document-list.component.spec.ts | 6 +- .../datatable/datatable.component.html | 43 +- .../datatable/datatable.component.scss | 381 +++++++++--------- .../datatable/datatable.component.spec.ts | 16 +- .../datatable/datatable.component.ts | 4 + .../empty-content.component.scss | 6 +- .../people-list/people-list.component.scss | 4 +- .../components/people/people.component.scss | 2 +- 27 files changed, 418 insertions(+), 323 deletions(-) create mode 100644 docs/docassets/images/datatable-expand-5.png create mode 100644 docs/docassets/images/datatable-sticky-header.png create mode 100644 docs/docassets/images/datatable-truncated-text.png create mode 100644 docs/docassets/images/datatable-wrapped-text.png diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss index f15d10be2c..88ac91260b 100644 --- a/demo-shell/src/app/app.component.scss +++ b/demo-shell/src/app/app.component.scss @@ -10,12 +10,12 @@ router-outlet[name='overlay'] + * { @media (max-width: 425px) { adf-content-node-selector { .adf-content-node-selector-content-list { - .adf-data-table-cell { + .adf-datatable-cell { display: none; } - .adf-data-table-cell:first-child, - .adf-data-table-cell:nth-child(2) { + .adf-datatable-cell:first-child, + .adf-datatable-cell:nth-child(2) { display: table-cell; } } diff --git a/demo-shell/src/app/components/datatable/datatable.component.html b/demo-shell/src/app/components/datatable/datatable.component.html index 5d95002843..6c0cbd8ce7 100644 --- a/demo-shell/src/app/components/datatable/datatable.component.html +++ b/demo-shell/src/app/components/datatable/datatable.component.html @@ -2,28 +2,37 @@ - - - - + + Sticky header + + +
+ + + + +
Selected items: {{ dataTable.selection?.length }} @@ -47,4 +56,4 @@ -
+ \ No newline at end of file diff --git a/demo-shell/src/app/components/datatable/datatable.component.ts b/demo-shell/src/app/components/datatable/datatable.component.ts index bfe9185149..16e6a48c5f 100644 --- a/demo-shell/src/app/components/datatable/datatable.component.ts +++ b/demo-shell/src/app/components/datatable/datatable.component.ts @@ -54,6 +54,7 @@ export class DataTableComponent { multiselect = false; data: FilteredDataAdapter; + stickyHeader = false; @Input() selectionMode = 'single'; @@ -100,18 +101,18 @@ export class DataTableComponent { }, { id: 4, - name: 'Image 1', + name: 'Image 8', createdOn: new Date(2016, 6, 2, 15, 8, 4), createdBy: this._createdBy, - icon: this._imageUrl + icon: 'material-icons://alarm' } ], [ { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' }, - { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-desktop-only'}, - { type: 'text', key: 'createdOn', title: 'Created On', sortable: true }, - { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-full-width adf-name-column', sortable: true }, - { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: 'adf-desktop-only'} + { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-ellipsis-cell' }, + { type: 'text', key: 'createdOn', title: 'Created On', sortable: true, cssClass: 'adf-ellipsis-cell adf-expand-cell-5' }, + { type: 'text', key: 'name', title: 'Name', cssClass: '', sortable: true }, + { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''} ] ); @@ -199,4 +200,8 @@ export class DataTableComponent { onRowDblClick(event) { this.logService.log(event); } + + toggleStickyHeader() { + this.stickyHeader = !this.stickyHeader; + } } diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 4b47c3e023..09ffaca6f5 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -202,6 +202,7 @@ + class="adf-ellipsis-cell adf-expand-cell-5"> @@ -254,7 +255,7 @@ key="name" title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}" [formatTooltip]="getNodeNameTooltip" - class="adf-full-width adf-ellipsis-cell"> + class="adf-ellipsis-cell adf-expand-cell-5"> -
+
Actions
-
+
-
{{ col.title | translate}}
-
+
Actions
@@ -57,7 +58,7 @@ [ngClass]="getRowStyle(row)" (keyup)="onRowKeyUp(row, $event)"> -
+
-
+
-
+
{{ asIconValue(row, col) }} @@ -156,7 +157,7 @@
-
+
@@ -167,7 +168,7 @@
+ class="adf-datatable-cell adf-datatable__actions-cell">