expand tree view hide/show fade added

chinonso098 · Sep 17, 2024 · 0bd2708 · 0bd2708
1 parent a4d8269
commit 0bd2708
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -39,7 +39,7 @@
                                 </div>
                             </figure>
                         </div>
-                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name.toLowerCase() === 'downloads' ? 'osdrive/icons/downloads1.png' :  
+                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name.toLowerCase() === 'downloads' ? 'osdrive/icons/downloads_folder.png' :  
                                                                                                                                  node.name.toLowerCase() === 'music'? 'osdrive/icons/music.png': 
                                                                                                                                  node.name.toLowerCase() === 'icons'? 'osdrive/icons/folder.ico' :'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/></figure></div>
                         <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p">{{node.name}}</p></div>

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -1,15 +1,16 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, OnChanges } from '@angular/core';
 import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 
 @Component({
   selector: 'cos-filetreeview',
   templateUrl: './filetreeview.component.html',
   styleUrl: './filetreeview.component.css'
 })
-export class FileTreeViewComponent implements OnInit {
+export class FileTreeViewComponent implements OnInit, OnChanges {
   @Input() treeData: FileTreeNode[] = [];
   @Input() pid = 0;
   @Input() showRoot = true;
+  @Input() isHoverActive = false;
   @Output() updateFileTreeData = new EventEmitter<string>();
 
   chevronBtnStyle:Record<string, unknown> = {};
@@ -20,7 +21,13 @@ export class FileTreeViewComponent implements OnInit {
   }
 
   ngOnInit():void{
-    this.setcolorChevron();
+    this.setcolorChevron(this.isHoverActive);
+  }
+
+
+  ngOnChanges():void{
+    //console.log('FILETREE onCHANGES:',this.isHoverActive);
+    this.setcolorChevron(this.isHoverActive);
   }
 
   showChildren(name?:string):void{
@@ -171,9 +178,17 @@ export class FileTreeViewComponent implements OnInit {
   }
 
 
-  setcolorChevron():void{
-    this.chevronBtnStyle ={
-       'fill': '#ccc'
+  setcolorChevron(isHoverActive:boolean):void{
+    if(!isHoverActive){
+      this.chevronBtnStyle ={
+        'fill': '#191919',
+        'transition': 'fill 0.75s ease'
+     }
+    }else{
+      this.chevronBtnStyle ={
+        'fill': '#ccc',
+        'transition': 'fill 0.5s ease'
+     }
     }
   }
 

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -225,9 +225,9 @@
         <div class="header-empty-line-container2"></div>
         <div class="fileexp-main-container" #fileExplorerMainContainer>
             <div class="fileexp-content-container">
-                <div class="navigation-content-container"  #navExplorerContainer>
+                <div class="navigation-content-container"  (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="showExpandTreeIconBtn()" #navExplorerContainer>
                     <div style="height: 10px; width: 100%;"></div>
-                    <cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"  (updateFileTreeData)="updateFileTreeAsync($event)"></cos-filetreeview>
+                    <cos-filetreeview [treeData]="fileTreeNode" [pid] ="processId" [isHoverActive]="showExpandTreeIcon"  (updateFileTreeData)="updateFileTreeAsync($event)"></cos-filetreeview>
                 </div>
                 <div class="file-content-container" #fileExplorerContentContainer>
                 <!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -143,6 +143,8 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   isSortBySize = false;
   isSortByDateModified = false;
 
+  showExpandTreeIcon = false;
+
   renameForm!: FormGroup;
   pathForm!: FormGroup;
   searchForm!: FormGroup;
@@ -649,6 +651,9 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
     }
   }
 
+  showExpandTreeIconBtn():void{
+    this.showExpandTreeIcon = !this.showExpandTreeIcon;
+  }
   onDragOver(event:DragEvent):void{
     event.stopPropagation();
     event.preventDefault();