hide/show preview or details pane now works

chinonso098 · Sep 20, 2024 · 94ffeb9 · 94ffeb9
1 parent 5b9750f
commit 94ffeb9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 12 deletions.
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.css b/src/app/system-apps/fileexplorer/fileexplorer.component.css
@@ -113,7 +113,8 @@
 }
 
 .view-tab-pane-top1{
-    padding-left: 5px;
+    padding-left: 4.5px;
+    border: 0.5px solid transparent;
 }
 
 .figure-tab-view-pane{
@@ -154,7 +155,9 @@
     position: relative;
     width: fit-content;
     height: fit-content;
-    top: 2px;
+    top: 1.5px;
+    border: 0.5px solid transparent;
+
 }
 .tab-pane-top2-2{
     top: 0px;

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -32,7 +32,7 @@
                         </div>
                         <div class="view-tab-pane-top2">
                             <div class="tab-empty-space"></div>
-                            <div class="tab-pane-top2-1" (click) = "onPrevPaneBtnClick()" (mouseenter) ="onPrevPaneBtnEnter()" (mouseleave)="onPrevPaneBtnLeave()"  id="prevPaneIconCntnr-{{this.processId}}-1">
+                            <div class="tab-pane-top2-1" (click) = "onPrevPaneBtnClick()" (mouseenter) ="onPrevPaneBtnEnter()" (mouseleave)="onPrevPaneBtnLeave()"  id="prevPaneIconCntnr-{{this.processId}}">
                                 <span class="span-tab-pane-cntnr">
                                     <figure class="figure-tab-view-pane1">
                                         <img class="img-tab-view-pane1" [src]="'osdrive/Cheetah/System/Imageres/preview_pane.png' | safeResourceUrl"/>

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -682,27 +682,91 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   onNavPaneBtnEnter():void{
     const btnElement = document.getElementById(`navPaneIconCntnr-${this.processId}`) as HTMLDivElement;
     if(btnElement){
-      btnElement.style.border = '0.5px solid #ccc';
+      btnElement.style.borderColor = '#ccc';
       btnElement.style.backgroundColor = '#807c7c';
     }
-
   }
 
   onNavPaneBtnLeave():void{
     const btnElement = document.getElementById(`navPaneIconCntnr-${this.processId}`) as HTMLDivElement;
     if(btnElement){
       btnElement.style.backgroundColor = 'transparent';
-      btnElement.style.border = 'none'
+      btnElement.style.borderColor = 'transparent';
+    }
+  }
+
+  onPrevPaneBtnClick():void{
+    this.showPreviewPane = !this.showPreviewPane;
+    this.showDetailsPane = false;
+
+    this.removePaneBtnStyle(`detailsPaneIconCntnr-${this.processId}`);
+  }
+
+  onPrevPaneBtnEnter():void{
+    const btnElement = document.getElementById(`prevPaneIconCntnr-${this.processId}`) as HTMLDivElement;
+    if(btnElement){
+      if(!this.showPreviewPane){
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#807c7c';
+      }else{
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#605c5c';
+      }
+    }
+  }
+
+  onPrevPaneBtnLeave():void{
+    const btnElement = document.getElementById(`prevPaneIconCntnr-${this.processId}`) as HTMLDivElement;
+    if(btnElement){
+      if(!this.showPreviewPane){
+        btnElement.style.backgroundColor = 'transparent';
+        btnElement.style.borderColor = 'transparent';
+      }else{
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#807c7c';
+      }
     }
   }
 
-  onPrevPaneBtnClick():void{1}
-  onPrevPaneBtnEnter():void{1}
-  onPrevPaneBtnLeave():void{1}
+  onDetailPaneBtnClick():void{
+    this.showDetailsPane = !this.showDetailsPane;
+    this.showPreviewPane = false;
 
-  onDetailPaneBtnClick():void{1}
-  onDetailPaneBtnEnter():void{1}
-  onDetailPaneBtnLeave():void{1}
+    this.removePaneBtnStyle(`prevPaneIconCntnr-${this.processId}`);
+  }
+
+  onDetailPaneBtnEnter():void{
+    const btnElement = document.getElementById(`detailsPaneIconCntnr-${this.processId}`) as HTMLDivElement;
+    if(btnElement){
+      if(!this.showDetailsPane){
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#807c7c';
+      }else{
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#605c5c';
+      }
+    }
+  }
+  onDetailPaneBtnLeave():void{
+    const btnElement = document.getElementById(`detailsPaneIconCntnr-${this.processId}`) as HTMLDivElement;
+    if(btnElement){
+      if(!this.showDetailsPane){
+        btnElement.style.backgroundColor = 'transparent';
+        btnElement.style.borderColor = 'transparent';
+      }else{
+        btnElement.style.borderColor = '#ccc';
+        btnElement.style.backgroundColor = '#807c7c';
+      }
+    }
+  }
+
+  removePaneBtnStyle(id:string):void{
+    const btnElement = document.getElementById(id) as HTMLDivElement;
+    if(btnElement){
+      btnElement.style.backgroundColor = 'transparent';
+      btnElement.style.borderColor = 'transparent';
+    }
+  }
 
   showExpandTreeIconBtn():void{
     this.showExpandTreeIcon = true;