i need more icons

chinonso098 · Sep 13, 2024 · 06a1cf3 · 06a1cf3
1 parent ae412fe
commit 06a1cf3
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 23 deletions.
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.css b/src/app/shared/system-component/filetreeview/filetreeview.component.css
@@ -1,13 +1,24 @@
   /* Remove default bullets */
-  ul, #fileExplrTreeView {
+  /* ul, #fileExplrTreeView {
       list-style-type: none;
-  }
+  } */
 
   /* Remove margins and padding from the parent ul */
-  #fileExplrTreeView {
+  .ul-file-tree-view{
+    list-style-type: none;
     margin: 0;
     padding: 0;
   }
+
+  .li-file-tree-view0{
+    margin:0;
+    padding:0 0 0 0px; /* Each nested li will be padded incrementally */
+  }
+
+  .li-file-tree-view{
+    margin:0;
+    padding:0 0 0 10px; /* Each nested li will be padded incrementally */
+  }
 
   /* Style the caret/arrow */
   .caret {
@@ -42,6 +53,7 @@
   .tree-view-cntnr{
     display: inline-flex;
     width: 100%;
+    padding-top: 2px;
   }
 
   .fxtreeview-nested-p{

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -3,18 +3,15 @@
         <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"/>
     </svg> -->
 
-<ul id="fileExplrTreeView">
-    <li>
-
-        <!-- <span class="caret" id="fileExplrTreeView-{{pid}}" (click)="showChildren()">This PC</span> -->
-
+<ul class="ul-file-tree-view" id="fileExplrTreeView">
+    <li class="li-file-tree-view0">
         <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection()">
             <div class="span fxtreeview-head"> 
                 <figure class="fxtreeview-figure">  
-                    <div class="fxtreeview-img">
+                    <div class="fxtreeview-img" >
                         <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
                             height="10" width="10" 
-                            viewBox="0 0 512 512">
+                            viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}">
                             <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"/>
                         </svg>
                     </div>
@@ -24,13 +21,45 @@
             <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> This PC</p></div>
         </div>
 
-        <!-- <ul class="nested">
+        <ul class="ul-file-tree-view nested">
             <ng-container *ngFor="let node of treeData; let i = index">
-                <li> <span class="caret"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showChildren(i)">{{ node.name }}</span>
+                <li class="li-file-tree-view"> 
+                    <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showChildren(i)">
+                        <div class="span fxtreeview-head"> 
+                            <figure class="fxtreeview-figure">  
+                                <div class="fxtreeview-img" *ngIf="node.isFolder" >
+                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [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"/>
+                                    </svg>
+                                </div>
+                            </figure>
+                        </div>
+                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/> </figure> </div>
+                        <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{node.name}}</p></div>
+                    </div>
+
                     <ng-container *ngIf="node.children && node.children.length">
-                        <ul class="nested">
+                        <ul class="ul-file-tree-view nested">
                             <ng-container *ngFor="let child of node.children; let j = index">
-                                <li> <span class="caret" id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showChildren(i,j)">{{ child.name }}</span>
+                                <li class="li-file-tree-view"> 
+                                    <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showChildren(i,j)">
+                                        <div class="span fxtreeview-head"> 
+                                            <figure class="fxtreeview-figure">  
+                                                <div class="fxtreeview-img" *ngIf="node.isFolder" >
+                                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [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"/>
+                                                    </svg>
+                                                </div>
+                                            </figure>
+                                        </div>
+                                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/empty_folder.ico'"/> </figure> </div>
+                                        <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{child.name}}</p></div>
+                                    </div>
+
                                     <ng-container *ngIf="child.children && child.children.length">
                                         <cos-filetreeview [treeData]="child.children"></cos-filetreeview>
                                     </ng-container>
@@ -40,7 +69,7 @@
                     </ng-container>
                 </li>
             </ng-container>
-        </ul> -->
+        </ul> 
     </li>
 </ul>
 

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -20,10 +20,13 @@ export class FileTreeViewComponent implements OnInit {
 
   showChildren(id?:number, id1?:number):void{
 
-    let ulId = ''
+    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}`;
 
     if(id !== undefined && id1 === undefined )
       ulId = `fileExplrTreeView-${this.pid}-${id}`;
@@ -32,11 +35,21 @@ export class FileTreeViewComponent implements OnInit {
       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.toggle("caret-down");
+      //toggler.classList.toggle("caret-down");
+
+      if(imgDiv){
+        console.log('imgDiv:', imgDiv);
+        imgDiv.style.transform = 'rotate(90deg)';
+        imgDiv.style.position = 'relative';
+      }
     }
   }
 

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -226,6 +226,7 @@
         <div class="fileexp-main-container" #fileExplorerMainContainer>
             <div class="fileexp-content-container">
                 <div class="navigation-content-container"  #navExplorerContainer>
+                    <div style="height: 10px; width: 100%;"></div>
                     <cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"></cos-filetreeview>
                 </div>
                 <div class="file-content-container" #fileExplorerContentContainer>

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -693,7 +693,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
       const isFile =  await this._fileService.checkIfDirectory(this.directory + dirEntry);
       const ftn:FileTreeNode = {
         name : dirEntry,
-        isFile: isFile,
+        isFolder: isFile,
         children: []
       }
 
@@ -713,7 +713,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
       const isFile =  await this._fileService.checkIfDirectory(this.directory + + dirEntry);
       const ftn:FileTreeNode = {
         name : dirEntry,
-        isFile: isFile,
+        isFolder: isFile,
         children: []
       }
 
@@ -729,7 +729,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
       const node = treeData[i];
       const updatedNode: FileTreeNode = {
         name: node.name,
-        isFile: node.isFile,
+        isFolder: node.isFolder,
         children: node.children || []
       };
 

diff --git a/src/app/system-files/file.tree.node.ts b/src/app/system-files/file.tree.node.ts
@@ -1,5 +1,5 @@
 export interface FileTreeNode{
     name: string;
-    isFile:boolean;
+    isFolder:boolean;
     children: FileTreeNode[];
 }
diff --git a/src/osdrive/icons/video.ico → src/osdrive/icons/videos.ico b/src/osdrive/icons/video.ico → src/osdrive/icons/videos.ico