inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

move empty folder UI into separate component (#202)

Browse Source 
* move empty folder UI into separate component

* test fixes
This commit is contained in:
Denys Vuika 2018-02-27 11:06:31 +00:00 committed by GitHub
parent 8d4e6a6604
commit 0b5dc47de9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 119 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

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

6
src/app/components/empty-folder/empty-folder.component.html Normal file
View File

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

29
src/app/components/empty-folder/empty-folder.component.scss Normal file
View File

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

33
src/app/components/empty-folder/empty-folder.component.spec.ts Normal file
View File

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

22
src/app/components/empty-folder/empty-folder.component.ts Normal file
View File

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

10
src/app/components/favorites/favorites.component.html
View File

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

10
src/app/components/libraries/libraries.component.html
View File

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

10
src/app/components/recent-files/recent-files.component.html
View File

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

10
src/app/components/shared-files/shared-files.component.html
View File

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

12
src/app/components/trashcan/trashcan.component.html
View File

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

27
src/app/ui/overrides/_alfresco-document-list.scss
View File

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