[ADF-2930] general purpose "Empty Page" component (#3296)

* empty content component

* fix selector name

* style fixes

* cleanup code

* docs for empty content

* update docs

* update docs

* use typography for icon

* layout fixes for Login (ported from ACA)
This commit is contained in:
Denys Vuika
2018-05-10 16:13:53 +01:00
committed by GitHub
parent 18ebf9f2f7
commit 6e5d6ea3bb
16 changed files with 199 additions and 54 deletions

View File

@@ -1,39 +1,3 @@
.empty-list {
.adf-data-table {
height: 100%;
tr:hover, tr:focus {
cursor: default;
}
}
&__block {
display: flex;
flex-direction: column;
align-items: center;
p {
line-height: 0;
}
}
&__title {
font-size: 18px;
font-weight: 600;
}
&__subtitle {
font-size: 14px;
font-weight: 300;
}
&__block > mat-icon {
font-size: 52px;
height: 52px;
width: 52px;
}
}
router-outlet[name="overlay"] + * {
width: 100%;
height: 100%;
@@ -53,7 +17,7 @@ router-outlet[name="overlay"] + * {
.adf-data-table-cell:first-child,
.adf-data-table-cell:nth-child(2) {
display: table-cell;
}
}
}
}
}

View File

@@ -29,7 +29,6 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
currentFolderId="-trashcan-"
selectionMode="multiple"
[multiselect]="true"
@@ -41,12 +40,12 @@
<empty-folder-content>
<ng-template>
<div class="empty-list__block">
<mat-icon>delete</mat-icon>
<p class="empty-list__title">{{ 'TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
<p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</div>
<adf-empty-content
icon="delete"
[title]="'TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</ng-template>
</empty-folder-content>