inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2930] general purpose "Empty Page" component ()

Browse Source 
* 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)
This commit is contained in:
Denys Vuika 2018-05-10 16:13:53 +01:00 committed by GitHub
parent 18ebf9f2f7
commit 6e5d6ea3bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 199 additions and 54 deletions

38
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%;
@ -53,7 +17,7 @@ router-outlet[name="overlay"] + * {
.adf-data-table-cell:first-child,
.adf-data-table-cell:nth-child(2) {
display: table-cell;
}
}
}
}
}

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

54
docs/core/empty-content.component.md Normal file

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

BIN
docs/docassets/images/empty-content-favorites.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 35 KiB

BIN
docs/docassets/images/empty-content-trashcan.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 35 KiB

6
lib/core/components/empty-content/empty-content.component.html Normal file

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

33
lib/core/components/empty-content/empty-content.component.scss Normal file

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

39
lib/core/components/empty-content/empty-content.component.ts Normal file

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

13
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(),

3
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) -->

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

2
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';

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

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

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

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