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-992] improve datatable styles according to UX guidelines (#2088)

Browse Source 
* improve datatable style

* datatable and document list enhancements

- support to toggle header in DataTable
- Document List automatically hides header for empty content
This commit is contained in:
Denys Vuika
2017-07-15 22:31:14 +01:00
committed by Eugenio Romano
parent 7e357cfbae
commit be3d3d2aa3
5 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ng2-components/ng2-alfresco-datatable/README.md
View File

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

5
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -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"

27
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss
View File

@@ -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-sorted-color: rgba(#000, 0.87) !default;
$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
$data-table-divider-color: rgba(#000, 0.12) !default;
$data-table-header-color: $alfresco-secondary-text-color !default;
$data-table-header-sorted-color: $alfresco-primary-text-color !default;
$data-table-header-sorted-icon-hover-color: $alfresco-disabled-text-color !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-bottom: 1px dashed rgb(68,138,255);
border-top: $data-table-drag-border;
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;
}
}
}

3
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@@ -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>();