inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

#124 double click navigation, 'preview' event

Browse Source
This commit is contained in:
Denys Vuika 2016-06-08 14:49:47 +01:00
parent 7d1911b189
commit 4dd1073f70
7 changed files with 105 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.css
View File

@ -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;

2
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
View File

@ -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>

27
ng2-components/ng2-alfresco-documentlist/src/components/document-list.css
View File

@ -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 .document-row-cell {
cursor: pointer;
:host .data-cell {
cursor: default;
}
:host .cell-value {}
:host .folder-row-cell.name-column,
:host .document-row-cell.name-column {
:host .data-cell.name-column {
font-size: 15px;
}
:host .folder-row-cell.name-column:hover,
:host .document-row-cell.name-column:hover {
cursor: pointer;
cursor: default;
}
/* 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;

13
ng2-components/ng2-alfresco-documentlist/src/components/document-list.html
View File

@ -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)">
<td [attr.colspan]="1 + columns?.length">
<tr *ngIf="canNavigateParent()"
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)">

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

@ -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);

93
ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts
View File

@ -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) {
this.route.pop();
let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
if (parent) {
this.displayFolderContent(parent.path);
}
if (this.navigate && this.navigationMode === 'click') {
this.navigateToParent();
}
}
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 (item.entry.isFolder) {
let path = this.getNodePath(item);
this.route.push({
name: item.entry.name,
path: path
});
this.displayFolderContent(path);
if (this.navigate && this.navigationMode === 'click') {
if (item && item.entry) {
if (item.entry.isFile) {
this.preview.emit({
value: item
});
}
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