From 0b5dc47de95944dd8b3953c68f64ade52cedac86 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 27 Feb 2018 11:06:31 +0000
Subject: [PATCH] move empty folder UI into separate component (#202)

* move empty folder UI into separate component

* test fixes
---
 src/app/app.module.ts                         |  4 ++-
 .../empty-folder/empty-folder.component.html  |  6 ++++
 .../empty-folder/empty-folder.component.scss  | 29 ++++++++++++++++
 .../empty-folder.component.spec.ts            | 33 +++++++++++++++++++
 .../empty-folder/empty-folder.component.ts    | 22 +++++++++++++
 .../favorites/favorites.component.html        | 10 +++---
 .../libraries/libraries.component.html        | 10 +++---
 .../recent-files/recent-files.component.html  | 10 +++---
 .../shared-files/shared-files.component.html  | 10 +++---
 .../trashcan/trashcan.component.html          | 12 +++----
 .../ui/overrides/_alfresco-document-list.scss | 27 ---------------
 11 files changed, 119 insertions(+), 54 deletions(-)
 create mode 100644 src/app/components/empty-folder/empty-folder.component.html
 create mode 100644 src/app/components/empty-folder/empty-folder.component.scss
 create mode 100644 src/app/components/empty-folder/empty-folder.component.spec.ts
 create mode 100644 src/app/components/empty-folder/empty-folder.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5548ff91d..ff150bc5e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -51,6 +51,7 @@ import { SearchComponent } from './components/search/search.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { AboutComponent } from './components/about/about.component';
 import { LocationLinkComponent } from './components/location-link/location-link.component';
+import { EmptyFolderComponent } from './components/empty-folder/empty-folder.component';
 
 @NgModule({
     imports: [
@@ -80,7 +81,8 @@ import { LocationLinkComponent } from './components/location-link/location-link.
         TrashcanComponent,
         PreviewComponent,
         AboutComponent,
-        LocationLinkComponent
+        LocationLinkComponent,
+        EmptyFolderComponent
     ],
     providers: [
         {
diff --git a/src/app/components/empty-folder/empty-folder.component.html b/src/app/components/empty-folder/empty-folder.component.html
new file mode 100644
index 000000000..43ecf6bf8
--- /dev/null
+++ b/src/app/components/empty-folder/empty-folder.component.html
@@ -0,0 +1,6 @@
+<div class="app-empty-folder">
+    <mat-icon class="app-empty-folder__icon">{{ icon }}</mat-icon>
+    <p class="app-empty-folder__title">{{ title | translate }}</p>
+    <p class="app-empty-folder__subtitle">{{ subtitle | translate }}</p>
+    <ng-content></ng-content>
+</div>
diff --git a/src/app/components/empty-folder/empty-folder.component.scss b/src/app/components/empty-folder/empty-folder.component.scss
new file mode 100644
index 000000000..2da90ab1c
--- /dev/null
+++ b/src/app/components/empty-folder/empty-folder.component.scss
@@ -0,0 +1,29 @@
+@import 'variables';
+
+.app-empty-folder {
+    color: $alfresco-secondary-text-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__icon {
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+
+    p {
+        line-height: 0;
+    }
+
+    &__title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    &__subtitle,
+    &__text {
+        font-size: 14px;
+        font-weight: 300;
+    }
+}
diff --git a/src/app/components/empty-folder/empty-folder.component.spec.ts b/src/app/components/empty-folder/empty-folder.component.spec.ts
new file mode 100644
index 000000000..32e4d5571
--- /dev/null
+++ b/src/app/components/empty-folder/empty-folder.component.spec.ts
@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { EmptyFolderComponent } from './empty-folder.component';
+
+describe('EmptyFolderComponent', () => {
+    let component: EmptyFolderComponent;
+    let fixture: ComponentFixture<EmptyFolderComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatIconModule,
+                TranslateModule.forRoot()
+            ],
+            declarations: [
+                EmptyFolderComponent
+            ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EmptyFolderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/components/empty-folder/empty-folder.component.ts b/src/app/components/empty-folder/empty-folder.component.ts
new file mode 100644
index 000000000..4e137d1de
--- /dev/null
+++ b/src/app/components/empty-folder/empty-folder.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-folder',
+  templateUrl: './empty-folder.component.html',
+  styleUrls: ['./empty-folder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  // tslint:disable-next-line:use-host-property-decorator
+  host: { class: 'app-empty-folder' }
+})
+export class EmptyFolderComponent {
+
+    @Input()
+    icon = 'cake';
+
+    @Input()
+    title = '';
+
+    @Input()
+    subtitle = '';
+}
diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html
index 574d197a3..bd894cfe2 100644
--- a/src/app/components/favorites/favorites.component.html
+++ b/src/app/components/favorites/favorites.component.html
@@ -88,11 +88,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>star_rate</mat-icon>
-                        <p class="empty-list__title">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT' | translate }}</p>
-                    </div>
+                    <app-empty-folder
+                        icon="star_rate"
+                        title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
+                        subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html
index 3ad46c62e..170a296c1 100644
--- a/src/app/components/libraries/libraries.component.html
+++ b/src/app/components/libraries/libraries.component.html
@@ -21,11 +21,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>group_work</mat-icon>
-                        <p class="empty-list__title">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT' | translate }}</p>
-                    </div>
+                    <app-empty-folder
+                        icon="group_work"
+                        title="APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE"
+                        subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT">
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html
index 25d6ec207..98c1bd5ef 100644
--- a/src/app/components/recent-files/recent-files.component.html
+++ b/src/app/components/recent-files/recent-files.component.html
@@ -84,11 +84,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>access_time</mat-icon>
-                        <p class="empty-list__title">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TEXT' | translate }}</p>
-                    </div>
+                    <app-empty-folder
+                        icon="access_time"
+                        title="APP.BROWSE.RECENT.EMPTY_STATE.TITLE"
+                        subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html
index 649176b2b..a7888c6b1 100644
--- a/src/app/components/shared-files/shared-files.component.html
+++ b/src/app/components/shared-files/shared-files.component.html
@@ -89,11 +89,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>people</mat-icon>
-                        <p class="empty-list__title">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TEXT' | translate }}</p>
-                    </div>
+                    <app-empty-folder
+                        icon="people"
+                        title="APP.BROWSE.SHARED.EMPTY_STATE.TITLE"
+                        subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html
index 91af9997b..e01621e23 100644
--- a/src/app/components/trashcan/trashcan.component.html
+++ b/src/app/components/trashcan/trashcan.component.html
@@ -38,12 +38,12 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>delete</mat-icon>
-                        <p class="empty-list__title">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
-                    </div>
+                    <app-empty-folder
+                        icon="delete"
+                        title="APP.BROWSE.RECENT.EMPTY_STATE.TITLE">
+                        <p class="app-empty-folder__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="app-empty-folder__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/src/app/ui/overrides/_alfresco-document-list.scss b/src/app/ui/overrides/_alfresco-document-list.scss
index 7b9042a8c..4cfaf424d 100644
--- a/src/app/ui/overrides/_alfresco-document-list.scss
+++ b/src/app/ui/overrides/_alfresco-document-list.scss
@@ -98,31 +98,4 @@ adf-document-list {
             cursor: default;
         }
     }
-
-    &__block {
-        color: $alfresco-secondary-text-color;
-        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;
-    }
 }