External css and html for document list

refs #9

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -0,0 +1,105 @@
+<ol *ngIf="breadcrumb" class="breadcrumb">
+    <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
+        <span *ngSwitchWhen="true">{{r.name}}</span>
+        <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
+    </li>
+</ol>
+<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>
+
+    <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>