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

#393 readme update

Browse Source
This commit is contained in:
Denys Vuika
2016-07-11 12:23:36 +01:00
parent f52ee495f2
commit 9b6dcde0bc
18 changed files with 181 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demo-shell-ng2/app/components/files/files.component.css
View File

@@ -0,0 +1,9 @@
.container {
margin: 10px;
}
@media only screen and (max-width: 640px) {
.container {
margin: 0;
}
}

183
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -1,98 +1,99 @@
<alfresco-upload-drag-area <div class="container">
[showUploadDialog]="true" <alfresco-upload-drag-area
[currentFolderPath]="currentPath" [showUploadDialog]="true"
[uploaddirectory]=""
(onSuccess)="documentList.reload()">
<alfresco-document-list-breadcrumb
[currentFolderPath]="currentPath"
[target]="documentList">
</alfresco-document-list-breadcrumb>
<alfresco-document-list
#documentList
[currentFolderPath]="currentPath" [currentFolderPath]="currentPath"
[contextMenuActions]="true" [uploaddirectory]=""
[contentActions]="true" (onSuccess)="documentList.reload()">
(preview)="showFile($event)" <alfresco-document-list-breadcrumb
(folderChange)="onFolderChanged($event)"> [currentFolderPath]="currentPath"
<!-- [target]="documentList">
<empty-folder-content> </alfresco-document-list-breadcrumb>
<template> <alfresco-document-list
<h1>Sorry, no content here</h1> #documentList
</template> [currentFolderPath]="currentPath"
</empty-folder-content> [contextMenuActions]="true"
--> [contentActions]="true"
<content-columns> (preview)="showFile($event)"
<content-column key="$thumbnail" type="image"></content-column> (folderChange)="onFolderChanged($event)">
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<!-- <!--
<content-column <empty-folder-content>
title="Type" <template>
source="content.mimeType"> <h1>Sorry, no content here</h1>
</content-column> </template>
</empty-folder-content>
--> -->
<content-column <content-columns>
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}" <content-column key="$thumbnail" type="image"></content-column>
key="createdByUser.displayName" <content-column
sortable="true" title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
class="desktop-only"> key="name"
</content-column> sortable="true"
<content-column class="full-width ellipsis-cell">
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}" </content-column>
key="createdAt" <!--
type="date" <content-column
format="medium" title="Type"
sortable="true" source="content.mimeType">
class="desktop-only"> </content-column>
</content-column> -->
</content-columns> <content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns>
<content-actions> <content-actions>
<!-- folder actions --> <!-- folder actions -->
<content-action <content-action
target="folder" target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1"> handler="system1">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)"> (execute)="myFolderAction1($event)">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete"> handler="delete">
</content-action> </content-action>
<!-- document actions -->
<!-- document actions --> <content-action
<content-action target="document"
target="document" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}" handler="download">
handler="download"> </content-action>
</content-action> <content-action
<content-action target="document"
target="document" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}" handler="system2">
handler="system2"> </content-action>
</content-action> <content-action
<content-action target="document"
target="document" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}" (execute)="myCustomAction1($event)">
(execute)="myCustomAction1($event)"> </content-action>
</content-action> <content-action
<content-action target="document"
target="document" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}" handler="delete">
handler="delete"> </content-action>
</content-action> </content-actions>
</content-actions> </alfresco-document-list>
</alfresco-document-list> </alfresco-upload-drag-area>
</alfresco-upload-drag-area> </div>
<context-menu-holder></context-menu-holder> <context-menu-holder></context-menu-holder>

346
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -1,4 +1,4 @@
# Document List Component for Angular 2 # DocumentList Component for Angular 2
<p> <p>
<a title='Build Status' href="https://travis-ci.org/Alfresco/alfresco-ng2-components"> <a title='Build Status' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
@@ -28,15 +28,18 @@
</a> </a>
</p> </p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Install ## Install
```sh ```sh
npm install --save ng2-alfresco-documentlist npm install --save ng2-alfresco-documentlist
``` ```
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
```sh
node -v
```
#### Dependencies #### Dependencies
Add the following dependency to your index.html: Add the following dependency to your index.html:
@@ -45,25 +48,25 @@ Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/bundle.js"></script> <script src="node_modules/alfresco-js-api/bundle.js"></script>
``` ```
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-translate](https://github.com/ocombe/ng2-translate)
- ng2-alfresco-core - [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
- ng2-alfresco-documentlist - [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](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
design dependency to your project: design dependency to your project:
```sh ```sh
npm install --save material-design-icons material-design-lite 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 ```html
<!-- Google Material Design Lite --> <!-- Google Material Design Lite -->
@@ -72,107 +75,31 @@ Also make sure you include these dependencies in your .html page:
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` ```
## Basic usage ## Basic usage
```html ```html
<alfresco-document-list <alfresco-document-list
[breadcrumb]="breadcrumb" #documentList
[navigate]="navigation" [currentFolderPath]="currentPath"
(itemClick)="onItemClick($event)"> [contextMenuActions]="true"
[contentActions]="true"
[multiselect]="true"
(folderChange)="onFolderChanged($event)">
</alfresco-document-list> </alfresco-document-list>
``` ```
Example of the component that declares document list and provides values for bindings: _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)
```ts repository._
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoPipeTranslate,
AlfrescoTranslationService,
CONTEXT_MENU_DIRECTIVES
} from 'ng2-alfresco-core';
import {
DOCUMENT_LIST_DIRECTIVES,
DOCUMENT_LIST_PROVIDERS,
DocumentActionsService
} from 'ng2-alfresco-documentlist';
@Component({
selector: 'alfresco-documentlist-demo',
template: `
<div class="container">
<alfresco-document-list [breadcrumb]="true" *ngIf="authenticated">
</alfresco-document-list>
</div>
`,
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 ```<document-actions>```, ```<folder-actions>``` and many other directives.
In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function.
### Breadcrumb ### Breadcrumb
Document List provides simple breadcrumb element to indicate the current position within a navigation hierarchy. DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
It can be enabled via `breadcrumb` attribute:
```html ```html
<alfresco-document-list [breadcrumb]="true"> <alfresco-document-list-breadcrumb
</alfresco-document-list> [target]="documentList">
</alfresco-document-list-breadcrumb>
``` ```
![Breadcrumb](docs/assets/breadcrumb.png) ![Breadcrumb](docs/assets/breadcrumb.png)
@@ -189,10 +116,27 @@ A custom set of columns can look like the following:
```html ```html
<alfresco-document-list ...> <alfresco-document-list ...>
<content-columns> <content-columns>
<content-column source="$thumbnail" type="image"></content-column> <content-column key="$thumbnail" type="image"></content-column>
<content-column title="Name" source="name" class="full-width name-column"></content-column> <content-column
<content-column title="Created By" source="createdByUser.displayName"></content-column> title="Name"
<content-column title="Created On" source="createdAt" type="date" format="medium"></content-column> key="name"
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<content-column
title="Created By"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
title="Created On"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns> </content-columns>
</alfresco-document-list> </alfresco-document-list>
``` ```
@@ -220,9 +164,9 @@ the binding value for the Site column to display location site will be `location
```html ```html
<alfresco-document-list ...> <alfresco-document-list ...>
<content-columns> <content-columns>
<content-column source="$thumbnail" type="image"></content-column> <content-column key="$thumbnail" type="image"></content-column>
<content-column title="Name" source="displayName" class="full-width name-column"></content-column> <content-column title="Name" key="displayName" class="full-width ellipsis-cell"></content-column>
<content-column title="Site" source="location.site"></content-column> <content-column title="Site" key="location.site"></content-column>
</content-columns> </content-columns>
</alfresco-document-list> </alfresco-document-list>
``` ```
@@ -235,8 +179,9 @@ HTML attributes:
| --- | --- | --- | --- | | --- | --- | --- | --- |
| title | string | | Column title | | title | string | | Column title |
| sr-title | string | | Screen reader title, used only when `title` is empty | | sr-title | string | | Screen reader title, used only when `title` is empty |
| source | string | | Column source, example: `createdByUser.displayName` | | key | string | | Column source key, example: `createdByUser.displayName` |
| class | string | | CSS class list, example: `full-width name-column` | | 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 | | type | string | text | Column type, text\|date\|number |
| format | string | | Value format pattern | | format | string | | Value format pattern |
@@ -245,7 +190,7 @@ For a full list of available `format` values please refer to [DatePipe](https://
### Actions ### 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. 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. You can define both folder and document actions at the same time.
@@ -257,14 +202,12 @@ You can define both folder and document actions at the same time.
<content-action <content-action
target="document" target="document"
type="menu"
title="System action" title="System action"
handler="system2"> handler="system2">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="menu"
title="Custom action" title="Custom action"
(execute)="myCustomAction1($event)"> (execute)="myCustomAction1($event)">
</content-action> </content-action>
@@ -278,12 +221,13 @@ export class MyView {
// ... // ...
myCustomAction1(event) { 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) ![Document Actions](docs/assets/document-actions.png)
@@ -292,8 +236,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: The following action handlers are provided out-of-box:
- Download (document) - **Download** (document)
- Delete (document, folder) - **Delete** (document, folder)
All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"` All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"`
will trigger the same `download` action. will trigger the same `download` action.
@@ -308,7 +252,6 @@ Initiates download of the corresponding document file.
<content-action <content-action
target="document" target="document"
type="menu"
title="Download" title="Download"
handler="download"> handler="download">
</content-action> </content-action>
@@ -320,36 +263,6 @@ Initiates download of the corresponding document file.
![Download document action](docs/assets/document-action-download.png) ![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
<alfresco-document-list ...>
<content-actions>
<content-action
target="document"
type="button"
icon="extension"
handler="system1">
</content-action>
<content-action
target="document"
type="button"
icon="thumb_up"
handler="system2">
</content-action>
</content-actions>
</alfresco-document-list>
```
Button actions provide same support for system and custom handlers.
![Quick document Actions](docs/assets/quick-document-actions.png)
#### Folder actions #### Folder actions
Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value. Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value.
@@ -360,14 +273,12 @@ Folder actions have the same declaration as document actions except ```taget="fo
<content-action <content-action
target="folder" target="folder"
type="menu"
title="Default folder action 1" title="Default folder action 1"
handler="system1"> handler="system1">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
type="menu"
title="Custom folder action" title="Custom folder action"
(execute)="myFolderAction1($event)"> (execute)="myFolderAction1($event)">
</content-action> </content-action>
@@ -381,40 +292,18 @@ export class MyView {
// ... // ...
myFolderAction1(event) { 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 Actions](docs/assets/folder-actions.png)
#### Folder action buttons
Every folder action is rendered as a separate button.
```html
<alfresco-document-list ...>
<content-actions>
<content-action
target="folder"
type="button"
icon="delete"
title="Delete"
handler="system1">
</content-action>
</content-actions>
</alfresco-document-list>
```
![Quick folder Actions](docs/assets/quick-folder-actions.png)
### Context Menu ### Context Menu
DocumentList also provide integration for 'Context Menu Service' from the DocumentList also provide integration for 'Context Menu Service' from the
`ng2-alfresco-core` library. [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
You can automatically turn all menu actions (for the files and folders) You can automatically turn all menu actions (for the files and folders)
into context menu items like shown below: into context menu items like shown below:
@@ -453,7 +342,7 @@ This enables context menu items for documents and folders.
By default DocumentList component uses 'double-click' mode for navigation. 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 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. other modes, like single-click navigation for example.
The following navigation modes are supported: The following navigation modes are supported:
@@ -470,86 +359,15 @@ The following example switches navigation to single clicks:
### Events ### Events
Document List emits the following events: DocumentList emits the following events:
| Name | Description | | Name | Description |
| --- | --- | | --- | --- |
| itemClick | emitted when user clicks a document list entry | | nodeClick | emitted when user clicks a list node |
| itemDblClick | emitted when user double-clicks document a document list entry | | nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed | | 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 | | 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
<alfresco-document-list (itemClick)="onItemClick($event)">
</alfresco-document-list>
```
```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
<alfresco-document-list
(folderchange)="onFolderChanged($event)">
</alfresco-document-list>
```
```ts
export class MyView {
...
onFolderChanged(e) {
console.log(e.value);
console.log(e.absolutePath);
console.log(e.relativePath);
}
}
```
## Advanced usage and customization ## Advanced usage and customization
### Hiding columns on small screens ### Hiding columns on small screens
@@ -577,23 +395,23 @@ Now you can declare columns and assign `desktop-only` class where needed:
<!-- always visible columns --> <!-- always visible columns -->
<content-column source="$thumbnail" type="image"></content-column> <content-column key="$thumbnail" type="image"></content-column>
<content-column <content-column
title="Name" title="Name"
source="name" key="name"
class="full-width name-column"> class="full-width ellipsis-cell">
</content-column> </content-column>
<!-- desktop-only columns --> <!-- desktop-only columns -->
<content-column <content-column
title="Created by" title="Created by"
source="createdByUser.displayName" key="createdByUser.displayName"
class="desktop-only"> class="desktop-only">
</content-column> </content-column>
<content-column <content-column
title="Created on" title="Created on"
source="createdAt" key="createdAt"
type="date" type="date"
format="medium" format="medium"
class="desktop-only"> class="desktop-only">
@@ -612,7 +430,7 @@ Now you can declare columns and assign `desktop-only` class where needed:
### Custom 'empty folder' template ### 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) ![Default empty folder](docs/assets/empty-folder-template-default.png)
@@ -632,7 +450,6 @@ That will give the following output:
![Custom empty folder](docs/assets/empty-folder-template-custom.png) ![Custom empty folder](docs/assets/empty-folder-template-custom.png)
### Customizing default actions ### Customizing default actions
It is possible extending or replacing the list of available system actions for documents and folders. It is possible extending or replacing the list of available system actions for documents and folders.
@@ -650,8 +467,7 @@ Example below demonstrates how a new action handler can be registered with the
<content-action <content-action
target="document" target="document"
type="button" title="My action"
icon="account_circle"
handler="my-handler"> handler="my-handler">
</content-action> </content-action>
@@ -682,12 +498,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. The same approach allows changing the way out-of-box action handlers behave.
Registering custom action with the name `download` replaces default one: Registering custom action with the name `download` replaces default one:
@@ -712,7 +522,7 @@ by means of custom application service.
## Build from sources ## 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 ```sh
npm install npm install

4
ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
View File

@@ -143,8 +143,8 @@ class DocumentListDemo implements OnInit {
currentPath: string = '/'; currentPath: string = '/';
authenticated: boolean; authenticated: boolean;
// host: string = 'http://devproducts-platform.alfresco.me'; host: string = 'http://devproducts-platform.alfresco.me';
host: string = 'http://127.0.0.1:8080'; // host: string = 'http://127.0.0.1:8080';
token: string; token: string;

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 91 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 192 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 79 KiB