[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)
2025-05-19 17:14:57 +00:00 · 2018-05-10 16:13:53 +01:00 · 2018-05-10 16:13:53 +01:00 · 6e5d6ea3bb
commit 6e5d6ea3bb
parent 18ebf9f2f7
16 changed files with 199 additions and 54 deletions
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@ -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%;
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@ -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>

--- a/docs/core/empty-content.component.md
+++ b/docs/core/empty-content.component.md
@ -0,0 +1,54 @@
+---
+Added: v2.4.0
+Status: Active
+Last reviewed:
+---
+
+# Empty Content Component
+
+Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty.
+
+## Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| icon | string | Material Icon to use |
+| title | string | String or Resource Key for the title |
+| subtitle | string | String or Resource Key for the subtitle |
+
+## Examples
+
+```html
+<adf-document-list>
+    <empty-folder-content>
+        <ng-template>
+            <adf-empty-content
+                icon="star_rate"
+                title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
+                subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
+            </adf-empty-folder>
+        </ng-template>
+    </empty-folder-content>
+</adf-document-list>
+```
+
+![Favorites screen](../docassets/images/empty-content-favorites.png)
+
+You can also use multiple lines instead of the subtitle section:
+
+```html
+<adf-document-list>
+    <empty-folder-content>
+        <ng-template>
+            <adf-empty-content
+                icon="delete"
+                title="APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE">
+                <p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                <p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+            </adf-empty-content>
+        </ng-template>
+    </empty-folder-content>
+</adf-document-list>
+```
+
+![Trashcan screen](../docassets/images/empty-content-trashcan.png)
--- a/docs/docassets/images/empty-content-favorites.png
+++ b/docs/docassets/images/empty-content-favorites.png
--- a/docs/docassets/images/empty-content-trashcan.png
+++ b/docs/docassets/images/empty-content-trashcan.png
--- a/lib/core/components/empty-content/empty-content.component.html
+++ b/lib/core/components/empty-content/empty-content.component.html
@ -0,0 +1,6 @@
+<div class="adf-empty-content">
+    <mat-icon class="adf-empty-content__icon">{{ icon }}</mat-icon>
+    <p class="adf-empty-content__title">{{ title | translate }}</p>
+    <p class="adf-empty-content__subtitle">{{ subtitle | translate }}</p>
+    <ng-content></ng-content>
+</div>
--- a/lib/core/components/empty-content/empty-content.component.scss
+++ b/lib/core/components/empty-content/empty-content.component.scss
@ -0,0 +1,33 @@
+@mixin adf-empty-content-theme($theme) {
+
+    $config: mat-typography-config();
+    $foreground: map-get($theme, foreground);
+
+    .adf-empty-content {
+        color: mat-color($foreground, text, 0.54);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__icon {
+            font-size: mat-font-size($config, display-3);
+            height: mat-font-size($config, display-3) !important;
+            width: mat-font-size($config, display-3) !important;
+        }
+
+        p {
+            line-height: 0;
+        }
+
+        &__title {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        &__subtitle,
+        &__text {
+            font-size: 14px;
+            font-weight: 300;
+        }
+    }
+}
--- a/lib/core/components/empty-content/empty-content.component.ts
+++ b/lib/core/components/empty-content/empty-content.component.ts
@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+
+@Component({
+    selector: 'adf-empty-content',
+    templateUrl: './empty-content.component.html',
+    styleUrls: ['./empty-content.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-empty-content' }
+})
+export class EmptyContentComponent {
+
+    @Input()
+    icon = 'cake';
+
+    @Input()
+    title = '';
+
+    @Input()
+    subtitle = '';
+
+}
--- a/lib/core/core.module.ts
+++ b/lib/core/core.module.ts
@ -80,6 +80,7 @@ import { UploadService } from './services/upload.service';
 import { UserPreferencesService } from './services/user-preferences.service';
 import { SearchConfigurationService } from './services/search-configuration.service';
 import { startupServiceFactory } from './services/startup-service-factory';
+import { EmptyContentComponent } from './components/empty-content/empty-content.component';

 export function createTranslateLoader(http: HttpClient, logService: LogService) {
    return new TranslateLoaderService(http, logService);
@ -161,6 +162,9 @@ export function providers() {
            }
        })
    ],
+    declarations: [
+        EmptyContentComponent
+    ],
    exports: [
        ViewerModule,
        SideBarActionModule,
@ -188,7 +192,8 @@ export function providers() {
        DataColumnModule,
        DataTableModule,
        TranslateModule,
-        ButtonsMenuModule
+        ButtonsMenuModule,
+        EmptyContentComponent
    ]
 })
 export class CoreModuleLazy {
@ -230,6 +235,9 @@ export class CoreModuleLazy {
            }
        })
    ],
+    declarations: [
+        EmptyContentComponent
+    ],
    exports: [
        ViewerModule,
        SideBarActionModule,
@ -257,7 +265,8 @@ export class CoreModuleLazy {
        DataColumnModule,
        DataTableModule,
        TranslateModule,
-        ButtonsMenuModule
+        ButtonsMenuModule,
+        EmptyContentComponent
    ],
    providers: [
        ...providers(),
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@ -1,7 +1,8 @@
 <div
    *ngIf="data" class="full-width"
    [class.adf-data-table-card]="display === 'gallery'"
-    [class.adf-data-table]="display === 'list'">
+    [class.adf-data-table]="display === 'list'"
+    [class.adf-data-table--empty]="isEmpty()">
    <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
        <div class="adf-datatable-row" *ngIf="display === 'list'">
            <!-- Actions (left) -->
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@ -14,14 +14,9 @@
    $data-table-selection-color: mat-color($background, 'selected-button') !default;
    $data-table-dividers: 1px solid $data-table-divider-color !default;
    $data-table-row-height: 56px !default;
-    // $data-table-last-row-height: 56px !default;
-    // $data-table-header-height: 56px !default;
    $data-table-column-spacing: 36px !default;
    $data-table-column-padding: $data-table-column-spacing / 2;
-    // $data-table-card-header-height: 64px !default;
-    // $data-table-card-title-top: 20px !default;
    $data-table-card-padding: 24px !default;
-    // $data-table-button-padding-right: 16px !default;
    $data-table-cell-top: $data-table-card-padding / 2;
    $data-table-drag-border: 1px dashed rgb(68, 138, 255);

@ -472,4 +467,21 @@
            }
        }
    }
+
+    .adf-data-table--empty {
+        @include flex-column;
+        justify-content: center;
+        align-items: center;
+
+        .adf-datatable-body {
+            .adf-datatable-row {
+                background-color: mat-color($background, card);
+
+                &:hover, &:focus {
+                    background-color: unset;
+                    cursor: default;
+                }
+            }
+        }
+    }
 }
--- a/lib/core/index.ts
+++ b/lib/core/index.ts
@ -35,6 +35,8 @@ export * from './sidenav-layout/index';
 export * from './comments/index';
 export * from './buttons-menu/index';

+export * from './components/empty-content/empty-content.component';
+
 export * from './pipes/index';
 export * from './services/index';
 export * from './directives/index';
--- a/lib/core/login/components/login.component.scss
+++ b/lib/core/login/components/login.component.scss
@ -6,6 +6,10 @@
    $foreground: map-get($theme, foreground);
    $text-color-primary: mat-color($foreground, text);

+    .adf-login {
+        @include flex-column;
+    }
+
    .adf-login-content {
        background-size: cover;
        background-position: center;
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@ -48,8 +48,11 @@ enum LoginSteps {
    selector: 'adf-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
-    host: { '(blur)': 'onBlur($event)' },
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-login',
+        '(blur)': 'onBlur($event)'
+    }
 })
 export class LoginComponent implements OnInit {

--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@ -26,6 +26,7 @@
@import '../comments/comment-list.component';
@import '../comments/comments.component';
@import '../sidenav-layout/components/layout-container/layout-container.component';
+@import "../components/empty-content/empty-content.component";

@mixin adf-core-theme($theme) {
    @include adf-colors-theme($theme);
@ -54,6 +55,7 @@
    @include adf-task-list-comment-list-theme($theme);
    @include adf-task-list-comment-theme($theme);
    @include adf-layout-container-theme($theme);
+    @include adf-empty-content-theme($theme);
 }


--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@ -48,3 +48,20 @@
        width: 100%;
    }
 }
+
+@mixin flex-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0;
+}
+
+@mixin flex-row {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}