list view in progress

chinonso098 · Feb 11, 2024 · dff220c · dff220c
1 parent de5cbfa
commit dff220c
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -196,7 +196,6 @@
             </div>
         </div>
 
-
         <div class="header-nav-search-container">
             <form [formGroup]="searchForm"  (ngSubmit)="isFormDirty()">
                 <div class="search-container">
@@ -250,7 +249,7 @@
             <!-- ngDraggable  [inBounds]="true" zIndex="1" [preventDefaultEvent]="true"
                 (stopped)="onDragEnd($event)" (started)="onDragStart($event)" -->
 
-                <ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="onHideIconContextMenu()"> 
+                <ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="onHideIconContextMenu()" id="olStyle-{{this.processId}}"> 
                     <ng-container [ngTemplateOutlet]="viewOptions === smallIconsView ? iconsView :
                                                       viewOptions === mediumIconsView ? iconsView :
                                                       viewOptions === largeIconsView ? iconsView : 
@@ -279,7 +278,28 @@
                         </li>
                     </ng-template>
                     <ng-template #listView0>
-                        <p>List View</p>
+                        <li *ngFor="let file of files; let i = index">
+                            <button tabindex="0" (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter(i)" (mouseleave)="onMouseLeave(i)"
+                            (contextmenu)="onShowIconContextMenu($event, file, i)" (focus)="onBtnFocus(i)" (focusout)="onBtnFocusOut(i)" 
+                            id="iconBtn-{{this.processId}}-{{i}}"  [style]="btnStyle">
+
+                                <span class="span-tab-layout-cntnr">
+                                    <figure class="figure-tab-view-layout">
+                                        <img class="img-tab-view-layout" [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName"  [style]="iconSizeStyle"/>
+                                    </figure>
+
+                                    <div class="div-tab-view-layout">Extra large icons</div>
+                                    <!-- <div class="div-tab-view-layout"  id="figCap-{{this.processId}}-{{i}}">
+                                        {{file.getFileName}}
+                                    </div> -->
+                                    <!-- <div class="rename-textbox"  id="renameContainer-{{this.processId}}-{{i}}">
+                                        <form [formGroup]="renameForm"  (ngSubmit)="isFormDirty()">
+                                            <input type="text" formControlName="renameInput"  (keypress)="onKeyPress($event)" autofocus spellcheck="false" id="renameTxtBox-{{this.processId}}-{{i}}"/>
+                                        </form>
+                                    </div> -->
+                                </span>
+                            </button>
+                        </li>
                     </ng-template>
                     <ng-template #detailsView0>
                         <p>Detail View</p>

diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -171,6 +171,14 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
 
     if(iconView == this.smallIconsView || iconView == this.mediumIconsView ||iconView == this.largeIconsView ){
       this.changeIconsSize(iconView);
+      this.changeOrderedlistStyle(iconView);
+      this.changeButtonSize(iconView);
+    }
+
+    if(iconView == this.listView){
+      this.changeIconsSize(iconView);
+      this.changeOrderedlistStyle(iconView);
+      this.changeButtonSize(iconView);
     }
   }
 
@@ -208,6 +216,48 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
         'height': '30px'
       }
     }
+
+    if(iconSize === this.listView){
+      this.iconSizeStyle = {
+        'width': '18px', 
+        'height': '18px'
+      }
+    }
+  }
+
+  changeButtonSize(iconSize:string):void{
+    if(iconSize === this.smallIconsView || iconSize === this.mediumIconsView || iconSize === this.largeIconsView){
+      this.btnStyle = {
+        'width': '90px', 
+        'height': '70px'
+      }
+    }
+
+    if(iconSize === this.listView){
+      this.btnStyle = {
+        'width': '100px', 
+        'height': '20px'
+      }
+    }
+  }
+
+  changeOrderedlistStyle(iconView:string):void{
+
+    const olStyleElement = document.getElementById(`olStyle-${this.processId}`) as HTMLElement;
+
+    if(iconView == this.smallIconsView || iconView == this.mediumIconsView || iconView == this.largeIconsView){
+      olStyleElement.style.gridTemplateColumns = 'repeat(auto-fill,90px)';
+      olStyleElement.style.gridTemplateRows = 'repeat(auto-fill,70px)';
+      olStyleElement.style.rowGap = '20px';
+      olStyleElement.style.padding = '5px 0';
+    }
+
+    if(iconView == this.listView){
+      olStyleElement.style.gridTemplateColumns = 'repeat(auto-fill,100px)';
+      olStyleElement.style.gridTemplateRows = 'repeat(auto-fill,20px)';
+      olStyleElement.style.columnGap = '20px';
+      olStyleElement.style.padding = '2px 0';
+    }
   }
 
 
@@ -229,6 +279,8 @@ export class FileexplorerComponent implements  OnInit, AfterViewInit, OnDestroy
     }
   }
 
+
+
   colorChevron():void{
     this.recentNavBtnStyle ={
       'fill': 'rgb(18, 107, 240)'