Merge branch 'master' of https://github.com/Alfresco/alfresco-content-app

e2e/pages/page.ts

@@ -21,7 +21,7 @@ export abstract class Page {
     private static USE_HASH_STRATEGY = true;
 
     private locators = {
-        app: by.css('alfresco-content-app'),
+        app: by.css('app-root'),
         overlay: by.css('.cdk-overlay-container'),
         snackBar: by.css('simple-snack-bar')
     };

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">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT' | translate }}</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">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
+                    </div>
+                </ng-template>
+            </empty-folder-content>
+
             <data-columns>
                 <data-column
                     key="$thumbnail"

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

@@ -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">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
+                    </div>
+                </ng-template>
+            </empty-folder-content>
+
             <data-columns>
                 <data-column
                     key="$thumbnail"

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">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</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">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="app-no-content_text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</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;
+    }
 }

src/assets/i18n/en.json

@@ -31,6 +31,10 @@
                 "SIDENAV_LINK": {
                     "LABEL": "File Libraries",
                     "TOOLTIP": "Access File Libraries"
+                },
+                "EMPTY_STATE": {
+                    "TITLE": "You aren't a member of any File Libraries yet",
+                    "TEXT": "Join sites to upload, view, and share files."
                 }
             },
             "SHARED": {
@@ -45,6 +49,10 @@
                 "SIDENAV_LINK": {
                     "LABEL": "Recent Files",
                     "TOOLTIP": "View files you recently edited"
+                },
+                "EMPTY_STATE": {
+                    "TITLE": "No recent files or folders",
+                    "TEXT": "Items you upload or edit in the last 30 days are shown here."
                 }
             },
             "FAVORITES": {
@@ -52,6 +60,10 @@
                 "SIDENAV_LINK": {
                     "LABEL": "Favorites",
                     "TOOLTIP": "View your favorite files and folders"
+                },
+                "EMPTY_STATE": {
+                    "TITLE": "No favorite files or folders",
+                    "TEXT": "Favorite items that you want to easily find later."
                 }
             },
             "TRASHCAN": {
@@ -59,6 +71,11 @@
                 "SIDENAV_LINK": {
                     "LABEL": "Trash",
                     "TOOLTIP": "View deleted files in the trash"
+                },
+                "EMPTY_STATE": {
+                    "TITLE": "Trash is empty",
+                    "FIRST_TEXT": "Items you delete are moved to the Trash.",
+                    "SECOND_TEXT": "Empty Trash to permanently delete items."
                 }
             }
         },