diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 957ec0edd8..159ea141b5 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -6,6 +6,15 @@ npm install --save ``` +## Build from sources + +Alternatively you can build component from sources with the following commands: + +```sh +npm install +npm run build +``` + ## Basic usage ```html @@ -23,12 +32,16 @@ Example of the component that declares document list and provides values for bin ```ts import {Component} from 'angular2/core'; -import {DOCUMENT_LIST_DIRECTIVES} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'; +import { + DOCUMENT_LIST_DIRECTIVES, + DOCUMENT_LIST_PROVIDERS +} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'; @Component({ selector: 'my-view', template: '', - directives: [DOCUMENT_LIST_DIRECTIVES] + directives: [DOCUMENT_LIST_DIRECTIVES], + providers: [DOCUMENT_LIST_PROVIDERS] }) export class MyView { thumbnails: boolean = true; @@ -50,6 +63,7 @@ export class MyView { Note the use of ```DOCUMENT_LIST_DIRECTIVES``` barrel that consolidates all the document list related directives together. It gives you access to ``````, `````` and many other directives. +In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function. ### Actions @@ -78,8 +92,28 @@ export class MyView { } ``` +All document actions are rendered as a dropdown menu as on the picture below: + ![Document Actions](docs/assets/document-actions.png) +#### Quick document actions + +It is also possible to display most frequent actions within a separate `````` +buttons panel: + +```html + + + + + +``` + +Quick actions provide same support for system and custom handlers. +In addition it is possible setting button icon (css class list), text of the label or both. + +![Quick document Actions](docs/assets/quick-document-actions.png) + #### Folder actions ```html @@ -103,9 +137,50 @@ export class MyView { ![Folder Actions](docs/assets/folder-actions.png) -## Build from sources +#### Quick folder actions -```sh -npm install -npm run build +Quick folder actions have the same behavior as quick document actions. +You can use custom or system handler and provide icon, text or both. +Every folder action is rendered as a separate button. + +```html + + + + + ``` + +![Quick folder Actions](docs/assets/quick-folder-actions.png) + +#### Using all actions at the same time + +```html + + + + + + + + + + + + + + + + +``` + +## Advanced usage + +### Customizing default actions + +TBD diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png new file mode 100644 index 0000000000..92f0c587fd Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png new file mode 100644 index 0000000000..d0551fc876 Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png differ