Skip to content

Commit

Permalink
filetreeview wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 19, 2024
1 parent 3c0844f commit 743a6b3
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/app/shared/system-component/filetreeview/filetreeview.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.li-file-tree-view0{
margin:0;
padding:0 0 0 0px; /* Each nested li will be padded incrementally */
padding:0 0 0 0; /* Each nested li will be padded incrementally */
}

.li-file-tree-view{
Expand Down
15 changes: 9 additions & 6 deletions src/app/shared/system-component/filetreeview/filetreeview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
</svg> -->

<ul class="ul-file-tree-view" id="fileExplrTreeView">
<li class="li-file-tree-view0" id="li-{{pid}}-{{level}}" (click)="onBtnClick('li-'+pid+'-'+level)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level)">
<li class="li-file-tree-view0" id="li-{{pid}}-{{level}}">
<ng-container *ngIf="showRoot">
<div class="tree-view-cntnr" id="fileExplrTreeView-{{pid}}-{{level}}" (click)="navigateToSelectedPath('This-PC','This-PC')">
<div class="tree-view-cntnr" id="fileExplrTreeView-{{pid}}-{{level}}" (click)="navigateToSelectedPath('This-PC','This-PC')"
(click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level)">
<div class="span fxtreeview-head">
<figure class="fxtreeview-figure">
<div class="fxtreeview-img" >
Expand All @@ -25,8 +26,9 @@

<ul class="ul-file-tree-view ">
<ng-container *ngFor="let node of treeData; let i = index">
<li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}" (click)="onBtnClick('li-'+pid+'-'+level+'-'+i)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level+'-'+i)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level+'-'+i)">
<div class="tree-view-cntnr" *ngIf="node.isFolder" id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)">
<li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}">
<div class="tree-view-cntnr" *ngIf="node.isFolder" id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)"
(click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level+'-'+i)">
<div class="span fxtreeview-head">
<figure class="fxtreeview-figure">
<div class="fxtreeview-img" >
Expand All @@ -53,8 +55,9 @@
<ng-container *ngIf="node.children && node.children.length">
<ul class="ul-file-tree-view">
<ng-container *ngFor="let child of node.children; let j = index">
<li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="onBtnClick('li-'+pid+'-'+level+'-'+i+'-'+j)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level+'-'+i+'-'+j)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level+'-'+i+'-'+j)">
<div class="tree-view-cntnr" *ngIf="child.isFolder" id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="navigateToSelectedPath(child.name, child.path)">
<li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}-{{j}}">
<div class="tree-view-cntnr" *ngIf="child.isFolder" id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="navigateToSelectedPath(child.name, child.path)"
(click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)">
<div class="span fxtreeview-head">
<figure class="fxtreeview-figure">
<div class="fxtreeview-img" >
Expand Down
64 changes: 32 additions & 32 deletions src/app/shared/system-component/filetreeview/filetreeview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export class FileTreeViewComponent implements OnInit, OnChanges {

chevronBtnStyle:Record<string, unknown> = {};
expandedViews:string[]= [];
selectedElementId = 0;
selectedElementId = '';
processId = 0;
nextLevel = 0;

Expand Down Expand Up @@ -113,7 +113,6 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}
}


showGreatGrandChildren( path:string, id:number, id1:number):void{

const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}-${id1}`;
Expand Down Expand Up @@ -241,56 +240,57 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

onBtnClick(elmntId:string):void{
this.selectedElementId = elmntId
//this.setBtnStyle(id, true);
}

onMouseEnter(elmntId:string):void{
console.log('onMouseEnter-elmntId:',elmntId);
//this.setBtnStyle(id, true);
this.setBtnStyle(elmntId, true);
}

onMouseLeave(elmntId:string):void{
console.log('onMouseLeave-elmntId:',elmntId);
// if(id != this.selectedElementId){
// this.removeBtnStyle(id);
// }
// else if((id == this.selectedElementId) && this.isIconInFocusDueToPriorAction){
// this.setBtnStyle(id,false);
// }
if(elmntId != this.selectedElementId){
this.removeBtnStyle(elmntId);
}
else if((elmntId == this.selectedElementId)){
this.setBtnStyle(elmntId,false);
}
}

setBtnStyle(id:number, isMouseHover:boolean):void{
setBtnStyle(elmntId:string, isMouseHover:boolean):void{

// const btnElement = document.getElementById(`btnElmnt-${this.processId}-${id}`) as HTMLElement;
// if(btnElement){
// btnElement.style.backgroundColor = '#4c4c4c';
// btnElement.style.border = '1px solid #3c3c3c';
const btnElement = document.getElementById(elmntId) as HTMLElement;
if(btnElement){
btnElement.style.backgroundColor = '#4c4c4c';
// btnElement.style.border = '1px solid #3c3c3c';

// if(this.selectedElementId == id){
if(this.selectedElementId == elmntId){

// if(isMouseHover && this.isIconInFocusDueToCurrentAction){
// btnElement.style.backgroundColor ='#787474'
// }
if(isMouseHover){
btnElement.style.backgroundColor ='#787474'
}

// if(!isMouseHover && this.isIconInFocusDueToCurrentAction){
// btnElement.style.backgroundColor ='#787474'
// }
// if(!isMouseHover && this.isIconInFocusDueToCurrentAction){
// btnElement.style.backgroundColor ='#787474'
// }

// if(isMouseHover && this.isIconInFocusDueToPriorAction){
// btnElement.style.backgroundColor = '#4c4c4c';
// }
if(isMouseHover ){
btnElement.style.backgroundColor = '#4c4c4c';
}

// if(!isMouseHover && this.isIconInFocusDueToPriorAction){
// btnElement.style.backgroundColor = 'transparent';
// btnElement.style.border = '0.5px solid white'
// }
// }
// }
// if(!isMouseHover && this.isIconInFocusDueToPriorAction){
// btnElement.style.backgroundColor = 'transparent';
// btnElement.style.border = '0.5px solid white'
// }
}
}

}

removeBtnStyle(id:number):void{
const btnElement = document.getElementById(`btnElmnt-${this.processId}-${id}`) as HTMLElement;
removeBtnStyle(elmntId:string):void{
const btnElement = document.getElementById(elmntId) as HTMLElement;
if(btnElement){
btnElement.style.backgroundColor = 'transparent';
btnElement.style.border = 'none'
Expand Down
7 changes: 4 additions & 3 deletions src/app/system-apps/fileexplorer/fileexplorer.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -731,9 +731,10 @@ span.mid-search-entry{
/*****************************navigation pane view Started*****************************/

.navigation-content-container{
min-width: 150px;
background-color: #191919;
/* background-color: whitef; */
min-width: 160px;
background-color: #191919;
overflow-y: auto;
height: 350px;
}


Expand Down
4 changes: 2 additions & 2 deletions src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,13 +225,13 @@
<div class="header-empty-line-container2"></div>
<div class="fileexp-main-container" #fileExplorerMainContainer>
<div class="fileexp-content-container">
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="showExpandTreeIconBtn()" #navExplorerContainer>
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="hideExpandTreeIconBtn()" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode" (updateFileTreeData)="updateFileTreeAsync($event)" (navigateToPath)="navigateToFolder($event)" ></cos-filetreeview>
</div>
<div class="file-content-container" #fileExplorerContentContainer>

<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->

<!-- ngDraggable [inBounds]="true" zIndex="1" [preventDefaultEvent]="true"
(stopped)="onDragEnd($event)" (started)="onDragStart($event)" -->

Expand Down
26 changes: 21 additions & 5 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
prevPathEntries:string[] = [];
nextPathEntries:string[] = [];
recentPathEntries:string[] = [];
upPathEntries:string[] = ['/Desktop'];
upPathEntries:string[] = ['/Users/Desktop'];
_directoryHops:string[] = ['This PC'];
fileTreeHistory:string[] = [];
SECONDS_DELAY:number[] = [100, 1500, 6000, 12000, 250];
Expand Down Expand Up @@ -652,7 +652,11 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}

showExpandTreeIconBtn():void{
this.showExpandTreeIcon = !this.showExpandTreeIcon;
this.showExpandTreeIcon = true;
}

hideExpandTreeIconBtn():void{
this.showExpandTreeIcon = false;
}
onDragOver(event:DragEvent):void{
event.stopPropagation();
Expand Down Expand Up @@ -876,9 +880,13 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
if(directory === `/Users/${fileName}`){
this.navPathIcon = `osdrive/Cheetah/System/Imageres/${fileName.toLocaleLowerCase()}_folder_small.png`;
}
else if((fileName === 'fileexplorer' && directory === '/') || fileName === '' && directory === '/'){
else if((fileName === 'OSDisk (C:)' && directory === '/')){
this.navPathIcon = 'osdrive/Cheetah/System/Imageres/os_disk.png';
}
else if((fileName === 'fileexplorer' && directory === '/') || (fileName === '' && directory === '/')){
this.navPathIcon = 'osdrive/Cheetah/System/Imageres/this_pc.png';
}else{
}
else{
this.navPathIcon = 'osdrive/Cheetah/System/Imageres/folder_folder_small.png';
}
}
Expand Down Expand Up @@ -1478,7 +1486,15 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
populateHopsList():void{
const tmpArray = this.directory.split('/');
tmpArray.shift();
this._directoryHops = tmpArray;
tmpArray.unshift('This PC');

if(this.directory.includes('/Users')){
this._directoryHops = tmpArray;
}else{
tmpArray[1] = 'OSDisk (C:)';
this._directoryHops = tmpArray;
}

console.log('this._directoryHops:', this._directoryHops);
}

Expand Down

0 comments on commit 743a6b3

Please sign in to comment.