empty states

src/app/components/favorites/favorites.component.html

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

src/app/components/files/files.component.html

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

src/app/components/libraries/libraries.component.html

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

src/app/components/recent-files/recent-files.component.html

@@ -70,14 +70,25 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-                currentFolderId="-recent-"
+            [ngClass]="{ 'app-no-content': documentList.isEmpty() }"
-                selectionMode="multiple"
+            currentFolderId="-recent-"
-                [navigate]="false"
+            selectionMode="multiple"
-                [sorting]="[ 'modifiedAt', 'desc' ]"
+            [navigate]="false"
-                [pageSize]="25"
+            [sorting]="[ 'modifiedAt', 'desc' ]"
-                [contextMenuActions]="true"
+            [pageSize]="25"
-                [contentActions]="false"
+            [contextMenuActions]="true"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">
+            [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

src/app/components/shared-files/shared-files.component.html

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

src/app/components/trashcan/trashcan.component.html

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

src/app/ui/overrides/_alfresco-document-list.scss

@@ -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;
+    }
+}