move empty folder UI into separate component (#202)

* move empty folder UI into separate component

* test fixes

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: [
         {

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>

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

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();
+    });
+});

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 = '';
+}

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

@@ -88,11 +88,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
+                    <app-empty-folder
-                        <mat-icon>star_rate</mat-icon>
+                        icon="star_rate"
-                        <p class="empty-list__title">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE' | translate }}</p>
+                        title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
-                        <p class="empty-list__text">{{ 'APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT' | translate }}</p>
+                        subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
-                    </div>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 

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

@@ -21,11 +21,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
+                    <app-empty-folder
-                        <mat-icon>group_work</mat-icon>
+                        icon="group_work"
-                        <p class="empty-list__title">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE' | translate }}</p>
+                        title="APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE"
-                        <p class="empty-list__text">{{ 'APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT' | translate }}</p>
+                        subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT">
-                    </div>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 

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

@@ -84,11 +84,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
+                    <app-empty-folder
-                        <mat-icon>access_time</mat-icon>
+                        icon="access_time"
-                        <p class="empty-list__title">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TITLE' | translate }}</p>
+                        title="APP.BROWSE.RECENT.EMPTY_STATE.TITLE"
-                        <p class="empty-list__text">{{ 'APP.BROWSE.RECENT.EMPTY_STATE.TEXT' | translate }}</p>
+                        subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
-                    </div>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 

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

@@ -89,11 +89,11 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
+                    <app-empty-folder
-                        <mat-icon>people</mat-icon>
+                        icon="people"
-                        <p class="empty-list__title">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TITLE' | translate }}</p>
+                        title="APP.BROWSE.SHARED.EMPTY_STATE.TITLE"
-                        <p class="empty-list__text">{{ 'APP.BROWSE.SHARED.EMPTY_STATE.TEXT' | translate }}</p>
+                        subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
-                    </div>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 

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

@@ -38,12 +38,12 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
+                    <app-empty-folder
-                        <mat-icon>delete</mat-icon>
+                        icon="delete"
-                        <p class="empty-list__title">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
+                        title="APP.BROWSE.RECENT.EMPTY_STATE.TITLE">
-                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="app-empty-folder__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
-                        <p class="empty-list__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                        <p class="app-empty-folder__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
-                    </div>
+                    </app-empty-folder>
                 </ng-template>
             </empty-folder-content>
 

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