inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1346] Attachment list component is shown for completed tasks/processes. (#2194)

Browse Source 
* Added ng-content to adf-empty-list compoent.
* Updated css to scss.
* Added 'CUSTOM_ELEMENTS_SCHEMA'  to allow non-angular elements.
* Updated readme.mg file
This commit is contained in:
siva kumar
2017-08-15 19:21:06 +05:30
committed by Mario Romano
parent ad75b6aa87
commit 5e17c8e103
29 changed files with 773 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -293,10 +293,12 @@ You can add a template that will be shown when there are no results in your data
</adf-datatable>
```
### Default Empty content template
### Custom Empty content template
You can use the empty list component if you want to show the default ADF empty template:
You can use any HTML layout or Angular component as a content of the empty template section by using the special `<adf-empty-list-header>, <adf-empty-list-body>, <adf-empty-list-footer>` elements:
```html
<adf-datatable
[data]="data"
@@ -308,11 +310,11 @@ You can use the empty list component if you want to show the default ADF empty t
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<adf-empty-list
[emptyListImageUrl]="'my-background-image.svg'"
[emptyMsg]="'My custom msg'"
[dragDropMsg]="'My drag and drop msg'"
[additionalMsg]="'My additional msg'">
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>

44
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.css
View File

@@ -1,44 +0,0 @@
.empty-list_empty_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.empty-list__this-space-is-empty {
height: 32px;
opacity: 0.26;
font-family: Muli, Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 1.33;
letter-spacing: -1px;
color: #000000;
}
.empty-list__drag-drop {
height: 56px;
opacity: 0.54;
font-family: Muli, Helvetica, Arial, sans-serif;
font-size: 56px;
line-height: 1;
letter-spacing: -2px;
color: #000000;
margin-top: 40px;
}
.empty-list__any-files-here-to-add {
height: 24px;
opacity: 0.54;
font-family: Muli, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.4px;
color: #000000;
margin-top: 17px;
}
.empty-list__empty_doc_lib {
width: 565px;
height: 161px;
object-fit: contain;
margin-top: 17px;
}

12
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.html
View File

@@ -1,6 +1,6 @@
<div id="adf-empty-list" class="empty-list_empty_template">
<div class="empty-list__this-space-is-empty">{{ emptyMsg | translate }}</div>
<div class="empty-list__drag-drop">{{ dragDropMsg | translate }}</div>
<div class="empty-list__any-files-here-to-add">{{ additionalMsg | translate }}</div>
<img [src]="emptyListImageUrl" class="empty-list__empty_doc_lib">
</div>
<div class="adf-empty-list_template">
<ng-content select="adf-empty-list-header"></ng-content>
<ng-content select="adf-empty-list-body"></ng-content>
<ng-content select="adf-empty-list-footer"></ng-content>
<ng-content></ng-content>
</div>

5
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.scss Normal file
View File

@@ -0,0 +1,5 @@
.adf-empty-list_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

18
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.spec.ts
View File

@@ -41,27 +41,11 @@ describe('EmptyListComponentComponent', () => {
expect(component).toBeDefined();
});
it('should show the default values', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER');
expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE');
expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE');
expect(fixture.nativeElement.querySelector('.empty-list__empty_doc_lib').src).toContain('empty_doc_lib');
});
}));
it('should render the input values', async(() => {
component.emptyMsg = 'Fake empty msg';
component.dragDropMsg = 'Fake drag drop msg';
component.additionalMsg = 'Fake additional msg';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('Fake empty msg');
expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Fake drag drop msg');
expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('Fake additional msg');
expect(fixture.nativeElement.querySelector('.adf-empty-list_template')).toBeDefined();
});
}));
});

22
ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
View File

@@ -15,27 +15,11 @@
* limitations under the License.
*/
import { Component, Input } from '@angular/core';
declare var require: any;
import { Component } from '@angular/core';
@Component({
selector: 'adf-empty-list',
styleUrls: ['./empty-list.component.css'],
styleUrls: ['./empty-list.component.scss'],
templateUrl: './empty-list.component.html'
})
export class EmptyListComponent {
@Input()
emptyListImageUrl: string = require('../../assets/images/empty_doc_lib.svg');
@Input()
emptyMsg: string = 'ADF-DATATABLE.EMPTY.HEADER';
@Input()
dragDropMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE';
@Input()
additionalMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE';
}
export class EmptyListComponent {}