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-1092] independent styles for data-table (#2084)

Browse Source 
* independent styles for datatable

- datatable (and all derived components) no longer depend on MDL css/js

* readme update
This commit is contained in:
Denys Vuika
2017-07-14 15:48:38 +01:00
committed by Eugenio Romano
parent fb4ed0209b
commit f715361f94
9 changed files with 312 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,28 +1,28 @@
<table
*ngIf="data"
class="mdl-data-table mdl-js-data-table full-width mdl-data-table-fix-firefox">
class="full-width adf-data-table">
<thead>
<tr>
<!-- Actions (left) -->
<th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
<th *ngIf="actions && actionsPosition === 'left'" class="actions-column">
<span class="sr-only">Actions</span>
</th>
<!-- Columns -->
<th *ngIf="multiselect">
<md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
</th>
<th class="mdl-data-table__cell--non-numeric non-selectable {{col.cssClass}}"
<th class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
*ngFor="let col of data.getColumns()"
[class.sortable]="col.sortable"
[attr.data-automation-id]="'auto_id_' + col.key"
[class.column-header]="col.title"
[class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
[class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
[class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
(click)="onColumnHeaderClick(col)">
<span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
<span *ngIf="col.title">{{col.title}}</span>
</th>
<!-- Actions (right) -->
<th *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-header">
<th *ngIf="actions && actionsPosition === 'right'" class="actions-column">
<span class="sr-only">Actions</span>
</th>
</tr>
@@ -31,14 +31,13 @@
<ng-container *ngIf="!loading">
<tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
class="alfresco-datatable__row"
[class.alfresco-datatable__row--selected]="row.isSelected"
[class.is-selected]="row.isSelected"
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
[ngStyle]="rowStyle"
[ngClass]="rowStyleClass">
<!-- Actions (left) -->
<td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
<td *ngIf="actions && actionsPosition === 'left'">
<button md-icon-button [mdMenuTriggerFor]="menu"
[attr.data-automation-id]="'action_menu_' + idx">
<md-icon>more_vert</md-icon>
@@ -58,24 +57,21 @@
<md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
</td>
<td *ngFor="let col of data.getColumns()"
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
class="adf-data-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
(click)="onRowClick(row, $event)"
[context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu">
<div *ngIf="!col.template" class="cell-container">
<ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row,
col)}}</i>
<i *ngIf="isIconValue(row, col)" class="material-icons">{{ asIconValue(row, col) }}</i>
<img *ngIf="!isIconValue(row, col)"
class="image-cell"
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event)">
</div>
<div *ngSwitchCase="'icon'" class="cell-value">
<img class="image-cell"
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
<img alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event)">
</div>
@@ -119,7 +115,7 @@
</tr>
<tr *ngIf="data.getRows().length === 0">
<td class="mdl-data-table__cell--non-numeric adf-no-content-container"
<td class="adf-no-content-container"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
@@ -130,7 +126,7 @@
</tr>
</ng-container>
<tr *ngIf="loading">
<td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
<td class="adf-loading-content-container"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"