mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1344] New Custom Loading Content Directive for Datatable Component (#4156)
* [ADF-1344] New Custom Loading Content Directive for Datatable Component * [ADF-1344] Add unit tests for directives on Document List * [ADF-1344] Add directive prefix to context-menu directive * [ADF-1344] Old directive selectors have been put back * [ADF-1344] Add old selector for empty-content directive
This commit is contained in:
davidcanonieto
committed by
Eugenio Romano
Eugenio Romano
parent
5887fa1052
commit
1c25b50b1a
@@ -37,6 +37,7 @@ Displays the documents from a repository.
|
||||
- [Custom image resolver](#custom-image-resolver)
|
||||
- [Custom 'empty folder' template](#custom-empty-folder-template)
|
||||
- [Custom 'permission denied' template](#custom-permission-denied-template)
|
||||
- [Custom 'loading' template](#custom-loading-template)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
@@ -827,11 +828,9 @@ However, you can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<empty-folder-content>
|
||||
<ng-template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</ng-template>
|
||||
</empty-folder-content>
|
||||
<adf-custom-empty-content-template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</adf-custom-empty-content-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
@@ -850,11 +849,9 @@ You can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<no-permission-content>
|
||||
<ng-template>
|
||||
<h1>You don't have permissions</h1>
|
||||
</ng-template>
|
||||
</no-permission-content>
|
||||
<adf-custom-no-permission-template>
|
||||
<h1>You don't have permissions</h1>
|
||||
</adf-custom-no-permission-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
@@ -862,6 +859,27 @@ This will give the following output:
|
||||
|
||||
|
||||
|
||||
### Custom 'loading' template
|
||||
|
||||
By default, the Document List shows the following content when the content is loading:
|
||||
|
||||
|
||||
|
||||
You can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<adf-custom-loading-content-template>
|
||||
Loading Content
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</adf-custom-loading-content-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Datatable component](../core/datatable.component.md)
|
||||
|
||||
@@ -12,7 +12,7 @@ Provides drag-and-drop features for an element such as a `div`.
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<div [file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
|
||||
<div [adf-file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
|
||||
(filesDropped)="onFilesDropped($event)"
|
||||
(folderEntityDropped)="onFolderEntityDropped($event)"
|
||||
dropzone="" webkitdropzone="*" #dragAndDropArea>
|
||||
|
||||
@@ -12,7 +12,7 @@ Adds a context menu to a component.
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<my-component [context-menu]="menuItems"></my-component>
|
||||
<my-component [adf-context-menu]="menuItems"></my-component>
|
||||
<adf-context-menu-holder></context-menu-holder>
|
||||
```
|
||||
|
||||
|
||||
@@ -250,17 +250,17 @@ export class DataTableDemo {
|
||||
You can add [Data column component](data-column.component.md) instances to define columns for the
|
||||
table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
|
||||
|
||||
You can also supply a `<no-content-template>` or an
|
||||
You can also supply a `<adf-no-content-template>` or an
|
||||
[Empty list component](empty-list.component.md) sub-component to show when the table is empty:
|
||||
|
||||
```html
|
||||
<adf-datatable ...>
|
||||
<no-content-template>
|
||||
<adf-no-content-template>
|
||||
<!--Add your custom empty template here-->
|
||||
<ng-template>
|
||||
<h1>Sorry, no content</h1>
|
||||
</ng-template>
|
||||
</no-content-template>
|
||||
</adf-no-content-template>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
@@ -275,12 +275,12 @@ You can also supply a `<no-content-template>` or an
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
Another useful transclusion is the `<loading-content-template>`, which is shown
|
||||
Another useful transclusion is the `<adf-loading-content-template>`, which is shown
|
||||
while the data for the table is loading:
|
||||
|
||||
```html
|
||||
<adf-datatable ...>
|
||||
<loading-content-template>
|
||||
<adf-loading-content-template>
|
||||
<ng-template>
|
||||
<!--Add your custom loading template here-->
|
||||
<mat-progress-spinner
|
||||
@@ -289,7 +289,7 @@ while the data for the table is loading:
|
||||
[mode]="'indeterminate'">
|
||||
</mat-progress-spinner>
|
||||
</ng-template>
|
||||
</loading-content-template>
|
||||
</adf-loading-content-template>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
@@ -299,7 +299,7 @@ while the data for the table is loading:
|
||||
}
|
||||
```
|
||||
|
||||
Note that you can use both the `<no-content-template>` and the `<loading-content-template>`
|
||||
Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
|
||||
together in the same datatable.
|
||||
|
||||
## Class members
|
||||
|
||||
@@ -41,8 +41,8 @@ You can replace the content of the header and footer of the [Login component](..
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
|
||||
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
|
||||
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
|
||||
<adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
|
||||
</adf-login>`
|
||||
```
|
||||
|
||||
|
||||
@@ -19,17 +19,17 @@ Displays a sidebar-action menu information panel.
|
||||
There are three regions where you can add your own content in `<div>` elements with
|
||||
the following names:
|
||||
|
||||
- sidebar-menu-title-icon
|
||||
- sidebar-menu-options
|
||||
- sidebar-menu-expand-icon
|
||||
- adf-sidebar-menu-title-icon
|
||||
- adf-sidebar-menu-options
|
||||
- adf-sidebar-menu-expand-icon
|
||||
|
||||
```html
|
||||
<adf-sidebar-action-menu>
|
||||
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
|
||||
<div sidebar-menu-expand-icon>
|
||||
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
|
||||
<div adf-sidebar-menu-expand-icon>
|
||||
<mat-icon>queue</mat-icon>
|
||||
</div>
|
||||
<div sidebar-menu-options>
|
||||
<div adf-sidebar-menu-options>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>assignment</mat-icon>
|
||||
<span>Button Name</span>
|
||||
|
||||
BIN
docs/docassets/images/custom-loading.png
Normal file
BIN
docs/docassets/images/custom-loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
docs/docassets/images/default-loading.png
Normal file
BIN
docs/docassets/images/default-loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -20,14 +20,14 @@ Shows all deployed cloud application instances.
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
You can show custom content when there are no apps available by supplying an
|
||||
`<adf-empty-custom-content>` section:
|
||||
`<adf-custom-empty-content>` section:
|
||||
|
||||
```html
|
||||
<adf-cloud-app-list
|
||||
[layoutType]="'GRID'">
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
No Apps present
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
</adf-cloud-app-list>
|
||||
```
|
||||
|
||||
|
||||
@@ -33,14 +33,14 @@ Renders a list containing all the process instances matched by the parameters sp
|
||||
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
|
||||
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
|
||||
when the process list is empty:
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list>
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
<adf-cloud-process-list>
|
||||
```
|
||||
|
||||
|
||||
@@ -34,14 +34,14 @@ Renders a list containing all the tasks matched by the parameters specified.
|
||||
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
|
||||
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
|
||||
when the task list is empty:
|
||||
|
||||
```html
|
||||
<adf-cloud-task-list>
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
<adf-cloud-task-list>
|
||||
```
|
||||
|
||||
|
||||
@@ -22,14 +22,14 @@ Shows all available apps.
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
You can show custom content when there are no apps available by supplying an
|
||||
`<adf-empty-custom-content>` section:
|
||||
`<adf-custom-empty-content>` section:
|
||||
|
||||
```html
|
||||
<adf-apps
|
||||
[layoutType]="'GRID'">
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
No Apps present
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
|
||||
@@ -34,14 +34,14 @@ Renders a list containing all the process instances matched by the parameters sp
|
||||
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
|
||||
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
|
||||
when the process list is empty:
|
||||
|
||||
```html
|
||||
<adf-process-instance-list>
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
<adf-process-instance-list>
|
||||
```
|
||||
|
||||
|
||||
@@ -64,12 +64,12 @@ example:
|
||||
|
||||
```html
|
||||
<adf-task-details [taskId]="taskId">
|
||||
<no-task-details-template>
|
||||
<adf-no-task-details-template>
|
||||
<ng-template>
|
||||
<h1>Sorry, no tasks here</h1>
|
||||
<img src="example.jpg">
|
||||
</ng-template>
|
||||
</no-task-details-template>
|
||||
</adf-no-task-details-template>
|
||||
</adf-task-details>
|
||||
```
|
||||
|
||||
|
||||
@@ -36,14 +36,14 @@ Renders a list containing all the tasks matched by the parameters specified.
|
||||
|
||||
### [Transclusions](../user-guide/transclusion.md)
|
||||
|
||||
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
|
||||
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
|
||||
when the task list is empty:
|
||||
|
||||
```html
|
||||
<adf-tasklist>
|
||||
<adf-empty-custom-content>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-empty-custom-content>
|
||||
</adf-custom-empty-content>
|
||||
<adf-tasklist>
|
||||
```
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ Open the [`login.component`](../core/login.component.md)`.html` file and change
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
|
||||
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
|
||||
@@ -138,7 +138,7 @@ project have a
|
||||
[Transclusions](../user-guide/transclusion.md)
|
||||
section in the doc page with all the relevant details.
|
||||
|
||||
The `<adf-login/>` component supports two targets: `login-header` and `login-footer`.
|
||||
The `<adf-login/>` component supports two targets: `adf-login-header` and `adf-login-footer`.
|
||||
|
||||
Let's add a simple Hello World message in the footer. Open the template `src/app/login/login.component.html` and add a new tag _inside_ the `<adf-login/>` HTML tag:
|
||||
|
||||
@@ -149,17 +149,17 @@ Let's add a simple Hello World message in the footer. Open the template `src/app
|
||||
(executeSubmit)="myExecuteSubmitMethod($event)"
|
||||
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
|
||||
successRoute="/documentlist">
|
||||
<login-footer>
|
||||
<adf-login-footer>
|
||||
<ng-template>
|
||||
Hello World!
|
||||
</ng-template>
|
||||
</login-footer>
|
||||
</adf-login-footer>
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
Be careful that you place the `<login-footer/>` tag _inside_ the `<adf-login/>` tag.
|
||||
Be careful that you place the `<adf-login-footer/>` tag _inside_ the `<adf-login/>` tag.
|
||||
|
||||
Inside the `<login-footer/>` or `<login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
|
||||
Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
|
||||
|
||||
### Bonus objective: Add a custom logo and background to the login screen
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ content of the body:
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
|
||||
<adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user