From 6de51e098ea9eab8d783a3fbb303ff50c00d864c Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 29 Apr 2016 20:35:49 +0100
Subject: [PATCH] Migrated document list to material design table

refs #9
---
 .../app/components/files/files.component.ts   |  15 +-
 .../src/components/document-list.d.ts         |   8 +-
 .../src/components/document-list.js           |  33 ++-
 .../src/components/document-list.js.map       |   2 +-
 .../src/components/document-list.ts           | 215 ++++++++++++------
 5 files changed, 178 insertions(+), 95 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts
index 2b43096ac1..88f99c2962 100644
--- a/demo-shell-ng2/app/components/files/files.component.ts
+++ b/demo-shell-ng2/app/components/files/files.component.ts
@@ -43,12 +43,6 @@ import {MDL} from 'ng2-alfresco-core/material';
                                 <span class="mdl-checkbox__label">Navigation</span>
                             </label>
                         </li>
-                        <li>
-                            <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
-                                <input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" [(ngModel)]="downloads">
-                                <span class="mdl-checkbox__label">Downloads</span>
-                            </label>
-                        </li>
                     </ul>
                     <hr>
                     <ul class="list-unstyled" style="font-size: 10px">
@@ -62,18 +56,18 @@ import {MDL} from 'ng2-alfresco-core/material';
                         [thumbnails]="thumbnails"
                         [breadcrumb]="breadcrumb"
                         [navigate]="navigation"
-                        [downloads]="downloads"
-                        folder-icon="fa fa-folder-o"
+                        folder-icon=""
                         (itemClick)="onItemClick($event)">
                         <quick-folder-actions>
-                            <quick-folder-action title="Delete" handler="system1"></quick-folder-action>
+                            <quick-folder-action icon="delete" title="Delete" handler="system1"></quick-folder-action>
                         </quick-folder-actions>
                         <folder-actions>
                             <folder-action title="Default folder action 1" handler="system1"></folder-action>
                             <folder-action title="Custom folder action" (execute)="myFolderAction1($event)"></folder-action>
                         </folder-actions>
                         <quick-document-actions>
-                            <quick-document-action icon="glyphicon glyphicon-pushpin" handler="system1"></quick-document-action>
+                            <quick-document-action icon="extension" handler="system1"></quick-document-action>
+                            <quick-document-action icon="thumb_up" handler="system2"></quick-document-action>
                         </quick-document-actions>
                         <document-actions>
                             <document-action title="System action" handler="system2"></document-action>
@@ -91,7 +85,6 @@ export class FilesComponent {
     thumbnails: boolean = true;
     breadcrumb: boolean = false;
     navigation: boolean = true;
-    downloads: boolean = true;
 
     events: any[] = [];
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.d.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.d.ts
index bdc2abf3dc..8b0389e53b 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.d.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.d.ts
@@ -14,18 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OnInit, EventEmitter } from 'angular2/core';
+import { OnInit, EventEmitter, AfterViewChecked } from 'angular2/core';
 import { AlfrescoService } from './../services/alfresco.service';
 import { FolderEntity } from './../core/entities/folder.entity';
 import { DocumentEntity } from './../core/entities/document.entity';
 import { ContentActionModel } from './../models/content-action.model';
-export declare class DocumentList implements OnInit {
+export declare class DocumentList implements OnInit, AfterViewChecked {
     private _alfrescoService;
     navigate: boolean;
     breadcrumb: boolean;
-    folderIconClass: string;
+    folderIcon: string;
     thumbnails: boolean;
-    downloads: boolean;
     itemClick: EventEmitter<any>;
     rootFolder: {
         name: string;
@@ -42,6 +41,7 @@ export declare class DocumentList implements OnInit {
     canNavigateParent(): boolean;
     constructor(_alfrescoService: AlfrescoService);
     ngOnInit(): void;
+    ngAfterViewChecked(): void;
     onNavigateParentClick($event: any): void;
     onItemClick(item: DocumentEntity, $event: any): void;
     goToRoute(r: any, $event: any): void;
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
index e98da0ff51..d0f5f98fa9 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js
@@ -1,3 +1,19 @@
+/**
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 System.register(['angular2/core', './../services/alfresco.service'], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
@@ -27,7 +43,6 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     this.navigate = true;
                     this.breadcrumb = false;
                     this.thumbnails = true;
-                    this.downloads = true;
                     this.itemClick = new core_1.EventEmitter();
                     this.rootFolder = {
                         name: 'Document Library',
@@ -49,6 +64,12 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     this.route.push(this.rootFolder);
                     this.displayFolderContent(this.rootFolder.path);
                 };
+                DocumentList.prototype.ngAfterViewChecked = function () {
+                    // workaround for MDL issues with dynamic components
+                    if (componentHandler) {
+                        componentHandler.upgradeAllRegistered();
+                    }
+                };
                 DocumentList.prototype.onNavigateParentClick = function ($event) {
                     if ($event) {
                         $event.preventDefault();
@@ -130,15 +151,11 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                 __decorate([
                     core_1.Input('folder-icon'), 
                     __metadata('design:type', String)
-                ], DocumentList.prototype, "folderIconClass", void 0);
+                ], DocumentList.prototype, "folderIcon", void 0);
                 __decorate([
                     core_1.Input(), 
                     __metadata('design:type', Boolean)
                 ], DocumentList.prototype, "thumbnails", void 0);
-                __decorate([
-                    core_1.Input(), 
-                    __metadata('design:type', Boolean)
-                ], DocumentList.prototype, "downloads", void 0);
                 __decorate([
                     core_1.Output(), 
                     __metadata('design:type', core_1.EventEmitter)
@@ -147,9 +164,9 @@ System.register(['angular2/core', './../services/alfresco.service'], function(ex
                     core_1.Component({
                         selector: 'alfresco-document-list',
                         styles: [
-                            "\n            :host .breadcrumb {\n                margin-bottom: 4px;\n            }\n\n            :host .folder-icon {\n                float: left;\n                margin-right: 10px;\n                font-size: 4em;\n            }\n\n            :host .file-icon {\n                width: 52px;\n                height: 52px;\n                float: left;\n                margin-right: 10px;\n            }\n            \n            :host .document-header {\n                font-size: 24px;\n                line-height: 32px;\n            }\n            \n            :host .document-header:hover {\n                text-decoration: underline;\n            }\n        "
+                            "\n            :host .full-width { width: 100%; }\n            \n            :host .folder-thumbnail {\n                font-size: 48px;\n                cursor: pointer;\n            }\n            \n            :host .document-thumbnail {\n                width: 48px;\n                height: 48px;\n                cursor: pointer;\n            }\n            \n            :host .content-header {\n                font-size: 15px;\n            }\n           \n            :host .content-header:hover {\n                text-decoration: underline;\n                cursor: pointer;\n            }\n            \n            :host .parent-folder-link { cursor: pointer; }\n            :host .parent-folder-link > td { text-align: left; }\n            :host .folder-header-cell { cursor: pointer; }\n            \n            :host .breadcrumb { margin-bottom: 4px; }\n\n            :host .folder-icon {\n                float: left;\n                margin-right: 10px;\n                font-size: 4em;\n            }\n\n            :host .file-icon {\n                width: 52px;\n                height: 52px;\n                float: left;\n                margin-right: 10px;\n            }\n            \n            :host .document-header {\n                font-size: 24px;\n                line-height: 32px;\n            }\n            \n            :host .document-header:hover {\n                text-decoration: underline;\n            }\n        "
                         ],
-                        template: "\n        <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n            <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n                <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n                <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n            </li>\n        </ol>\n        <div *ngIf=\"folder\" class=\"list-group\">\n            <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n                <span class=\"glyphicon glyphicon-level-up\"></span> ...\n            </a>\n            <a href=\"#\" *ngFor=\"#document of folder.items\" class=\"list-group-item clearfix\">\n                \n                <!-- folder actions -->\n                <div *ngIf=\"document.isFolder && folderActions.length > 0\" class=\"btn-group pull-right\">\n                    <button type=\"button\" class=\"btn btn-default\"\n                            *ngFor=\"#qfa of quickFolderActions\" (click)=\"executeContentAction(document, qfa)\">\n                        <span *ngIf=\"qfa.icon\" class=\"{{qfa.icon}}\"></span>\n                        <span *ngIf=\"qfa.title\">{{qfa.title}}</span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n                          aria-haspopup=\"true\" aria-expanded=\"false\">\n                        Actions <span class=\"caret\"></span>\n                    </button>\n                    <ul class=\"dropdown-menu\">\n                        <li *ngFor=\"#folderAction of folderActions\">\n                            <a href=\"#\" (click)=\"executeContentAction(document, folderAction)\">{{folderAction.title}}</a>\n                        </li>\n                    </ul>\n                </div>\n                \n                <!-- document actions -->\n                <div *ngIf=\"!document.isFolder\" class=\"btn-group pull-right\">\n                    <button type=\"button\" class=\"btn btn-default\"\n                            *ngFor=\"#qda of quickDocumentActions\" (click)=\"executeContentAction(document, qda)\">\n                        <span *ngIf=\"qda.icon\" class=\"{{qda.icon}}\"></span>\n                        <span *ngIf=\"qda.title\">{{qda.title}}</span>\n                    </button>\n                    <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" \n                          aria-haspopup=\"true\" aria-expanded=\"false\">\n                        Actions <span class=\"caret\"></span>\n                    </button>\n                    <ul class=\"dropdown-menu\">\n                        <li>\n                            <a *ngIf=\"downloads && !document.isFolder\" \n                                href=\"{{getContentUrl(document)}}\" \n                                download target=\"_blank\">\n                                Download\n                            </a>\n                        </li>\n                        <li *ngIf=\"documentActions.length > 0\" role=\"separator\" class=\"divider\"></li>\n                        <li *ngFor=\"#documentAction of documentActions\">\n                            <a href=\"#\" (click)=\"executeContentAction(document, documentAction)\">{{documentAction.title}}</a>\n                        </li>\n                    </ul>\n                </div>\n                \n                <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass || 'glyphicon glyphicon-folder-close'}}\"\n                    (click)=\"onItemClick(document, $event)\">\n                </i>\n                <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\"\n                    alt=\"\"\n                    src=\"{{getDocumentThumbnailUrl(document)}}\"\n                    (click)=\"onItemClick(document, $event)\">\n                <h1 class=\"list-group-item-heading document-header\" (click)=\"onItemClick(document, $event)\" >\n                    {{document.displayName}}\n                </h1>\n                <p class=\"list-group-item-text\">{{document.description}}</p>\n                <small>\n                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n                </small>\n            </a>\n        </div>\n    ",
+                        template: "\n        <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n            <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n                <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n                <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n            </li>\n        </ol>\n        <table *ngIf=\"folder\" class=\"mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width\">\n            <thead>\n                <tr>\n                    <!-- Thumbnails -->\n                    <th *ngIf=\"thumbnails\"></th>\n                    <!-- Name -->\n                    <th class=\"mdl-data-table__cell--non-numeric full-width\">Name</th>\n                    <!-- Actions -->\n                    <th></th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr class=\"parent-folder-link\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\">\n                    <td colspan=\"3\">\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                (click)=\"onNavigateParentClick($event)\">\n                            <i class=\"material-icons\">arrow_upward</i>\n                        </button>\n                    </td>\n                </tr>\n                \n                <tr *ngFor=\"#content of folder.items; #idx = index\">\n                    <!-- Thumbnails: folder -->\n                    <td *ngIf=\"thumbnails && content.isFolder\">\n                        <i class=\"material-icons folder-thumbnail\" \n                            (click)=\"onItemClick(content, $event)\">{{folderIcon || 'folder_open'}}</i>\n                    </td>\n                    \n                     <!-- Thumbnails: document -->\n                    <td *ngIf=\"thumbnails && !content.isFolder\">\n                        <img *ngIf=\"thumbnails\" class=\"document-thumbnail\"\n                             alt=\"\"\n                             src=\"{{getDocumentThumbnailUrl(content)}}\"\n                             (click)=\"onItemClick(content, $event)\">\n                    </td>\n                    \n                    <!-- Name: folder -->\n                    <td *ngIf=\"content.isFolder\" class=\"mdl-data-table__cell--non-numeric folder-header-cell\" \n                        (click)=\"onItemClick(content, $event)\">\n                        <span class=\"content-header\">\n                            {{content.displayName}}\n                        </span>\n                    </td>\n                    \n                    <!-- Name: document -->\n                    <td *ngIf=\"!content.isFolder\" class=\"mdl-data-table__cell--non-numeric\" >\n                        <span class=\"content-header\" (click)=\"onItemClick(content, $event)\">\n                            {{content.displayName}}\n                        </span>\n                    </td>\n                    \n                    \n                    <!-- Actions: Folder cell template -->\n                    <td *ngIf=\"content.isFolder\">\n                        <!-- quick action buttons -->\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                *ngFor=\"#action of quickFolderActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                            <i class=\"material-icons\">{{action.icon}}</i>\n                        </button>\n                        \n                        <!-- action menu -->\n                        <button [id]=\"'folder_action_menu_' + idx\" class=\"mdl-button mdl-js-button mdl-button--icon\">\n                            <i class=\"material-icons\">more_vert</i>\n                        </button>\n                        <ul class=\"mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect\"\n                            [attr.for]=\"'folder_action_menu_' + idx\">\n                            <li class=\"mdl-menu__item\"\n                                *ngFor=\"#action of folderActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                                {{action.title}}\n                            </li>\n                        </ul>\n                    </td>\n                    <!-- Actions: Document cell template -->\n                    <td *ngIf=\"!content.isFolder\">\n                        <!-- quick action buttons -->\n                        <button class=\"mdl-button mdl-js-button mdl-button--icon\"\n                                *ngFor=\"#action of quickDocumentActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                            <i class=\"material-icons\">{{action.icon}}</i>\n                        </button>\n                        \n                        <!-- action menu -->\n                        <button [id]=\"'document_action_menu_' + idx\" class=\"mdl-button mdl-js-button mdl-button--icon\">\n                            <i class=\"material-icons\">more_vert</i>\n                        </button>\n                        <ul class=\"mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect\"\n                            [attr.for]=\"'document_action_menu_' + idx\">\n                            <li class=\"mdl-menu__item\"\n                                *ngFor=\"#action of documentActions\"\n                                (click)=\"executeContentAction(content, action)\">\n                                {{action.title}}\n                            </li>\n                        </ul>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    ",
                         providers: [alfresco_service_1.AlfrescoService]
                     }), 
                     __metadata('design:paramtypes', [alfresco_service_1.AlfrescoService])
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
index c4693a2031..acd91b25ca 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.js.map
@@ -1 +1 @@
-{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"document-list.js","sourceRoot":"","sources":["document-list.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
index 970700319b..aaf7146e92 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
@@ -14,19 +14,53 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component, OnInit, Input, Output, EventEmitter} from 'angular2/core';
+
+import {
+    Component,
+    OnInit,
+    Input,
+    Output,
+    EventEmitter,
+    AfterViewChecked
+} from 'angular2/core';
 import {AlfrescoService} from './../services/alfresco.service';
 import {FolderEntity} from './../core/entities/folder.entity';
 import {DocumentEntity} from './../core/entities/document.entity';
 import {ContentActionModel} from './../models/content-action.model';
 
+declare var componentHandler;
+
 @Component({
     selector: 'alfresco-document-list',
     styles: [
         `
-            :host .breadcrumb {
-                margin-bottom: 4px;
+            :host .full-width { width: 100%; }
+            
+            :host .folder-thumbnail {
+                font-size: 48px;
+                cursor: pointer;
             }
+            
+            :host .document-thumbnail {
+                width: 48px;
+                height: 48px;
+                cursor: pointer;
+            }
+            
+            :host .content-header {
+                font-size: 15px;
+            }
+           
+            :host .content-header:hover {
+                text-decoration: underline;
+                cursor: pointer;
+            }
+            
+            :host .parent-folder-link { cursor: pointer; }
+            :host .parent-folder-link > td { text-align: left; }
+            :host .folder-header-cell { cursor: pointer; }
+            
+            :host .breadcrumb { margin-bottom: 4px; }
 
             :host .folder-icon {
                 float: left;
@@ -58,82 +92,114 @@ import {ContentActionModel} from './../models/content-action.model';
                 <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
             </li>
         </ol>
-        <div *ngIf="folder" class="list-group">
-            <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
-                <span class="glyphicon glyphicon-level-up"></span> ...
-            </a>
-            <a href="#" *ngFor="#document of folder.items" class="list-group-item clearfix">
+        <table *ngIf="folder" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+            <thead>
+                <tr>
+                    <!-- Thumbnails -->
+                    <th *ngIf="thumbnails"></th>
+                    <!-- Name -->
+                    <th class="mdl-data-table__cell--non-numeric full-width">Name</th>
+                    <!-- Actions -->
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
+                    <td colspan="3">
+                        <button class="mdl-button mdl-js-button mdl-button--icon"
+                                (click)="onNavigateParentClick($event)">
+                            <i class="material-icons">arrow_upward</i>
+                        </button>
+                    </td>
+                </tr>
                 
-                <!-- folder actions -->
-                <div *ngIf="document.isFolder && folderActions.length > 0" class="btn-group pull-right">
-                    <button type="button" class="btn btn-default"
-                            *ngFor="#qfa of quickFolderActions" (click)="executeContentAction(document, qfa)">
-                        <span *ngIf="qfa.icon" class="{{qfa.icon}}"></span>
-                        <span *ngIf="qfa.title">{{qfa.title}}</span>
-                    </button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
-                          aria-haspopup="true" aria-expanded="false">
-                        Actions <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <li *ngFor="#folderAction of folderActions">
-                            <a href="#" (click)="executeContentAction(document, folderAction)">{{folderAction.title}}</a>
-                        </li>
-                    </ul>
-                </div>
-                
-                <!-- document actions -->
-                <div *ngIf="!document.isFolder" class="btn-group pull-right">
-                    <button type="button" class="btn btn-default"
-                            *ngFor="#qda of quickDocumentActions" (click)="executeContentAction(document, qda)">
-                        <span *ngIf="qda.icon" class="{{qda.icon}}"></span>
-                        <span *ngIf="qda.title">{{qda.title}}</span>
-                    </button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
-                          aria-haspopup="true" aria-expanded="false">
-                        Actions <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <a *ngIf="downloads && !document.isFolder" 
-                                href="{{getContentUrl(document)}}" 
-                                download target="_blank">
-                                Download
-                            </a>
-                        </li>
-                        <li *ngIf="documentActions.length > 0" role="separator" class="divider"></li>
-                        <li *ngFor="#documentAction of documentActions">
-                            <a href="#" (click)="executeContentAction(document, documentAction)">{{documentAction.title}}</a>
-                        </li>
-                    </ul>
-                </div>
-                
-                <i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass || 'glyphicon glyphicon-folder-close'}}"
-                    (click)="onItemClick(document, $event)">
-                </i>
-                <img *ngIf="thumbnails && !document.isFolder" class="file-icon"
-                    alt=""
-                    src="{{getDocumentThumbnailUrl(document)}}"
-                    (click)="onItemClick(document, $event)">
-                <h1 class="list-group-item-heading document-header" (click)="onItemClick(document, $event)" >
-                    {{document.displayName}}
-                </h1>
-                <p class="list-group-item-text">{{document.description}}</p>
-                <small>
-                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}
-                </small>
-            </a>
-        </div>
+                <tr *ngFor="#content of folder.items; #idx = index">
+                    <!-- Thumbnails: folder -->
+                    <td *ngIf="thumbnails && content.isFolder">
+                        <i class="material-icons folder-thumbnail" 
+                            (click)="onItemClick(content, $event)">{{folderIcon || 'folder_open'}}</i>
+                    </td>
+                    
+                     <!-- Thumbnails: document -->
+                    <td *ngIf="thumbnails && !content.isFolder">
+                        <img *ngIf="thumbnails" class="document-thumbnail"
+                             alt=""
+                             src="{{getDocumentThumbnailUrl(content)}}"
+                             (click)="onItemClick(content, $event)">
+                    </td>
+                    
+                    <!-- Name: folder -->
+                    <td *ngIf="content.isFolder" class="mdl-data-table__cell--non-numeric folder-header-cell" 
+                        (click)="onItemClick(content, $event)">
+                        <span class="content-header">
+                            {{content.displayName}}
+                        </span>
+                    </td>
+                    
+                    <!-- Name: document -->
+                    <td *ngIf="!content.isFolder" class="mdl-data-table__cell--non-numeric" >
+                        <span class="content-header" (click)="onItemClick(content, $event)">
+                            {{content.displayName}}
+                        </span>
+                    </td>
+                    
+                    
+                    <!-- Actions: Folder cell template -->
+                    <td *ngIf="content.isFolder">
+                        <!-- quick action buttons -->
+                        <button class="mdl-button mdl-js-button mdl-button--icon"
+                                *ngFor="#action of quickFolderActions"
+                                (click)="executeContentAction(content, action)">
+                            <i class="material-icons">{{action.icon}}</i>
+                        </button>
+                        
+                        <!-- action menu -->
+                        <button [id]="'folder_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+                            <i class="material-icons">more_vert</i>
+                        </button>
+                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                            [attr.for]="'folder_action_menu_' + idx">
+                            <li class="mdl-menu__item"
+                                *ngFor="#action of folderActions"
+                                (click)="executeContentAction(content, action)">
+                                {{action.title}}
+                            </li>
+                        </ul>
+                    </td>
+                    <!-- Actions: Document cell template -->
+                    <td *ngIf="!content.isFolder">
+                        <!-- quick action buttons -->
+                        <button class="mdl-button mdl-js-button mdl-button--icon"
+                                *ngFor="#action of quickDocumentActions"
+                                (click)="executeContentAction(content, action)">
+                            <i class="material-icons">{{action.icon}}</i>
+                        </button>
+                        
+                        <!-- action menu -->
+                        <button [id]="'document_action_menu_' + idx" class="mdl-button mdl-js-button mdl-button--icon">
+                            <i class="material-icons">more_vert</i>
+                        </button>
+                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+                            [attr.for]="'document_action_menu_' + idx">
+                            <li class="mdl-menu__item"
+                                *ngFor="#action of documentActions"
+                                (click)="executeContentAction(content, action)">
+                                {{action.title}}
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     `,
     providers: [AlfrescoService]
 })
-export class DocumentList implements OnInit {
+export class DocumentList implements OnInit, AfterViewChecked {
 
     @Input() navigate: boolean = true;
     @Input() breadcrumb: boolean = false;
-    @Input('folder-icon') folderIconClass: string;
+    @Input('folder-icon') folderIcon: string;
     @Input() thumbnails: boolean = true;
-    @Input() downloads: boolean = true;
 
     @Output() itemClick: EventEmitter<any> = new EventEmitter();
 
@@ -167,6 +233,13 @@ export class DocumentList implements OnInit {
         this.displayFolderContent(this.rootFolder.path);
     }
 
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
     onNavigateParentClick($event) {
         if ($event) {
             $event.preventDefault();