[ADF-524] Fix empty state after the loading introduction (#1980)

* fix empty state after the loading introduction

* Update document-list.component.spec.ts

remove typo
This commit is contained in:
Eugenio Romano
2017-06-16 18:26:00 +01:00
committed by Eugenio Romano
parent 0a81979a4d
commit 99467ba957
4 changed files with 142 additions and 101 deletions

View File

@@ -7,6 +7,7 @@
<th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
<span class="sr-only">Actions</span>
</th>
<!-- Columns -->
<th *ngIf="multiselect">
<md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
@@ -28,6 +29,7 @@
</tr>
</thead>
<tbody>
<ng-container *ngIf="!loading">
<tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
class="alfresco-datatable__row"
@@ -65,7 +67,8 @@
<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 icon-cell">{{asIconValue(row,
col)}}</i>
<img *ngIf="!isIconValue(row, col)"
class="image-cell"
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
@@ -117,7 +120,7 @@
</td>
</tr>
<tr *ngIf="data.getRows().length === 0 && !loading">
<tr *ngIf="data.getRows().length === 0">
<td class="mdl-data-table__cell--non-numeric adf-no-content-container"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="noContentTemplate"
@@ -126,6 +129,8 @@
</ng-template>
</td>
</tr>
</ng-container>
<tr *ngIf="loading">
<td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
[attr.colspan]="1 + data.getColumns().length">

View File

@@ -46,3 +46,16 @@
.adf-document-list-loading-margin {
margin: auto;
}
.adf-document-list-loading-container {
min-height: 300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height: 100%;
}

View File

@@ -25,23 +25,25 @@
<div *ngIf="!isEmptyTemplateDefined()">
<no-content-template>
<ng-template>
<!--put your cutom template here-->
<md-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
<div id="adf-document-list-empty" class="document-list_empty_template">
<div class="document-list__this-space-is-empty">This folder is empty</div>
<div class="document-list__drag-drop">Drag and Drop</div>
<div class="document-list__any-files-here-to-add">any files here to add</div>
<img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
</div>
</ng-template>
</no-content-template>
</div>
<div>
<loading-content-template>
<ng-template>
<div class="adf-document-list-loading-container">
<md-progress-spinner id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</div>
</ng-template>
</loading-content-template>
</div>

View File

@@ -167,6 +167,27 @@ describe('DocumentList', () => {
});
});
it('should empty template be present when no element are present', (done) => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
documentList.folderNode = new NodeMinimal();
documentList.folderNode.id = '1d26e465-dea3-42f3-b415-faa8364b9692';
documentList.reload();
fixture.detectChanges();
documentList.ready.subscribe(() => {
fixture.detectChanges();
expect(element.querySelector('#adf-document-list-empty')).toBeDefined();
done();
});
jasmine.Ajax.requests.at(0).respondWith({
status: 200,
contentType: 'application/json',
responseText: JSON.stringify(fakeNodeAnswerWithNOEntries)
});
});
it('should not execute action without node provided', () => {
let action = new ContentActionModel();
action.handler = function () {