From df017472a530df106b35769a9eec8316fdad30e4 Mon Sep 17 00:00:00 2001
From: chinons098 <chinonsoakolam@outlook.com>
Date: Fri, 22 Dec 2023 00:12:52 -0500
Subject: [PATCH] switched to svg navigation btns

---
 .../fileexplorer/fileexplorer.component.css   |  2 +-
 .../fileexplorer/fileexplorer.component.html  | 38 +++++++++++++--
 .../fileexplorer/fileexplorer.component.ts    | 48 ++++++++++++-------
 .../startbutton/startbutton.component.html    |  4 +-
 4 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.css b/src/app/system-apps/fileexplorer/fileexplorer.component.css
index 5251edcd..9443372e 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.css
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.css
@@ -68,7 +68,7 @@
     width: 10px;
     image-rendering:optimizeQuality;
     position: relative;
-    top: 8px
+    top: 6px
 }
 
 .figure-alt-caret{
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
index 32faaa03..88be59a7 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.html
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -4,19 +4,49 @@
     <div class="fileexp-header-container">
         <div class="header-nav-btn-container">
             <figure class="figure-alt">
-                <img class="img-alt-left-right" [src]="'osdrive/icons/nav_left_32.png' | safeResourceUrl" />
+                <!-- <img  class="img-alt-left-right" [src]="'osdrive/icons/nav_left_32.png' | safeResourceUrl" /> -->
+  
+                <div class="img-alt-left-right">
+                    <svg xmlns="http://www.w3.org/2000/svg" [style]="prevNavBtnStyle"
+                        height="16" width="16" 
+                        viewBox="0 0 512 512">
+                        <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
+                    </svg>
+                </div>
+
             </figure>
 
             <figure class="figure-alt">
-                <img class="img-alt-left-right" [src]="'osdrive/icons/nav_right_32.png' | safeResourceUrl" />
+                <!-- <img class="img-alt-left-right" [src]="'osdrive/icons/nav_right_32.png' | safeResourceUrl" /> -->
+                <div class="img-alt-left-right">
+                    <svg xmlns="http://www.w3.org/2000/svg"  [style]="nextNavBtnStyle"
+                        height="16" width="16" 
+                        viewBox="0 0 512 512">
+                        <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
+                    </svg>
+                </div>
             </figure>
 
             <figure class="figure-alt-caret">
-                <img class="img-alt-caret" [src]="'osdrive/icons/nav_expand_32.png' | safeResourceUrl" />
+                <!-- <img class="img-alt-caret" [src]="'osdrive/icons/nav_expand_32.png' | safeResourceUrl" /> -->
+                <div class="img-alt-caret">
+                    <svg xmlns="http://www.w3.org/2000/svg"  [style]="recentNavBtnStyle"
+                        height="10" width="10" 
+                        viewBox="0 200 512 512">
+                        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+                    </svg>
+                </div>
             </figure>
 
             <figure class="figure-alt-up">
-                <img class="img-alt-up" [src]="'osdrive/icons/nav_up-32.png' | safeResourceUrl" />
+                <!-- <img class="img-alt-up" [src]="'osdrive/icons/nav_up-32.png' | safeResourceUrl" /> -->
+                <div class="img-alt-up">
+                    <svg xmlns="http://www.w3.org/2000/svg" [style]="upNavBtnStyle"
+                        height="16" width="16" 
+                        viewBox="0 0 512 512">
+                        <path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
+                    </svg>
+                </div>
             </figure>
         </div>
 
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
index f1834583..a24db263 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.ts
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -34,7 +34,6 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
   private _refreshNotifySub!:Subscription;
   private _autoArrangeIconsNotifySub!:Subscription;
   private _autoAlignIconsNotifyBySub!:Subscription;
-  private _showDesktopIconNotifySub!:Subscription;
   private _dirFilesUpdatedSub!: Subscription;
 
 
@@ -45,6 +44,10 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
   clearSearchStyle:Record<string, unknown> = {};
   searchStyle:Record<string, unknown> = {};
   btnStyle:Record<string, unknown> = {};
+  prevNavBtnStyle:Record<string, unknown> = {};
+  nextNavBtnStyle:Record<string, unknown> = {};
+  recentNavBtnStyle:Record<string, unknown> = {};
+  upNavBtnStyle:Record<string, unknown> = {};
 
   hasWindow = true;
   icon = 'osdrive/icons/file_explorer.ico';
@@ -57,9 +60,16 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
   
 
   files:FileInfo[] = [];
+  prevPathEntries:string[] = [];
+  nextPathEntries:string[] = [];
+  recentPathEntries:string[] = [];
+  upPathEntries:string[] = ['/osdrive/Desktop'];
 
-  private showDesktopIcon = true;
 
+
+  isPrevBtnActive = false;
+  isNextBtnActive = false;
+  isUpBtnActive = false;
   isFormSubmitted = false;
   isRenameActive = false;
   isSearchBoxNotEmpty = false;
@@ -106,7 +116,7 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
     this._viewByNotifySub = fileManagerService.viewByNotify.subscribe((p) =>{this.changeIconsSize(p)});
     this._sortByNotifySub = fileManagerService.sortByNotify.subscribe((p)=>{this.sortIcons(p)});
     this._refreshNotifySub = fileManagerService.refreshNotify.subscribe(()=>{this.refreshIcons()});
-    this._showDesktopIconNotifySub = fileManagerService.showDesktopIconsNotify.subscribe((p) =>{this.toggleDesktopIcons(p)});
+
   }
 
   ngOnInit():void{
@@ -120,6 +130,7 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
       searchInput: '',
     });
 
+    this.setNavButtonsColor();
     this.onHideIconContextMenu();
   }
 
@@ -128,13 +139,30 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
   }
   
 
+  setNavButtonsColor(){
+    this.prevNavBtnStyle ={
+      'fill': '#ccc'
+    }
+
+    this.nextNavBtnStyle ={
+      'fill': '#ccc'
+    }
+
+    this.recentNavBtnStyle ={
+      'fill': '#ccc'
+    }
+
+    this.upNavBtnStyle ={
+      'fill': '#fff'
+    }
+  }
+
   ngOnDestroy(): void {
     this._viewByNotifySub?.unsubscribe();
     this._sortByNotifySub?.unsubscribe();
     this._refreshNotifySub?.unsubscribe();
     this._autoArrangeIconsNotifySub?.unsubscribe();
     this._autoAlignIconsNotifyBySub?.unsubscribe();
-    this._showDesktopIconNotifySub?.unsubscribe();
     this._dirFilesUpdatedSub?.unsubscribe();
   }
 
@@ -390,18 +418,6 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
     }
   }
 
-  toggleDesktopIcons(showIcons:boolean):void{
-    this.showDesktopIcon = showIcons;
-    if(!this.showDesktopIcon){
-      this.btnStyle ={
-        'display': 'none',
-      }
-    }else{
-      this.btnStyle ={
-        'display': 'block',
-      }
-    }
-  }
 
   async refreshIcons():Promise<void>{
     this.isHighlighIconDueToPriorActionActive = false;
diff --git a/src/app/system-apps/startbutton/startbutton.component.html b/src/app/system-apps/startbutton/startbutton.component.html
index 2dff1e68..3da639ba 100644
--- a/src/app/system-apps/startbutton/startbutton.component.html
+++ b/src/app/system-apps/startbutton/startbutton.component.html
@@ -1,7 +1,7 @@
 <button 
-    [ngStyle]=" hover ?  {'background-color': 'hsla(0,0%,25%,60%)'}: {'color': ''}" 
+    [style]=" hover ?  {'background-color': 'hsla(0,0%,25%,60%)'}: {'color': ''}" 
     (mouseover)="hover=true" (mouseleave)="hover=false"> 
-        <svg width="20"   [ngStyle]="hover? {'fill':'#76B9ED'}:{'fill': '#fff'}" 
+        <svg width="20"   [style]="hover? {'fill':'#76B9ED'}:{'fill': '#fff'}" 
             viewBox="0 0 488 512">
             <path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" />
         </svg>