Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
chinonso098 committed Nov 25, 2023
1 parent bdf3116 commit 86d07d6
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 98 deletions.
75 changes: 67 additions & 8 deletions src/app/system-apps/fileexplorer/fileexplorer.component.css
Original file line number Diff line number Diff line change
@@ -1,21 +1,80 @@
.main-container{
.fileexp-main-container{
width: 100%;
height: 100%;
}

.header-container{
.fileexp-content-container{
width: 100%;
display: flex;
}

.fileexp-header-container{
width: 100%;
}

/*****************************navigation view Started*****************************/

.navigation-content-container{
min-width: 100px;
}


* Remove default bullets */
ul, #myUL {
list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}

/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}

/*****************************navigation view Started*****************************/

.file-content-container{
min-height: 360px;
overflow: scroll;
width: 100%; /* Set a maximum width for the responsive container */
overflow: auto;
}

.previewOrdetails-content-container{
min-width: 100px;
}


ol{
/* column-gap: 1px; */
display: grid;
grid-auto-flow: column;
grid-auto-flow: row;
grid-template-columns: repeat(auto-fill,90px);
grid-template-rows: repeat(auto-fill,70px);
height: calc(100% - 40px);
Expand Down Expand Up @@ -81,15 +140,15 @@ button{
}


.icon-vertical-menu {
.fx-icon-vertical-menu {
position: absolute;
width: 205px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #9c9898;
z-index: 2;
}

.icon-vertical-menu-item {
.fx-icon-vertical-menu-item {
height: fit-content;
padding: 2px 0;
background-color: #eee;
Expand All @@ -99,7 +158,7 @@ button{
/* transition: background-color 0.3s ease; Add a transition for background-color */
}

.icon-vertical-menu .icon-vertical-menu-item:hover {
.fx-icon-vertical-menu .fx-icon-vertical-menu-item:hover {
background-color: #ccc;
}

Expand Down
194 changes: 124 additions & 70 deletions src/app/system-apps/fileexplorer/fileexplorer.component.html
Original file line number Diff line number Diff line change
@@ -1,77 +1,131 @@

<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
<div class="main-container">
<div class="file-content-container">
<ol (dragover)="onDragOver($event)" (drop)="onDrop($event)" (click)="onHideIconContextMenu()" #myBounds>
<li *ngFor="let file of files; let i = index">
<button (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter1(i)" (mouseleave)="onMouseLeave(i)"
ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
(stopped)="onDragEnd($event)" (started)="onDragStart($event)"
(contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick(i)"
id="iconBtn-{{this.processId}}-{{i}}" [style]="btnStyle">
<figure>
<img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName" [style]="iconSizeStyle"/>
<figcaption id="figCap{{i}}">
{{file.getFileName}}
</figcaption>
<div class="rename-textbox" id="renameContainer{{i}}">
<form [formGroup]="renameForm" (ngSubmit)="isFormDirty()">
<input type="text" formControlName="renameInput" (keypress)="onInputChange($event)" autofocus spellcheck="false" id="renameTxtBox{{i}}"/>
</form>
</div>
</figure>
</button>
</li>

<div class="tool-tip-container" id="invalidChars">
<div class="tool-tip-arrow"> </div>
<div class="tool-tip-base"> A file name can't contain any of the following characters: <br /><br />
\ / : * ? " < > |
<div class="fileexp-main-container">
<div class="fileexp-content-container">
<!-- <div class="navigation-content-container">
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><span class="caret">Tea</span>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> -->
<div class="file-content-container">
<ol (dragover)="onDragOver($event)" (drop)="onDrop($event)" (click)="onHideIconContextMenu()" #myBounds>

<ng-container [ngTemplateOutlet]="viewOptions === smallIconsView ? iconsView :
viewOptions === mediumIconsView ? iconsView :
viewOptions === largeIconsView ? iconsView :
viewOptions === listView ? listView0 :
viewOptions === detailsView ? detailsView0 :
viewOptions === contentView ? contentView0 : titleView ">
</ng-container>

<ng-template #iconsView>
<li *ngFor="let file of files; let i = index">
<button (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter1(i)" (mouseleave)="onMouseLeave(i)"
ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
(stopped)="onDragEnd($event)" (started)="onDragStart($event)"
(contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick(i)"
id="iconBtn-{{this.processId}}-{{i}}" [style]="btnStyle">
<figure>
<img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName" [style]="iconSizeStyle"/>
<figcaption id="figCap-{{this.processId}}-{{i}}">
{{file.getFileName}}
</figcaption>
<div class="rename-textbox" id="renameContainer-{{this.processId}}-{{i}}">
<form [formGroup]="renameForm" (ngSubmit)="isFormDirty()">
<input type="text" formControlName="renameInput" (keypress)="onInputChange($event)" autofocus spellcheck="false" id="renameTxtBox-{{this.processId}}-{{i}}"/>
</form>
</div>
</figure>
</button>
</li>
</ng-template>
<ng-template #listView0>
<p>List View</p>
</ng-template>
<ng-template #detailsView0>
<p>Detail View</p>
</ng-template>
<ng-template #contentView0>
<p>Content View</p>
</ng-template>
<ng-template #titleView>
<p>Title View</p>
</ng-template>



<div class="tool-tip-container" id="invalidChars">
<div class="tool-tip-arrow"> </div>
<div class="tool-tip-base"> A file name can't contain any of the following characters: <br /><br />
\ / : * ? " < > |
</div>
</div>
</div>


<div class="icon-vertical-menu" [style]="iconCntxtMenuStyle">
<div class="empty-line-container"></div>

<div class="icon-vertical-menu-item" (click)="onTriggerRunProcess()">
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid" style="font-weight: bold;">Open</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>


<div class="fx-icon-vertical-menu" [style]="iconCntxtMenuStyle">
<div class="empty-line-container"></div>

<div class="fx-icon-vertical-menu-item" (click)="onTriggerRunProcess()">
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid" style="font-weight: bold;">Open</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="fx-icon-vertical-menu-item">
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid">Pin to Start</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="fx-icon-vertical-menu-item" >
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid">Pin to taskbar</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="empty-line-container"></div>
<div class="line-container"><div class="line"></div></div>
<div class="empty-line-container"></div>

<div class="fx-icon-vertical-menu-item"(click)="onDeleteFile()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Delete</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="fx-icon-vertical-menu-item" (click)="onTriggerRenameFileStep1()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Rename</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="empty-line-container"></div>
</div>

<div class="icon-vertical-menu-item">
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid">Pin to Start</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="icon-vertical-menu-item" >
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid">Pin to taskbar</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="empty-line-container"></div>
<div class="line-container"><div class="line"></div></div>
<div class="empty-line-container"></div>

<div class="icon-vertical-menu-item"(click)="onDeleteFile()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Delete</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="icon-vertical-menu-item" (click)="onTriggerRenameFileStep1()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Rename</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="empty-line-container"></div>
</div>
</ol>

</ol>
</div>
<!-- <div class="previewOrdetails-content-container">
<p>hide/show</p>
</div> -->

</div>
</div>
</cos-window>
28 changes: 19 additions & 9 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Subscription } from 'rxjs';
import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ViewOptions } from './fileexplorer.enums';

@Component({
selector: 'cos-fileexplorer',
Expand Down Expand Up @@ -66,9 +67,18 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy

hideCntxtMenuEvtCnt = 0; // this is a dirty solution
renameFileTriggerCnt = 0; // this is a dirty solution
viewOptions = ViewOptions.MEDIUM_ICON_VIEW;

readonly smallIconsView = ViewOptions.SMALL_ICON_VIEW;
readonly mediumIconsView = ViewOptions.MEDIUM_ICON_VIEW;
readonly largeIconsView = ViewOptions.LARGE_ICON_VIEW;
readonly listView = ViewOptions.LIST_VIEW;
readonly detailsView = ViewOptions.DETAILS_VIEW;
readonly contentView = ViewOptions.CONTENT_VIEW;
readonly titleView = ViewOptions.TITLE_VIEW;

constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService, fileManagerService:FileManagerService, formBuilder: FormBuilder,) {

constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService, fileManagerService:FileManagerService, formBuilder: FormBuilder) {
this._processIdService = processIdService;
this._runningProcessService = runningProcessService;
this._fileService = fileInfoService;
Expand Down Expand Up @@ -368,7 +378,7 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
// get the position of the textbox
const toolTipID = 'invalidChars';
const invalidCharToolTipElement = document.getElementById(toolTipID) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer-${this.processId}-${this.selectedElementId}`) as HTMLElement;

const rect = renameContainerElement.getBoundingClientRect();

Expand Down Expand Up @@ -411,9 +421,9 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
onTriggerRenameFileStep1():void{
this.isRenameActive = !this.isRenameActive;

const figCapElement= document.getElementById(`figCap${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.selectedElementId}`) as HTMLElement;
const renameTxtBoxElement= document.getElementById(`renameTxtBox${this.selectedElementId}`) as HTMLInputElement;
const figCapElement= document.getElementById(`figCap-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const renameTxtBoxElement= document.getElementById(`renameTxtBox${this.processId}-${this.selectedElementId}`) as HTMLInputElement;

if(figCapElement){
figCapElement.style.display = 'none';
Expand All @@ -435,8 +445,8 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
this.isRenameActive = !this.isRenameActive;

const btnElement = document.getElementById(`iconBtn-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.selectedElementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer-${this.processId}-${this.selectedElementId}`) as HTMLElement;

const renameText = this.renameForm.value.renameInput as string;

Expand Down Expand Up @@ -469,8 +479,8 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
this.isRenameActive = !this.isRenameActive;

const btnElement = document.getElementById(`iconBtn-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.selectedElementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap-${this.processId}-${this.selectedElementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer-${this.processId}-${this.selectedElementId}`) as HTMLElement;

if(figCapElement){
figCapElement.style.display = 'block';
Expand Down
9 changes: 9 additions & 0 deletions src/app/system-apps/fileexplorer/fileexplorer.enums.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export enum ViewOptions {
LIST_VIEW = 'List View',
CONTENT_VIEW = 'Content View',
DETAILS_VIEW = 'Details View',
TITLE_VIEW = 'Title View',
SMALL_ICON_VIEW = 'Small Icon View',
MEDIUM_ICON_VIEW = 'Medium Icon View',
LARGE_ICON_VIEW = 'Large Icon View',
}
Loading

0 comments on commit 86d07d6

Please sign in to comment.