switched to svg navigation btns

chinonso098 · Dec 22, 2023 · df01747 · df01747
1 parent bb3d02e
commit df01747
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>