From 0bd2708d9513e1ee8b53b06bbb29cd92b2fe0b99 Mon Sep 17 00:00:00 2001
From: chinonso098 <chinonsoakolam@outlook.com>
Date: Mon, 16 Sep 2024 22:33:30 -0400
Subject: [PATCH] expand tree view hide/show fade added

---
 .../filetreeview/filetreeview.component.html  |  2 +-
 .../filetreeview/filetreeview.component.ts    | 27 ++++++++++++++-----
 .../fileexplorer/fileexplorer.component.html  |  4 +--
 .../fileexplorer/fileexplorer.component.ts    |  5 ++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
index ca7ec89..ec8c4cc 100644
--- 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
index d6f7d06..fc88cd3 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.ts
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -1,4 +1,4 @@
-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({
@@ -6,10 +6,11 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
   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
index babf03b..23af929 100644
--- 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
index 064b78f..7358815 100644
--- 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();