inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4122] Add sticky header feature to datatable and refactor styles (#4370)

Browse Source 
* [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 <david.cano@alfresco.com>
This commit is contained in:
davidcanonieto
2019-03-01 17:23:31 +01:00
committed by Eugenio Romano
parent a7d058fd2e
commit 7da9bd89cb
27 changed files with 418 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo-shell/src/app/app.component.scss
View File

@@ -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;
}
}

55
demo-shell/src/app/components/datatable/datatable.component.html
View File

@@ -2,28 +2,37 @@
<input id="adf-datatable-filter-input" matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
</mat-form-field>
<adf-datatable
#dataTable
[data]="data"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[actions]="true"
rowStyleClass="custom-row-style"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(row-click)="onRowClick($event)"
(row-dblclick)="onRowDblClick($event)">
<!-- HTML column definition demo -->
<!--
<data-columns>
<data-column type="image" key="icon" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
-->
</adf-datatable>
<mat-slide-toggle
id="adf-toggle-sticky-header"
[color]="'primary'"
(change)="toggleStickyHeader()"
[checked]="stickyHeader">
Sticky header
</mat-slide-toggle>
<div style="height: 300px; overflow-y: auto;">
<adf-datatable
#dataTable
[data]="data"
[stickyHeader]="stickyHeader"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[actions]="true"
rowStyleClass="custom-row-style"
(showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)"
(row-click)="onRowClick($event)" (row-dblclick)="onRowDblClick($event)">
<!-- HTML column definition demo -->
<!--
<data-columns>
<data-column type="image" key="icon" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
-->
</adf-datatable>
</div>
<div>
Selected items: {{ dataTable.selection?.length }}
@@ -47,4 +56,4 @@
<button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
<button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
<button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
</div>
</div>

17
demo-shell/src/app/components/datatable/datatable.component.ts
View File

@@ -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;
}
}

5
demo-shell/src/app/components/files/files.component.html
View File

@@ -202,6 +202,7 @@
<adf-document-list
#documentList
class="adf-file-list-container"
[permissionsStyle]="permissionsStyle"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
@@ -244,7 +245,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">
<ng-template let-context>
<adf-name-column [context]="context"></adf-name-column>
</ng-template>
@@ -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">
</data-column>
<!-- Location column demo -->
<!--

18
demo-shell/src/app/components/files/files.component.scss
View File

@@ -38,9 +38,13 @@
adf-document-list ::ng-deep .adf-datatable-selected > svg {
fill: #00bcd4 !important;
margin-top: -4px;
margin-left: -4px;
width: 32px;
height: 32px;
}
.adf-data-table-card .adf-lock-button {
.adf-datatable-card .adf-lock-button {
top: -10px;
}
@@ -129,15 +133,15 @@
}
@media (max-device-width: $minimumDocumentListWidth) {
adf-document-list .adf-data-table {
.adf-data-table-cell,
.adf-file-list-container .adf-datatable-list {
.adf-datatable-cell,
.adf-datatable-table-cell-header {
display: none;
}
.adf-data-table-cell:first-child,
.adf-datatable-cell:first-child,
.adf-datatable-table-cell-header:first-child,
.adf-data-table-cell:nth-child(2),
.adf-datatable-cell:nth-child(2),
.adf-datatable-table-cell-header:nth-child(2) {
display: table-cell;
}
@@ -163,9 +167,9 @@
}
@media (max-device-width: 1024px) {
adf-document-list .adf-data-table {
.adf-file-list-container .adf-datatable-list {
.adf-data-table-cell:nth-child(5),
.adf-datatable-cell:nth-child(5),
.adf-datatable-table-cell-header:nth-child(5) {
display: none;
}

10
demo-shell/src/app/components/process-service/process-service.component.scss
View File

@@ -71,23 +71,23 @@
}
.adf-list {
.adf-data-table {
.adf-datatable-list {
border: none;
}
.adf-data-table tr,
.adf-data-table td {
.adf-datatable tr,
.adf-datatable td {
height: 36px;
font-size: 14px;
}
.adf-data-table td {
.adf-datatable td {
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
}
.adf-data-table th {
.adf-datatable th {
padding-top: 0;
padding-bottom: 0;
height: 40px;

4
demo-shell/src/app/components/trashcan/trashcan.component.html
View File

@@ -57,7 +57,7 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
class="adf-datatable-cell--ellipsis__name"
key="name"
title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
<ng-template let-value="value" let-context>
@@ -80,7 +80,7 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
class="adf-datatable-cell--ellipsis"
key="archivedByUser.displayName"
title="DOCUMENT_LIST.COLUMNS.DELETED_BY">
</data-column>