Skip to content

Commit

Permalink
more code fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Dec 19, 2023
1 parent fe2662a commit 4e56c2d
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 28 deletions.
100 changes: 85 additions & 15 deletions src/app/system-apps/fileexplorer/fileexplorer.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@
}

.header-empty-line-container {
height: 5px;
/* background-color: #080808; */
height: 6px;
background-color: #080808;
}
.header-empty-line-container2 {
height: 8px;
/* background-color: #080808; */
height: 7px;
background-color: #080808;
}


Expand Down Expand Up @@ -125,7 +125,7 @@ span.head-nav-path-cntnr{

.nav-path-gen-main-container{
display:flex;
height: 26px;
height: 24px;
min-width: 350px;
width: 100%;
border: 0.5px solid #9d9d9d;
Expand Down Expand Up @@ -166,12 +166,6 @@ span.head-nav-path-gen-cntnr.active{
border: 0.5px solid #9d9d9d;
}

/* .nav-path-gen-container span.head-nav-path-gen-cntnr:hover{
align-items: center;
display:inline-flex;
border-right: 0.5px solid #080808;
} */

.nav-path-gen-container:hover span.head-nav-path-gen-cntnr{
align-items: center;
display:inline-flex;
Expand Down Expand Up @@ -222,6 +216,20 @@ span.head-nav-path-cntnr1{
border-right: none;
}

span.head-nav-path-cntnr1.active{
align-items: center;
display:inline-flex;
border: 0.5px solid #9d9d9d;
background-color: #3f3e3e;
}

span.head-nav-path-cntnr1:hover{
align-items: center;
display:inline-flex;
border: 0.5px solid rgb(18, 107, 240);
transition: border-color 0.3s ease;
}

.figure-nav-path-cntnr2{
position: relative;
min-width: 20px;
Expand All @@ -241,11 +249,25 @@ span.head-nav-path-cntnr2{
border: 0.5px solid #9d9d9d;
}

span.head-nav-path-cntnr2.active{
align-items: center;
display:inline-flex;
border: 0.5px solid #9d9d9d;
background-color: #3f3e3e;
}

span.head-nav-path-cntnr2:hover{
align-items: center;
display:inline-flex;
border: 0.5px solid rgb(18, 107, 240);
transition: border-color 0.3s ease;
}

.path-input{
position: relative;
min-width: 350px;
width: 100%;
height: 26px;
height: 24px;
border: 0.5px solid #9d9d9d;
border-left: none;
border-right: none;
Expand All @@ -255,6 +277,54 @@ span.head-nav-path-cntnr2{
display: none;
}


.nav-path-containter1{
position: absolute;
min-width: 405px;
border: 1px solid #9d9d9d;
margin-right: 10px;
max-height: 180px;
overflow-y: scroll;
background-color: #080808;
z-index: 2;
display: none;
}

.nav-path-entry-containter{
display: inline-flex;
width: 100%;
margin: 8px 8px 8px 0;
overflow-y: scroll;
}

.figure-nav-path-entry{
position: relative;
align-items: center;
min-width: 8px;
}

.img-nav-path-entry{
height: 12px;
width: 12px;
top:0px;
margin: 0 8px;
image-rendering:optimizeQuality;
position: relative;
}

span.mid-nav-path-entry{
padding: 0 2px;
color: #fff; /* white text color */
text-align: left;
font-size: 10px;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
display: inline-flex;
align-items: center;
text-overflow: ellipsis;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxHeader navigation path box Endedxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*--------------------------Header navigation search box Started-----------------------------*/
Expand All @@ -269,7 +339,7 @@ span.head-nav-path-cntnr2{
position: relative;
min-width: 105px;
max-width: 100%;
height: 26px;
height: 24px;
border: 0.5px solid #9d9d9d;
border-left: none;
border-right: none;
Expand Down Expand Up @@ -329,9 +399,10 @@ span.head-search-cntnr2.active{
width: inherit;
border: 1px solid #9d9d9d;
margin-right: 10px;
max-height: 150px;
max-height: 180px;
overflow-y: scroll;
background-color: #080808;
z-index: 2;
display: none;
}

Expand All @@ -358,7 +429,6 @@ span.head-search-cntnr2.active{
}

span.mid-search-entry{
min-width: 50%;
padding: 0 2px;
color: #fff; /* white text color */
text-align: left;
Expand Down
13 changes: 10 additions & 3 deletions src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
</figure>
</div>

<div class="header-nav-path-container" (click)="showPathTextBox()" (focusout)="hidePathTextBox()">
<div class="header-nav-path-container" id="hdrNavPathCntnr-{{this.processId}}">
<form [formGroup]="pathForm" (ngSubmit)="isFormDirty()">
<div class="nav-path-container">
<div class="nav-path-container" (click)="showPathTextBox()" (focusout)="hidePathTextBox()">
<span class="span head-nav-path-cntnr"><figure class="figure-nav-path-cntnr"><img class="img-nav-path-cntnr" [src]="'osdrive/icons/my_computer.ico' | safeResourceUrl"/></figure></span>
<div class="nav-path-gen-main-container" id="pathIconBox-{{this.processId}}" >
<span class="span head-nav-path-gen-cntnr0"><figure class="figure-nav-path-gen-cntnr"><img class="img-nav-path-gen-cntnr" [src]="'osdrive/icons/grey_nav_forward_32.png' | safeResourceUrl"/></figure> </span>
Expand All @@ -32,10 +32,17 @@
</div>
</div>
<input class="path-input" type="text" placeholder="{{this.directory}}" formControlName="pathInput" autofocus spellcheck="false" id="pathTxtBox-{{this.processId}}"/>
<span class="span head-nav-path-cntnr1"><figure class="figure-nav-path-cntnr1"><img class="img-nav-path-cntnr1" [src]="'osdrive/icons/grey_nav_expand_32.png' | safeResourceUrl"/></figure></span>
<span class="span head-nav-path-cntnr1" [class.active]="showPathHistory" (click)="hideshowPathHistory()"><figure class="figure-nav-path-cntnr1"><img class="img-nav-path-cntnr1" [src]="'osdrive/icons/grey_nav_expand_32.png' | safeResourceUrl"/></figure></span>
<span class="span head-nav-path-cntnr2"><figure class="figure-nav-path-cntnr2"><img class="img-nav-path-cntnr2" [src]="'osdrive/icons/grey_nav_refresh_32.png' | safeResourceUrl"/></figure></span>
</div>
</form>

<div class="nav-path-containter1" id="pathHistory-{{this.processId}}">
<div class="nav-path-entry-containter" *ngFor="let entry1 of pathHistory; let k = index">
<span class="span"><figure class="figure-nav-path-entry"><img class="img-nav-path-entry" [src]="'osdrive/icons/white_history_32.png' | safeResourceUrl"/></figure></span>
<span class="span mid-nav-path-entry">{{entry1}}</span>
</div>
</div>
</div>


Expand Down
49 changes: 39 additions & 10 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
type = ComponentType.systemComponent;
directory ='/osdrive/';
displayName = 'File Explorer';


files:FileInfo[] = [];

Expand All @@ -62,6 +62,7 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
isFormSubmitted = false;
isRenameActive = false;
isSearchBoxNotEmpty = false;
showPathHistory = false;
onClearSearchIconHover = false;
onSearchIconHover = false;
isHighlighIconDueToPriorActionActive = false;
Expand Down Expand Up @@ -466,15 +467,20 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
const pathTxtBoxElement = document.getElementById(`pathTxtBox-${this.processId}`) as HTMLInputElement;
const pathIconBoxElement = document.getElementById(`pathIconBox-${this.processId}`) as HTMLElement;

console.log('showPathTextBox');

if(pathTxtBoxElement){
pathTxtBoxElement.style.display = 'block';

this.pathForm.setValue({
pathInput:this.directory
})

if(this.showPathHistory){
if(this.directory === '/osdrive/'){
this.pathForm.setValue({
pathInput:'osdrive'
})
}
}else{
this.pathForm.setValue({
pathInput:this.directory
})
}
pathTxtBoxElement?.focus();
pathTxtBoxElement?.select();
}
Expand All @@ -488,8 +494,6 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
const pathTxtBoxElement = document.getElementById(`pathTxtBox-${this.processId}`) as HTMLElement;
const pathIconBoxElement = document.getElementById(`pathIconBox-${this.processId}`) as HTMLElement;

console.log('hidePathTextBox');

if(pathTxtBoxElement){
pathTxtBoxElement.style.display = 'none';
}
Expand Down Expand Up @@ -646,7 +650,6 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
searchHistoryElement.style.display = 'block';
}
}

}

hideSearchHistory():void{
Expand All @@ -655,6 +658,32 @@ export class FileexplorerComponent implements OnInit, AfterViewInit, OnDestroy
searchHistoryElement.style.display = 'none';
}


hideshowPathHistory():void{
const pathHistoryElement = document.getElementById(`pathHistory-${this.processId}`) as HTMLElement;
const hdrNavPathCntnrElement = document.getElementById(`hdrNavPathCntnr-${this.processId}`) as HTMLElement;
const minus24 = hdrNavPathCntnrElement.offsetWidth - 25;

this.showPathHistory = !this.showPathHistory;

if(this.showPathHistory){
if(pathHistoryElement){
if(this.pathHistory.length > 0){
pathHistoryElement.style.display = 'block';
pathHistoryElement.style.width = `${minus24}px`;
}
}
}else if(!this.showPathHistory){
pathHistoryElement.style.display = 'none';
}
}

hidePathHistory():void{
const pathHistoryElement = document.getElementById(`pathHistory-${this.processId}`) as HTMLElement;
pathHistoryElement.style.display = 'none';
this.showPathHistory = false;
}

private getComponentDetail():Process{
return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type);
}
Expand Down

0 comments on commit 4e56c2d

Please sign in to comment.