empty states

This commit is contained in:
Bogdan Cilibiu
2017-10-19 23:01:08 +03:00
parent 33e27d2e57
commit 3361075971
7 changed files with 107 additions and 8 deletions

View File

@@ -77,6 +77,7 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
currentFolderId="-favorites-"
selectionMode="multiple"
[navigate]="false"
@@ -86,6 +87,16 @@
[contentActions]="false"
(node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">
<empty-folder-content>
<ng-template>
<div class="app-no-content_block">
<md-icon>star_rate</md-icon>
<p class="app-no-content_title">No favorite files or folders</p>
<p class="app-no-content_text">Favorite items that you want to easily find later.</p>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column

View File

@@ -85,6 +85,7 @@
[showNotificationBar]="false">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
[loading]="isLoading"
[node]="paging"
[sorting]="[ 'modifiedAt', 'desc' ]"

View File

@@ -9,6 +9,7 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
currentFolderId="-sites-"
selectionMode="none"
[navigate]="false"
@@ -18,6 +19,16 @@
[contentActions]="false"
(node-dblclick)="onNodeDoubleClick($event)">
<empty-folder-content>
<ng-template>
<div class="app-no-content_block">
<md-icon>group_work</md-icon>
<p class="app-no-content_title">You aren't a member of any File Libraries yet</p>
<p class="app-no-content_text">Join sites to upload, view, and share files.</p>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column
key="$thumbnail"

View File

@@ -70,6 +70,7 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
currentFolderId="-recent-"
selectionMode="multiple"
[navigate]="false"
@@ -79,6 +80,16 @@
[contentActions]="false"
(node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">
<empty-folder-content>
<ng-template>
<div class="app-no-content_block">
<md-icon>access_time</md-icon>
<p class="app-no-content_title">No recent files or folders</p>
<p class="app-no-content_text">Items you upload or edit in the last 30 days are shown here.</p>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column
key="$thumbnail"

View File

@@ -69,6 +69,7 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
currentFolderId="-sharedlinks-"
selectionMode="multiple"
[sorting]="[ 'modifiedAt', 'desc' ]"
@@ -77,6 +78,16 @@
[contentActions]="false"
(node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">
<empty-folder-content>
<ng-template>
<div class="app-no-content_block">
<md-icon>people</md-icon>
<p class="app-no-content_title">No shared files or folders</p>
<p class="app-no-content_text">Items you share using the Share option are shown here.</p>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column
key="$thumbnail"

View File

@@ -27,6 +27,7 @@
<div class="inner-layout__content">
<adf-document-list #documentList
[ngClass]="{ 'app-no-content': documentList.isEmpty() }"
currentFolderId="-trashcan-"
selectionMode="multiple"
[navigate]="false"
@@ -35,6 +36,17 @@
[contextMenuActions]="true"
[contentActions]="false">
<empty-folder-content>
<ng-template>
<div class="app-no-content_block">
<md-icon>delete</md-icon>
<p class="app-no-content_title">Trash is empty</p>
<p class="app-no-content_text">Items you delete are moved to the Trash.</p>
<p class="app-no-content_text">Empty Trash to permanently delete items.</p>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column

View File

@@ -80,4 +80,46 @@ adf-document-list .adf-data-table {
color: $alfresco-primary-text-color;
}
}
.adf-no-content-container {
border: none !important;
}
}
.app-no-content {
.adf-data-table {
height: 100%;
tr:hover, tr:focus {
background-color: unset;
cursor: default;
}
}
&_block {
color: $alfresco-secondary-text-color;
display: flex;
flex-direction: column;
align-items: center;
p {
line-height: 0;
}
}
md-icon {
font-size: 52px;
height: 52px;
width: 52px;
}
&_title {
font-size: 18px;
font-weight: 600;
}
&_subtitle {
font-size: 14px;
font-weight: 300;
}
}