diff --git a/PREREQUISITES.md b/PREREQUISITES.md index 67db633fbb..3537d8ceaf 100644 --- a/PREREQUISITES.md +++ b/PREREQUISITES.md @@ -5,6 +5,10 @@ The [Angular 2](https://angular.io/) based application development framework req - An Alfresco Platform Repository (version [5.2.a-EA](https://wiki.alfresco.com/wiki/Community_file_list_201606-EA) or newer) to talk to, which has [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled. - [Node.js](https://nodejs.org/en/) JavaScript runtime. - [npm](https://www.npmjs.com/) package manager for JavaScript. + +**Verify that you are running at least node `v5.x.x` and npm `3.x.x`** +by running `node -v` and `npm -v` in a terminal/console window. +Older versions produce errors. ## Installing Alfresco diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.css index e69de29bb2..c2bac0048e 100644 --- a/demo-shell-ng2/app/components/files/files.component.css +++ b/demo-shell-ng2/app/components/files/files.component.css @@ -0,0 +1,9 @@ +.container { + margin: 10px; +} + +@media only screen and (max-width: 640px) { + .container { + margin: 0; + } +} diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 0194179160..119653aa46 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -1,98 +1,99 @@ - - - - + - - - - - + [uploaddirectory]="" + (onSuccess)="documentList.reload()"> + + + - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index 0ac35ff0fa..63135e5966 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -28,16 +28,49 @@

-### Node -To correctly use this component check that on your machine is running Node version 5.0.0 or higher. +## Prerequisites + +Before you start using this development framework, make sure you have installed all required software and done all the +necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md). ## Install ```sh -npm install --save ng2-alfresco-datatable material-design-lite material-design-icons +npm install --save ng2-alfresco-datatable ``` -## Basic usage +### Dependencies + +You must separately install the following libraries for your application: + +- [ng2-translate](https://github.com/ocombe/ng2-translate) +- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) + +```sh +npm install --save ng2-translate ng2-alfresco-core +``` + +#### Material Design Lite + +The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material +design dependency to your project: + +```sh +npm install --save material-design-icons material-design-lite +``` + +Also make sure you include these dependencies in your `index.html` file: + +```html + + + + +``` + +## Basic usage example + +**my.component.html** ```html ``` -Example of an App that declares the file viewer component : +**my.component.ts** ```ts import { Component } from '@angular/core'; @@ -56,7 +89,7 @@ import { @Component({ selector: 'my-view', - template: '', + templateUrl: './my.component.html', directives: [ALFRESCO_DATATABLE_DIRECTIVES] }) export class MyView { @@ -71,13 +104,23 @@ export class MyView { ], // schema [ - {type: 'text', key: 'id', title: 'Id', sortable: true}, - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true} + { + type: 'text', + key: 'id', + title: 'Id', + sortable: true + }, + { + type: 'text', + key: 'name', + title: 'Name', + cssClass: 'full-width', + sortable: true + } ] ); } } - ``` ![DataTable demo](docs/assets/datatable-demo.png) @@ -86,26 +129,181 @@ export class MyView { | Name | Type | Default | Description | --- | --- | --- | --- | -| data | DataTableAdapter | empty **ObjectDataTableAdapter** | data source | -| multiselect | boolean | false | toggle multiple row selection, renders checkboxes at the beginning of each row | -| actions | boolean | false | toggle data actions column | +| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source | +| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | +| actions | boolean | false | Toggles data actions column | ### Events | Name | Description | --- | --- | -| rowClick | emitted when user clicks the row | -| rowDblClick | emitted when user double-clicks the row | +| [rowClick](#rowclick-event) | Emitted when user clicks the row | +| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row | +| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row | +| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row | +| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user | + +**Advanced usage example** + +```html + + + + + +``` + +#### rowClick event + +_This event is emitted when user clicks the row._ + +Event properties: + +```ts +row: DataRow, // row clicked +event: Event // original HTML DOM event +``` + +Handler example: + +```ts +onRowClicked(event) { + console.log(event.row); +} +``` + +#### rowDblClick event + +_This event is emitted when user double-clicks the row._ + +Event properties: + +```ts +row: DataRow, // row clicked +event: Event // original HTML DOM event +``` + +Handler example: + +```ts +onRowDblClicked(event) { + console.log(event.row); +} +``` + +#### showRowContextMenu event + +_Emitted before context menu is displayed for a row._ + +Note that DataTable itself does not populate context menu items, +you can provide all necessary content via handler. + +Event properties: + +```ts +args: { + row: DataRow, + col: DataColumn, + actions: [] +} +``` + +Handler example: + +```ts +onShowRowContextMenu(event) { + event.args.actions = [ + { ... }, + { ... } + ] +} +``` + +DataTable will automatically render provided menu items. + +_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core) +documentation for more details on context actions format and behavior._ + +#### showRowActionsMenu event + +_Emitted before actions menu is displayed for a row. +Requires `actions` property to be set to `true`._ + +Note that DataTable itself does not populate action menu items, +you can provide all necessary content via handler. + +Event properties: + +```ts +args: { + row: DataRow, + col: DataColumn, + actions: [] +} +``` + +Handler example: + +```ts +onShowRowActionsMenu(event) { + event.args.actions = [ + { ... }, + { ... } + ] +} +``` + +#### executeRowAction event + +_Emitted when row action is executed by user._ + +Usually accompanies `showRowActionsMenu` event. +DataTable itself does not execute actions but provides support for external +integration. If there were actions provided with `showRowActionsMenu` event +then `executeRowAction` will be automatically executed when user clicks +corresponding menu item. + +Event properties: + +```ts +args: { + row: DataRow + action: any +} +``` + +Handler example: + +```ts +onExecuteRowAction(event) { + + // get event arguments + let row = event.args.row; + let action = event.args.action; + + // your code to execute action + this.executeContentAction(row, action); +} +``` ## Data sources DataTable component gets data by means of data adapter. It is possible having data retrieved from different kinds of sources by implementing -a custom `DataTableAdapter`: +a custom `DataTableAdapter` using the following interfaces: ```ts interface DataTableAdapter { - getRows(): Array; setRows(rows: Array): void; getColumns(): Array; @@ -114,12 +312,28 @@ interface DataTableAdapter { getSorting(): DataSorting; setSorting(sorting: DataSorting): void; sort(key?: string, direction?: string): void; +} +interface DataRow { + isSelected: boolean; + hasValue(key: string): boolean; + getValue(key: string): any; +} + +interface DataColumn { + key: string; + type: string; // text|image|date + format?: string; + sortable?: boolean; + title?: string; + srTitle?: string; + cssClass?: string; } ``` -DataTable ships `ObjectDataTableAdapter` out-of-box. This is a simple data adapter -that binds to object arrays and turns object fields into columns: +DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-box. +This is a simple data adapter implementation that binds to object arrays +and turns object fields into columns: ```ts let data = new ObjectDataTableAdapter( @@ -130,8 +344,18 @@ let data = new ObjectDataTableAdapter( ], // schema [ - {type: 'text', key: 'id', title: 'Id', sortable: true}, - {type: 'text', key: 'name', title: 'Name', sortable: true} + { + type: 'text', + key: 'id', + title: 'Id', + sortable: true + }, + { + type: 'text', + key: 'name', + title: 'Name', + sortable: true + } ] ); ``` @@ -145,19 +369,19 @@ npm install npm run build ``` -##Build the files and keep watching for changes +### Build the files and keep watching for changes - ```sh - $ npm run build:w - ``` +```sh +$ npm run build:w +``` -## Running unit tests +### Running unit tests ```sh npm test ``` -## Running unit tests in browser +### Running unit tests in browser ```sh npm test-browser @@ -166,7 +390,7 @@ npm test-browser This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing. -## Code coverage +### Code coverage ```sh npm run coverage diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts index e082904987..4d9b47b242 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts @@ -94,7 +94,7 @@ export class DataTableComponent implements OnInit, AfterViewChecked { } } - onRowClick(row: DataRow, e?) { + onRowClick(row: DataRow, e?: Event) { if (e) { e.preventDefault(); } diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 6ea638a025..eeff0ed589 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -1,4 +1,4 @@ -# Document List Component for Angular 2 +# DocumentList Component for Angular 2

@@ -28,8 +28,10 @@

-### Node -To correctly use this component check that on your machine is running Node version 5.0.0 or higher. +## Prerequisites + +Before you start using this development framework, make sure you have installed all required software and done all the +necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md). ## Install @@ -37,7 +39,7 @@ To correctly use this component check that on your machine is running Node versi npm install --save ng2-alfresco-documentlist ``` -#### Dependencies +### Dependencies Add the following dependency to your index.html: @@ -45,25 +47,25 @@ Add the following dependency to your index.html: ``` -The following component needs to be added to your systemjs.config: +The following component needs to be added to your `systemjs.config.js` file: -- ng2-translate -- ng2-alfresco-core -- ng2-alfresco-documentlist +- [ng2-translate](https://github.com/ocombe/ng2-translate) +- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) +- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable) -Please refer to the following example to have an idea of how your systemjs.config should look like : +You can get more details in the +[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js). -https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js +#### Material Design Lite -#### Style -The style of this component is based on material design, so if you want to visualize it correctly you have to add the material +The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material design dependency to your project: ```sh npm install --save material-design-icons material-design-lite ``` -Also make sure you include these dependencies in your .html page: +Also make sure you include these dependencies in your `index.html` file: ```html @@ -72,107 +74,52 @@ Also make sure you include these dependencies in your .html page: ``` - ## Basic usage ```html + #documentList + [currentFolderPath]="currentPath" + [contextMenuActions]="true" + [contentActions]="true" + [multiselect]="true" + (folderChange)="onFolderChanged($event)"> ``` -Example of the component that declares document list and provides values for bindings: +### Properties -```ts -import { Component, OnInit } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { HTTP_PROVIDERS } from '@angular/http'; +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| navigate | boolean | true | Toggles navigation to folder content or file preview | +| navigationMode | string (click\|dblclick) | dblclick | User interaction for folder navigation or file preview | +| thumbnails | boolean | false | Show document thumbnails rather than icons | +| multiselect | boolean | false | Toggles multiselect mode | +| contentActions | boolean | false | Toggles content actions for each row | +| contextMenuActions | boolean | false | Toggles context menus for each row | -import { - ALFRESCO_CORE_PROVIDERS, - AlfrescoSettingsService, - AlfrescoAuthenticationService, - AlfrescoPipeTranslate, - AlfrescoTranslationService, - CONTEXT_MENU_DIRECTIVES -} from 'ng2-alfresco-core'; +### Events -import { - DOCUMENT_LIST_DIRECTIVES, - DOCUMENT_LIST_PROVIDERS, - DocumentActionsService -} from 'ng2-alfresco-documentlist'; +| Name | Description | +| --- | --- | +| nodeClick | Emitted when user clicks the node | +| nodeDblClick | Emitted when user double-clicks the node | +| folderChange | Emitted upon display folder changed | +| preview | Emitted when document preview is requested either with single or double click | -@Component({ - selector: 'alfresco-documentlist-demo', - template: ` -
- - -
- `, - styles: [':host > .container {padding: 10px}'], - directives: [DOCUMENT_LIST_DIRECTIVES], - providers: [DOCUMENT_LIST_PROVIDERS], - pipes: [AlfrescoPipeTranslate] -}) -class DocumentListDemo implements OnInit { - authenticated: boolean; - - constructor(private authService: AlfrescoAuthenticationService, - settings: AlfrescoSettingsService, - translation: AlfrescoTranslationService, - documentActions: DocumentActionsService) { - - settings.host = 'http://myalfrescoip'; - translation.addTranslationFolder(); - documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this)); - } - - ngOnInit() { - this.login(); - } - - myDocumentActionHandler(obj: any) { - window.alert('my custom action handler'); - } - - myCustomAction1(event) { - alert('Custom document action for ' + event.value.displayName); - } - - myFolderAction1(event) { - alert('Custom folder action for ' + event.value.displayName); - } - - login() { - this.authService.login('admin', 'admin').subscribe(token => { - this.authenticated = true; - }); - } -} - -bootstrap(DocumentListDemo, [ - HTTP_PROVIDERS, - ALFRESCO_CORE_PROVIDERS -]); -``` - -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. +_For a complete example source code please refer to +[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo) +repository._ ### Breadcrumb -Document List provides simple breadcrumb element to indicate the current position within a navigation hierarchy. -It can be enabled via `breadcrumb` attribute: +DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy. ```html - - + + ``` ![Breadcrumb](docs/assets/breadcrumb.png) @@ -189,10 +136,27 @@ A custom set of columns can look like the following: ```html - - - - + + + + + + + ``` @@ -220,9 +184,9 @@ the binding value for the Site column to display location site will be `location ```html - - - + + + ``` @@ -235,8 +199,9 @@ HTML attributes: | --- | --- | --- | --- | | title | string | | Column title | | sr-title | string | | Screen reader title, used only when `title` is empty | -| source | string | | Column source, example: `createdByUser.displayName` | -| class | string | | CSS class list, example: `full-width name-column` | +| key | string | | Column source key, example: `createdByUser.displayName` | +| sortable | boolean | false | Toggle sorting ability via column header clicks | +| class | string | | CSS class list, example: `full-width ellipsis-cell` | | type | string | text | Column type, text\|date\|number | | format | string | | Value format pattern | @@ -245,7 +210,7 @@ For a full list of available `format` values please refer to [DatePipe](https:// ### Actions -Document List supports declarative actions for Documents and Folders. +DocumentList supports declarative actions for Documents and Folders. Each action can be bound to either default out-of-box handler or a custom behavior. You can define both folder and document actions at the same time. @@ -257,14 +222,12 @@ You can define both folder and document actions at the same time. @@ -278,12 +241,13 @@ export class MyView { // ... myCustomAction1(event) { - alert('Custom document action for ' + event.value.displayName); + let entry = event.value.entry; + alert(`Custom document action for ${entry.name}`); } } ``` -All document actions with `type="menu"` are rendered as a dropdown menu as on the picture below: +All document actions are rendered as a dropdown menu as on the picture below: ![Document Actions](docs/assets/document-actions.png) @@ -292,8 +256,8 @@ All document actions with `type="menu"` are rendered as a dropdown menu as on th The following action handlers are provided out-of-box: -- Download (document) -- Delete (document, folder) +- **Download** (document) +- **Delete** (document, folder) All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"` will trigger the same `download` action. @@ -308,7 +272,6 @@ Initiates download of the corresponding document file. @@ -320,36 +283,6 @@ Initiates download of the corresponding document file. ![Download document action](docs/assets/document-action-download.png) -#### Document action buttons - -It is also possible to display most frequent actions within a separate buttons panel: - -```html - - - - - - - - - - - -``` - -Button actions provide same support for system and custom handlers. - -![Quick document Actions](docs/assets/quick-document-actions.png) - #### Folder actions Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value. @@ -360,14 +293,12 @@ Folder actions have the same declaration as document actions except ```taget="fo @@ -381,40 +312,18 @@ export class MyView { // ... myFolderAction1(event) { - alert('Custom folder action for ' + event.value.displayName); + let entry = event.value.entry; + alert(`Custom folder action for ${entry.name}`); } } ``` ![Folder Actions](docs/assets/folder-actions.png) -#### Folder action buttons - -Every folder action is rendered as a separate button. - -```html - - - - - - - - -``` - -![Quick folder Actions](docs/assets/quick-folder-actions.png) - - ### Context Menu -DocumentList also provide integration for 'Context Menu Service' from the -`ng2-alfresco-core` library. +DocumentList also provide integration for 'Context Menu Service' from the +[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library. You can automatically turn all menu actions (for the files and folders) into context menu items like shown below: @@ -453,103 +362,32 @@ This enables context menu items for documents and folders. By default DocumentList component uses 'double-click' mode for navigation. That means user will see the contents of the folder by double-clicking its name -or icon (similar Google Drive behaviour). However it is possible switching to +or icon (similar to Google Drive behaviour). However it is possible switching to other modes, like single-click navigation for example. The following navigation modes are supported: -- click -- dblclick +- **click** +- **dblclick** The following example switches navigation to single clicks: ```html - + ``` ### Events -Document List emits the following events: +DocumentList emits the following events: | Name | Description | | --- | --- | -| itemClick | emitted when user clicks a document list entry | -| itemDblClick | emitted when user double-clicks document a document list entry | +| nodeClick | emitted when user clicks a list node | +| nodeDblClick | emitted when user double-clicks list node | | folderChange | emitted once current display folder has changed | | preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration | -### itemClick event - -Emitted when user clicks on document or folder. - -```html - - -``` - -```ts -export class MyView { - ... - onItemClick(e) { - console.log(e.value); - } -} -``` - -For the event `value` the full node info is provided, i.e.: - -```json -{ - "nodeRef": "workspace://SpacesStore/8bb36efb-c26d-4d2b-9199-ab6922f53c28", - "nodeType": "cm:folder", - "type": "folder", - "mimetype": "", - "isFolder": true, - "isLink": false, - "fileName": "Agency Files", - "displayName": "Agency Files", - "status": "", - "title": "Agency related files", - "description": "This folder holds the agency related files for the project", - "author": "", - "createdOn": "2011-02-15T20:47:03.951Z", - "createdBy": "Mike Jackson", - "createdByUser": "mjackson", - "modifiedOn": "2011-02-15T21:00:43.616Z", - "modifiedBy": "Mike Jackson", - "modifiedByUser": "mjackson" -} -``` - -_The content of the json above was reduced for the sake of simplicity._ - -### folderChange event - -This event is emitted every time current folder is changed. -Event handler gets the following data available: - -- folder -- absolutePath -- relativePath - -```html - - -``` - -```ts -export class MyView { - ... - onFolderChanged(e) { - console.log(e.value); - console.log(e.absolutePath); - console.log(e.relativePath); - } -} -``` - ## Advanced usage and customization ### Hiding columns on small screens @@ -577,23 +415,23 @@ Now you can declare columns and assign `desktop-only` class where needed: - + + key="name" + class="full-width ellipsis-cell"> @@ -612,7 +450,7 @@ Now you can declare columns and assign `desktop-only` class where needed: ### Custom 'empty folder' template -By default Document List provides the following content for the empty folder: +By default DocumentList provides the following content for the empty folder: ![Default empty folder](docs/assets/empty-folder-template-default.png) @@ -632,7 +470,6 @@ That will give the following output: ![Custom empty folder](docs/assets/empty-folder-template-custom.png) - ### Customizing default actions It is possible extending or replacing the list of available system actions for documents and folders. @@ -650,8 +487,7 @@ Example below demonstrates how a new action handler can be registered with the @@ -682,12 +518,6 @@ export class MyView { } ``` -![Custom handler 1](docs/assets/custom-doc-handler-1.png?raw=true) - -Upon execution users will see the following dialog: - -![Custom handler 2](docs/assets/custom-doc-handler-2.png) - The same approach allows changing the way out-of-box action handlers behave. Registering custom action with the name `download` replaces default one: @@ -712,7 +542,7 @@ by means of custom application service. ## Build from sources -Alternatively you can build component from sources with the following commands: +You can build component from sources with the following commands: ```sh npm install @@ -744,4 +574,4 @@ before performing unit testing. ```sh npm run coverage -``` \ No newline at end of file +``` diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts index c8f88828ca..68aaa14a42 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts @@ -143,8 +143,8 @@ class DocumentListDemo implements OnInit { currentPath: string = '/'; authenticated: boolean; - // host: string = 'http://devproducts-platform.alfresco.me'; - host: string = 'http://127.0.0.1:8080'; + host: string = 'http://devproducts-platform.alfresco.me'; + // host: string = 'http://127.0.0.1:8080'; token: string; diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png index 35a0c4b8cc..36c745dc5f 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png index 10ef72c925..1ba048d759 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png deleted file mode 100644 index cd4d0211db..0000000000 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png and /dev/null differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png deleted file mode 100644 index 15065f5d2f..0000000000 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png and /dev/null differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png index 05f8e005dc..05d60793b2 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png index ff05ebe708..f0fcee4a2f 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png index 244955a774..f8f18dbb80 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png index 5749a98382..558b81f300 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png index d88066464c..2c698df6ef 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png index 74f4784979..1907ecd75d 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png differ 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 deleted file mode 100644 index b26f1d51bb..0000000000 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png and /dev/null 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 deleted file mode 100644 index 0c47abd528..0000000000 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png and /dev/null differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png index ce57f0fc77..da7f0dac32 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png index bf926dab4e..933ce1f60b 100644 Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png differ