hightlight tree icons work better

chinonso098 · Sep 13, 2024 · 239ba47 · 239ba47
1 parent 5b5e957
commit 239ba47
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 41 deletions.
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -24,11 +24,11 @@
         <ul class="ul-file-tree-view nested">
             <ng-container *ngFor="let node of treeData; let i = index">
                 <li class="li-file-tree-view"> 
-                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showChildren(i)">
+                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showCurrentSelection()">
                         <div class="span fxtreeview-head"> 
                             <figure class="fxtreeview-figure">  
                                 <div class="fxtreeview-img" >
-                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
+                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGrandChildren(i)" (mouseenter)="colorChevron(i)" (mouseleave)="unColorChevron(i)" [style]="chevronBtnStyle"
                                         height="10" width="10" 
                                         viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}-{{i}}">
                                         <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
@@ -46,11 +46,11 @@
                         <ul class="ul-file-tree-view nested">
                             <ng-container *ngFor="let child of node.children; let j = index">
                                 <li class="li-file-tree-view"> 
-                                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showChildren(i,j)">
+                                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showCurrentSelection()">
                                         <div class="span fxtreeview-head"> 
                                             <figure class="fxtreeview-figure">  
                                                 <div class="fxtreeview-img" >
-                                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
+                                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGreatGrandChildren(i, j)" (mouseenter)="colorChevron(i,j)" (mouseleave)="unColorChevron(i,j)" [style]="chevronBtnStyle"
                                                         height="10" width="10" 
                                                         viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}-{{i}}-{{j}}">
                                                         <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
@@ -73,31 +73,4 @@
             </ng-container>
         </ul> 
     </li>
-</ul>
-
-
-<!--
-<ul id="myUL">
-    <li><span class="caret">This PC</span>
-        <ul class="nested">
-        <li>Water</li>
-        <li>Coffee</li>
-        <li><span class="caret">Tea</span>
-            <ul class="nested">
-            <li>Black Tea</li>
-            <li>White Tea</li>
-            <li><span class="caret">Green Tea</span>
-                <ul class="nested">
-                <li>Sencha</li>
-                <li>Gyokuro</li>
-                <li>Matcha</li>
-                <li>Pi Lo Chun</li>
-                </ul>
-
-            </li>
-            </ul>
-        </li>
-        </ul>
-
-    </li>
-</ul>-->
+</ul>
diff --git 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, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 
 @Component({
@@ -9,16 +9,50 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 export class FileTreeViewComponent implements OnInit {
   @Input() treeData: FileTreeNode[] = [];
   @Input() pid = 0;
+  @Output() getDataEvent = new EventEmitter<string>();
 
   chevronBtnStyle:Record<string, unknown> = {};
 
+  constructor( ){
+    //
+  }
+
 
   ngOnInit():void{
 
     this.setcolorChevron();
   }
 
-  showChildren(id?:number, id1?:number):void{
+  showChildren(name?:string):void{
+
+    let ulId = '';   let imgId = ''
+
+    ulId = `fileExplrTreeView-${this.pid}`;
+    imgId = `fileExplrTreeView-img-${this.pid}`;
+
+    console.log('passed id:', ulId);
+    console.log('passed imgId:', imgId);
+    console.log('passed name:', name);
+
+    const toggler =  document.getElementById(ulId) as HTMLElement;
+    const imgDiv =  document.getElementById(imgId) as HTMLElement;
+
+    if(toggler){
+      console.log('toggler:', toggler);
+      toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+
+      if(imgDiv){
+        console.log('imgDiv:', imgDiv);
+        imgDiv.style.transform = 'rotate(90deg)';
+        imgDiv.style.position = 'relative';
+      }
+
+      //pass event to the parent
+      //this.getDataEvent.emit(name);
+    }
+  }
+
+  showGrandChildren(id?:number, id1?:number, name?:string):void{
 
     let ulId = '';   let imgId = ''
 
@@ -43,16 +77,67 @@ export class FileTreeViewComponent implements OnInit {
     if(toggler){
       console.log('toggler:', toggler);
       toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+
+
+      //toggler.classList.remove("nested");
+      //toggler.classList.remove("active");
+      //toggler.classList.toggle("caret-down");
+
+      if(imgDiv){
+        console.log('imgDiv:', imgDiv);
+        imgDiv.style.transform = 'rotate(90deg)';
+        imgDiv.style.position = 'relative';
+      }
+
+      //pass event to the parent
+      //this.getDataEvent.emit(name);
+    }
+  }
+
+
+  showGreatGrandChildren(id?:number, id1?:number, name?:string):void{
+
+    let ulId = '';   let imgId = ''
+
+    if(id === undefined && id1 === undefined ){
+      ulId = `fileExplrTreeView-${this.pid}`;
+      imgId = `fileExplrTreeView-img-${this.pid}`;
+    }
+
+    if(id !== undefined && id1 === undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}`;
+
+    if(id !== undefined && id1 !== undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
+
+    console.log('passed id:', ulId);
+    console.log('passed imgId:', imgId);
+
+    const toggler =  document.getElementById(ulId) as HTMLElement;
+    const imgDiv =  document.getElementById(imgId) as HTMLElement;
+
+    if(toggler){
+      console.log('toggler:', toggler);
+      toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+
+
+      //toggler.classList.remove("nested");
+      //toggler.classList.remove("active");
       //toggler.classList.toggle("caret-down");
 
       if(imgDiv){
         console.log('imgDiv:', imgDiv);
         imgDiv.style.transform = 'rotate(90deg)';
         imgDiv.style.position = 'relative';
       }
+
+      //pass event to the parent
+      //this.getDataEvent.emit(name);
     }
   }
 
+
+
   showCurrentSelection():void{
    1
   }
@@ -64,15 +149,45 @@ export class FileTreeViewComponent implements OnInit {
     }
   }
 
-  colorChevron():void{
-    this.chevronBtnStyle ={
-      'fill': 'rgb(18, 107, 240)'
+  colorChevron(id?:number, id1?:number):void{
+    let imgId = ''
+
+    if(id === undefined && id1 === undefined ){
+      imgId = `fileExplrTreeView-img-${this.pid}`;
+    }
+
+    if(id !== undefined && id1 === undefined )
+      imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
+
+    if(id !== undefined && id1 !== undefined )
+      imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
+
+    const imgDiv =  document.getElementById(imgId) as HTMLElement;
+
+    if(imgDiv){
+      console.log('unColorChevron-imgDiv:', imgDiv);
+      imgDiv.style.fill = 'rgb(18, 107, 240)';
     }
   }
 
-  unColorChevron():void{
-    this.chevronBtnStyle ={
-      'fill': '#ccc'
+  unColorChevron(id?:number, id1?:number):void{
+    let imgId = ''
+
+    if(id === undefined && id1 === undefined ){
+      imgId = `fileExplrTreeView-img-${this.pid}`;
+    }
+
+    if(id !== undefined && id1 === undefined )
+      imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
+
+    if(id !== undefined && id1 !== undefined )
+      imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
+
+    const imgDiv =  document.getElementById(imgId) as HTMLElement;
+
+    if(imgDiv){
+      console.log('unColorChevron-imgDiv:', imgDiv);
+      imgDiv.style.fill = '#ccc';
     }
   }
 

diff --git a/src/app/system-apps/taskbarentry/taskbarentry.component.html b/src/app/system-apps/taskbarentry/taskbarentry.component.html
@@ -1,5 +1,5 @@
 <li>
-    <figure  (click)="restoreOrMinizeWindow()  ">
+    <figure  (click)="restoreOrMinizeWindow()">
         <img [src]="icon" [alt]="name">
     </figure>
 </li>