Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add expand/close and double click #21

@@ -10,7 +10,7 @@
-->

<div>
<img src="../../../assets/explorer-uparrow.png" (click)="levelUp()" style="width: 20px; height: 20px; filter: brightness(3);">
<img src="../../../assets/explorer-uparrow.png" (click)="levelUp()" style="width: 20px; height: 20px; filter: brightness(3); cursor: pointer;">
<!-- <svg width="14" height="16" viewBox="0 0 14 16" fill-rule="evenodd" (click)="levelUp()"><path d="M6 3.4V16h2V3.4l4.7 4.9L14 7 7 0 0 7l1.3 1.3z"></path></svg> -->
<div class="filebrowsermvs-search">
<input [(ngModel)]="path" placeholder="Enter a dataset..." class="filebrowsermvs-search-input" (change)="updateTree();">
@@ -10,14 +10,15 @@
-->

<div style="height: 100%;">
<img src="../../../assets/explorer-uparrow.png" (click)="levelUp()" style="width: 20px; height: 20px; filter: brightness(3);">
<img src="../../../assets/explorer-uparrow.png" (click)="levelUp()" style="width: 20px; height: 20px; filter: brightness(3); cursor: pointer;">
<!-- <svg width="14" height="16" viewBox="0 0 14 16" fill-rule="evenodd" (click)="levelUp()"><path d="M6 3.4V16h2V3.4l4.7 4.9L14 7 7 0 0 7l1.3 1.3z"></path></svg> -->
<div class="filebrowseruss-search">
<input [(ngModel)]="path" placeholder="Enter a directory..." class="filebrowseruss-search-input" (change)="displayTree(path, false)" [disabled]="isLoading">
</div>
<div class="fa fa-spinner fa-spin" [hidden]="!isLoading"></div>
<div (click)="onClick($event);" [hidden]="hideExplorer" style="height: 100%;">
<tree-root [treeData]="data" (clickEvent)="onNodeClick($event)" [style]="style"
<tree-root [treeData]="data" (clickEvent)="onNodeClick($event)"
(dblClickEvent)="onNodeDblClick($event)" [style]="style"
(contextmenu)="$event.preventDefault(); onRightClick($event);"
></tree-root>
</div>
@@ -205,6 +205,10 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
}
}

onNodeDblClick($event: any): void {
let updateTree = false; this.displayTree($event.node.path, updateTree);
}

onRightClick($event: any): void {
this.rtClickDisplay = !this.rtClickDisplay;
this.popUpMenuX = $event.clientX;
@@ -347,9 +351,13 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse

//Adds children to the existing this.data TreeNode array to update tree
addChild(path: string, $event: any): void {
if (this.selectedFile !== undefined && this.selectedFile.label == $event.node.label && this.selectedFile.children == $event.node.children)
if ($event.node.children && $event.node.children.length > 0)
{
let updateTree = false; this.displayTree(path, updateTree);
//let updateTree = false; this.displayTree(path, updateTree);
if ($event.node.expanded)
$event.node.expanded = false;
else
$event.node.expanded = true;
}
else
{
@@ -53,6 +53,7 @@
.ui-treenode {
width: fit-content;
padding: 1px;
cursor: pointer;
}

.ui-treenode-label {
@@ -27,6 +27,7 @@
selectionMode="single"
[(selection)]="selectedNode"
(onNodeSelect)="nodeSelect($event)"
[ngStyle]="style"
>
<!-- add [filter]="true" with latest prime version (new feature March 2019) -->
</p-tree>
@@ -40,8 +40,12 @@ export class TreeComponent {
@Input() treeData: TreeNode;
@Input() style: any;
@Output() clickEvent = new EventEmitter<childEvent>();
@Output() dblClickEvent = new EventEmitter<MouseEvent>();
selectedNode: FileNode;
constructor() {}
lastClickedNodeName: string; // PrimeNG as of 6.0 has no native double click support for its tree
constructor() {
this.lastClickedNodeName = null;
}

/**
* [nodeSelect provides the child folder click event to the parent file/folder tree tab]
@@ -50,9 +54,15 @@ export class TreeComponent {
*/
nodeSelect(_event?: any) {
if (_event){
this.clickEvent.emit(_event);
if (this.lastClickedNodeName == null || this.lastClickedNodeName != _event.node.name) {
this.lastClickedNodeName = _event.node.name;
this.clickEvent.emit(_event);
setTimeout( () => (this.lastClickedNodeName = null), 500); // < 500 ms becomes a double click
This conversation was marked as resolved by DivergentEuropeans

This comment has been minimized.

Copy link
@1000TurquoisePogs

1000TurquoisePogs Jul 15, 2019

Member

500ms should not be hardcoded here. But, it is OK for it to be a constant or variable with a default value, found at the top of the file. Because, in the future we will want to know the reason, and be able to customize it perhaps.

} else {
this.dblClickEvent.emit(_event);
}
}
}

/**
* Lazy loading
@@ -53,6 +53,7 @@
width: 100%;
height: 35px;
background-color: #464646;
cursor: pointer;
}

.fileexplorer-tabs-text {
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.