#124 double click navigation, 'preview' event

demo-shell-ng2/app/components/files/files.component.html

@@ -7,7 +7,7 @@
             #documentList
             [currentFolderPath]="absolutePath"
             [breadcrumb]="breadcrumb"
-            (itemClick)="showFile($event)"
+            (preview)="showFile($event)"
             (folderChange)="onFolderChanged($event)">
         <!--
         <empty-folder-content>

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.css

@@ -19,6 +19,8 @@
     cursor: pointer;
 }
 
+/* Utils */
+
 :host .non-selectable {
     user-select: none;
     -webkit-user-select: none;   /* Chrome/Safari/Opera */
@@ -27,8 +29,6 @@
     -webkit-touch-callout: none; /* iOS Safari */
 }
 
-/* Utils */
-
 :host .sr-only {
     position: absolute;
     width: 1px;

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html

@@ -40,7 +40,7 @@
             </label>
         </td>
         <td *ngFor="#col of data.getColumns()" [ngSwitch]="col.type"
-            class="mdl-data-table__cell--non-numeric data-cell non-selectable {{col.cssClass}}"
+            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
             <div *ngSwitchWhen="'image'">
                 <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>

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

@@ -3,7 +3,7 @@
 :host .thumbnail {
     width: 48px;
     height: 48px;
-    cursor: pointer;
+    cursor: default;
 }
 
 :host .column-header {
@@ -15,24 +15,17 @@
     -webkit-touch-callout: none; /* iOS Safari */
 }
 
-:host .parent-folder-link { cursor: pointer; }
+:host .parent-folder-link { cursor: default; }
 :host .parent-folder-link > td { text-align: left; }
 
-:host .folder-row-cell,
+:host .data-cell {
-:host .document-row-cell {
+    cursor: default;
-    cursor: pointer;
 }
-
 :host .cell-value {}
 
-:host .folder-row-cell.name-column,
+:host .data-cell.name-column {
-:host .document-row-cell.name-column {
     font-size: 15px;
-}
+    cursor: default;
-
-:host .folder-row-cell.name-column:hover,
-:host .document-row-cell.name-column:hover {
-    cursor: pointer;
 }
 
 /* breadcrumb */
@@ -71,6 +64,14 @@
 
 /* Utils */
 
+:host .non-selectable {
+    user-select: none;
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* IE/Edge */
+    -webkit-touch-callout: none; /* iOS Safari */
+}
+
 :host .sr-only {
     position: absolute;
     width: 1px;

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

@@ -8,7 +8,7 @@
     <thead>
     <tr>
         <!-- Columns -->
-        <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
+        <th class="mdl-data-table__cell--non-numeric non-selectable {{col.cssClass}}"
             *ngFor="#col of columns"
             [class.column-header]="col.title"
             [attr.data-automation-id]="'auto_id_' + col.source"
@@ -25,8 +25,12 @@
     </tr>
     </thead>
     <tbody>
-    <tr data-automation-id="folder_up_row" class="parent-folder-link" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)">
+    <tr *ngIf="canNavigateParent()"
-        <td [attr.colspan]="1 + columns?.length">
+        data-automation-id="folder_up_row"
+        class="parent-folder-link"
+        (click)="onNavigateParentClick($event)"
+        (dblclick)="onNavigateParentDblClick($event)">
+        <td [attr.colspan]="1 + columns?.length" class="non-selectable">
             <button class="mdl-button mdl-js-button mdl-button--icon">
                 <i data-automation-id="folder_up_icon" class="material-icons">arrow_upward</i>
             </button>
@@ -37,8 +41,9 @@
         [attr.data-automation-id]="getObjectValue(content.entry, 'name')">
         <!-- Columns -->
         <td *ngFor="#col of columns" [ngSwitch]="col.type"
-            class="mdl-data-table__cell--non-numeric {{content.entry.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
+            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onItemClick(content, $event)"
+            (dblclick)="onItemDblClick(content, $event)"
             [attr.data-automation-id]="col.source === '$thumbnail' ? '$thumbnail' : col.source + '_' + getObjectValue(content.entry, col.source)">
             <div *ngSwitchWhen="'image'" class="cell-value">
                 <img class="thumbnail" [src]="getCellValue(content, col)">

ng2-components/ng2-alfresco-documentlist/src/components/document-list.spec.ts

@@ -251,6 +251,7 @@ describe('DocumentList', () => {
         spyOn(documentList, 'getNodePath').and.returnValue(path);
         spyOn(documentList, 'displayFolderContent').and.stub();
 
+        documentList.navigationMode = 'click';
         documentList.onItemClick(node);
 
         expect(documentList.displayFolderContent).toHaveBeenCalledWith(path);

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

@@ -52,6 +52,9 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
     @Input()
     navigate: boolean = true;
 
+    @Input('navigation-mode')
+    navigationMode: string = 'dblclick'; // click|dblclick
+
     @Input()
     breadcrumb: boolean = false;
 
@@ -64,9 +67,15 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
     @Output()
     itemClick: EventEmitter<any> = new EventEmitter();
 
+    @Output()
+    itemDblClick: EventEmitter<any> = new EventEmitter();
+
     @Output()
     folderChange: EventEmitter<any> = new EventEmitter();
 
+    @Output()
+    preview: EventEmitter<any> = new EventEmitter();
+
     rootFolder = {
         name: '',
         path: ''
@@ -169,17 +178,23 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
      * Invoked when 'parent folder' element is clicked.
      * @param e DOM event
      */
-    onNavigateParentClick(e) {
+    onNavigateParentClick(e?: Event) {
         if (e) {
             e.preventDefault();
         }
 
-        if (this.navigate) {
+        if (this.navigate && this.navigationMode === 'click') {
-            this.route.pop();
+            this.navigateToParent();
-            let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
+        }
-            if (parent) {
+    }
-                this.displayFolderContent(parent.path);
+
-            }
+    onNavigateParentDblClick(e?: Event) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        if (this.navigate && this.navigationMode === 'dblclick') {
+            this.navigateToParent();
         }
     }
 
@@ -188,7 +203,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
      * @param item Underlying node item
      * @param e DOM event (optional)
      */
-    onItemClick(item: MinimalNodeEntity, e = null) {
+    onItemClick(item: MinimalNodeEntity, e?: Event) {
         if (e) {
             e.preventDefault();
         }
@@ -197,18 +212,64 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
             value: item
         });
 
-        if (this.navigate && item && item.entry) {
+        if (this.navigate && this.navigationMode === 'click') {
-            if (item.entry.isFolder) {
+            if (item && item.entry) {
-                let path = this.getNodePath(item);
+                if (item.entry.isFile) {
-                this.route.push({
+                    this.preview.emit({
-                    name: item.entry.name,
+                        value: item
-                    path: path
+                    });
-                });
+                }
-                this.displayFolderContent(path);
+
+                if (item.entry.isFolder) {
+                    this.performNavigation(item);
+                }
             }
         }
     }
 
+    onItemDblClick(item: MinimalNodeEntity, e?: Event) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        this.itemDblClick.emit({
+            value: item
+        });
+
+        if (this.navigate && this.navigationMode === 'dblclick') {
+            if (item && item.entry) {
+                if (item.entry.isFile) {
+                    this.preview.emit({
+                        value: item
+                    });
+                }
+
+                if (item.entry.isFolder) {
+                    this.performNavigation(item);
+                }
+            }
+        }
+    }
+
+    private performNavigation(node: MinimalNodeEntity) {
+        if (node && node.entry && node.entry.isFolder) {
+            let path = this.getNodePath(node);
+            this.route.push({
+                name: node.entry.name,
+                path: path
+            });
+            this.displayFolderContent(path);
+        }
+    }
+
+    navigateToParent() {
+        this.route.pop();
+        let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
+        if (parent) {
+            this.displayFolderContent(parent.path);
+        }
+    }
+
     /**
      * Invoked when a breadcrumb route is clicked.
      * @param r Route to navigate to