Skip to content

Commit

Permalink
fileExplr menu in prog
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Aug 15, 2024
1 parent 56b0d94 commit 6a87d08
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 33 deletions.
164 changes: 164 additions & 0 deletions src/app/shared/system-component/menu/menu.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,3 +298,167 @@ span.dm-tail{
top: 0;
left: 15%;
}




/*fileExplorer Menu CSS*/
.dm-fileExplr-vertical-menu {
position: absolute;
width: 210px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #9c9898;
z-index: 2;
}

.dm-fileExplr-vertical-menu-item {
height: fit-content;
padding: 2px 0;
/* background-color: #eee; */
background-color: #2b2b2b;
display: inline-flex;
width: 100%;
z-index: 2;
}

.dm-fileExplr-line-container {
max-height: 1px;
/* background-color: #eee; */
background-color: #2b2b2b;
}

.dm-fileExplr-line{
border: 1px solid #9c9898;
margin: 0 8px;
}

.dm-fileExplr-empty-line-container {
max-height: 3px;
min-height: 3px;
/* background-color: #eee; */
background-color: #2b2b2b;
}

.dm-fileExplr-vertical-sub-menu {
float: left;
overflow: hidden;
width: 100%;
outline: none;
/* transition: all 0.5s ease 0.3s; Delay the transition for the sub-menu content */
}

.dm-fileExplr-p{
position: relative;
top: 10%;
}

.dm-fileExplr-vertical-sub-menu-content {
display: none;
position: absolute;
/* background-color: #f1f1f1; */
background-color: #2b2b2b;
box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #9c9898;
width: 205px;
z-index: 2;
left: 98%;
margin-top: -29px;
animation: fade 1s ease forwards;
transition-delay:1s;
}

.dm-fileExplr-vertical-menu .dm-fileExplr-vertical-menu-item:hover {
/* background-color: #ccc; */
background-color: #484444;
}

.dm-fileExplr-vertical-sub-menu:hover .dm-fileExplr-vertical-sub-menu-content {
display: block;
transition-delay:1s;
}

.turnOffHoverEffect {
pointer-events: none;
}

@keyframes fade {
from {
opacity: 0;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.dm-fileExplr-head{
max-width: 25%;
padding-left: 4px;
}

.dm-fileExplr-mid, .dm-fileExplr-mid-disabled{
min-width: 50%;
padding: 0 4px;
color: white; /* Black text color */
text-align: left;
font-size: 11px;
font-weight: normal;
}

.dm-fileExplr-mid-disabled{
color: #969696c6;
}

.dm-fileExplr-tail{
max-width: 25%;
padding-left: 62px;
}

.dm-fileExplr-figure{
align-items: center;
display:inline-flex;
width: 18px;
height: 18px;
}

.dm-fileExplr-img{
height: 18px;
width: 18px;
image-rendering:optimizeQuality;
position: relative;
margin: 0 0;
}

.dm-fileExplr-img-alt{
height: 8px;
width: 8px;
image-rendering:optimizeQuality;
position: relative;
}

.dm-fileExplr-figure-alt{
position: relative;
align-items: center;
display: inline-flex;
width: 18px;
height: 18px;
top: -25%;
left: 35%;
}

.dm-fileExplr-img-alt2{
height: 16px;
width: 16px;
image-rendering:optimizeQuality;
position: relative;
}

.dm-fileExplr-figure-alt2{
position: relative;
align-items: center;
display: inline-flex;
min-width: 18px;
top: 0;
left: 15%;
}
63 changes: 31 additions & 32 deletions src/app/shared/system-component/menu/menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,57 +94,56 @@
</div>
</ng-template>


<ng-template #fileExplrMenu>
<div class="dm-dsktp-vertical-menu">
<div class="dm-dsktp-empty-line-container"></div>
<div class="dm-fileExplr-vertical-menu">
<div class="dm-fileExplr-empty-line-container"></div>

<div class="dm-dsktp-vertical-sub-menu" *ngFor="let menuItem of desktopMenu" >
<div class="dm-fileExplr-vertical-sub-menu" *ngFor="let menuItem of desktopMenu" >

<div *ngIf="menuItem.label !== paste" class="dm-dsktp-vertical-menu-item" (click)="onMenuItemClick(menuItem.action)">
<div class="dm-dsktp-head"><figure class="dm-dsktp-figure"><img *ngIf="menuItem.icon1" class="dm-dsktp-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-dsktp-mid"><p class="dm-dsktp-p"> {{menuItem.label}}</p></div>
<div class="dm-dsktp-tail"><figure class="dm-dsktp-figure"> <img *ngIf="menuItem.icon2" class="dm-dsktp-img" [src]="menuItem.icon2"/></figure></div>
<div *ngIf="menuItem.label !== paste" class="dm-fileExplr-vertical-menu-item" (click)="onMenuItemClick(menuItem.action)">
<div class="dm-fileExplr-head"><figure class="dm-fileExplr-figure"><img *ngIf="menuItem.icon1" class="dm-fileExplr-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-fileExplr-mid"><p class="dm-fileExplr-p"> {{menuItem.label}}</p></div>
<div class="dm-fileExplr-tail"><figure class="dm-fileExplr-figure"> <img *ngIf="menuItem.icon2" class="dm-fileExplr-img" [src]="menuItem.icon2"/></figure></div>
</div>

<div *ngIf="menuItem.label === paste && isPasteActive" class="dm-dsktp-vertical-menu-item" (click)="onMenuItemClick(menuItem.action)">
<div class="dm-dsktp-head"><figure class="dm-dsktp-figure"><img *ngIf="menuItem.icon1" class="dm-dsktp-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-dsktp-mid"><p class="dm-dsktp-p"> {{menuItem.label}}</p></div>
<div class="dm-dsktp-tail"><figure class="dm-dsktp-figure"> <img *ngIf="menuItem.icon2" class="dm-dsktp-img" [src]="menuItem.icon2"/></figure></div>
<div *ngIf="menuItem.label === paste && isPasteActive" class="dm-fileExplr-vertical-menu-item" (click)="onMenuItemClick(menuItem.action)">
<div class="dm-fileExplr-head"><figure class="dm-fileExplr-figure"><img *ngIf="menuItem.icon1" class="dm-fileExplr-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-fileExplr-mid"><p class="dm-fileExplr-p"> {{menuItem.label}}</p></div>
<div class="dm-fileExplr-tail"><figure class="dm-fileExplr-figure"> <img *ngIf="menuItem.icon2" class="dm-fileExplr-img" [src]="menuItem.icon2"/></figure></div>
</div>


<div *ngIf="menuItem.label === paste && !isPasteActive" class="dm-dsktp-vertical-menu-item turnOffHoverEffect ">
<div class="dm-dsktp-head"><figure class="dm-dsktp-figure"><img *ngIf="menuItem.icon1" class="dm-dsktp-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-dsktp-mid-disabled"><p class="dm-dsktp-p"> {{menuItem.label}}</p></div>
<div class="dm-dsktp-tail"><figure class="dm-dsktp-figure"> <img *ngIf="menuItem.icon2" class="dm-dsktp-img" [src]="menuItem.icon2"/></figure></div>
<div *ngIf="menuItem.label === paste && !isPasteActive" class="dm-fileExplr-vertical-menu-item turnOffHoverEffect ">
<div class="dm-fileExplr-head"><figure class="dm-fileExplr-figure"><img *ngIf="menuItem.icon1" class="dm-fileExplr-img" [src]="menuItem.icon1"/></figure></div>
<div class="dm-fileExplr-mid-disabled"><p class="dm-fileExplr-p"> {{menuItem.label}}</p></div>
<div class="dm-fileExplr-tail"><figure class="dm-fileExplr-figure"> <img *ngIf="menuItem.icon2" class="dm-fileExplr-img" [src]="menuItem.icon2"/></figure></div>
</div>


<div *ngIf="menuItem.nest.length" class="dm-dsktp-vertical-sub-menu-content" >
<div class="dm-dsktp-empty-line-container"></div>
<div *ngIf="menuItem.nest.length" class="dm-fileExplr-vertical-sub-menu-content" >
<div class="dm-fileExplr-empty-line-container"></div>
<div *ngFor="let item of menuItem.nest" (click)="onMenuItemClick(item.action)">
<div class="dm-dsktp-vertical-menu-item">
<div class="dm-dsktp-head"><figure [ngClass]=" item.styleOption === 'A' ?'dm-dsktp-figure-alt' : 'dm-dsktp-figure-alt2'">
<img *ngIf="item.variables" [ngClass]=" item.styleOption === 'A' ?'dm-dsktp-img-alt' : 'dm-dsktp-img-alt2' " [src]="item.icon"/>
<div class="dm-fileExplr-vertical-menu-item">
<div class="dm-fileExplr-head"><figure [ngClass]=" item.styleOption === 'A' ?'dm-fileExplr-figure-alt' : 'dm-fileExplr-figure-alt2'">
<img *ngIf="item.variables" [ngClass]=" item.styleOption === 'A' ?'dm-fileExplr-img-alt' : 'dm-fileExplr-img-alt2' " [src]="item.icon"/>
</figure>
</div>
<div class="dm-dsktp-mid" *ngIf="item.styleOption === 'A' || item.styleOption === 'B'">{{item.label}}</div>
<div class="dm-dsktp-mid" *ngIf="item.styleOption === 'C'" ><p class="dm-dsktp-p"> {{item.label}}</p></div>
<div class="dm-dsktp-tail"><figure class="dm-dsktp-figure"></figure></div>
<div class="dm-fileExplr-mid" *ngIf="item.styleOption === 'A' || item.styleOption === 'B'">{{item.label}}</div>
<div class="dm-fileExplr-mid" *ngIf="item.styleOption === 'C'" ><p class="dm-fileExplr-p"> {{item.label}}</p></div>
<div class="dm-fileExplr-tail"><figure class="dm-fileExplr-figure"></figure></div>
</div>

<div *ngIf="item.emptyline" class="dm-dsktp-empty-line-container"></div>
<div *ngIf="item.emptyline" class="dm-dsktp-line-container"><div class="dm-dsktp-line"></div></div>
<div *ngIf="item.emptyline" class="dm-dsktp-empty-line-container"></div>
<div *ngIf="item.emptyline" class="dm-fileExplr-empty-line-container"></div>
<div *ngIf="item.emptyline" class="dm-fileExplr-line-container"><div class="dm-fileExplr-line"></div></div>
<div *ngIf="item.emptyline" class="dm-fileExplr-empty-line-container"></div>
</div>
<div class="dm-dsktp-empty-line-container"></div>
<div class="dm-fileExplr-empty-line-container"></div>
</div>

<div *ngIf="menuItem.emptyline" class="dm-dsktp-empty-line-container"></div>
<div *ngIf="menuItem.emptyline" class="dm-dsktp-line-container"><div class="dm-dsktp-line"></div></div>
<div *ngIf="menuItem.emptyline" class="dm-dsktp-empty-line-container"></div>
<div *ngIf="menuItem.emptyline" class="dm-fileExplr-empty-line-container"></div>
<div *ngIf="menuItem.emptyline" class="dm-fileExplr-line-container"><div class="dm-fileExplr-line"></div></div>
<div *ngIf="menuItem.emptyline" class="dm-fileExplr-empty-line-container"></div>
</div>
<div style="position: relative; z-index:1; top: 248px;" class="dm-dsktp-empty-line-container"></div>
<div style="position: relative; z-index:1; top: 248px;" class="dm-fileExplr-empty-line-container"></div>
</div>
</ng-template>
3 changes: 2 additions & 1 deletion src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
});

this.setNavButtonsColor();
this.getFileExplorerMenuData();
}

async ngAfterViewInit():Promise<void>{
Expand Down Expand Up @@ -1573,7 +1574,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
{icon1:'', icon2:'osdrive/icons/arrow_next.png', label:'Sort by', nest:this.buildSortByMenu(), action: ()=> console.log(), emptyline:false},
{icon1:'', icon2:'', label: 'Refresh', nest:[], action:() => console.log('Refresh'), emptyline:true},
{icon1:'', icon2:'', label: 'Paste', nest:[], action: () => console.log('Paste!! Paste!!'), emptyline:false},
{icon1:'/osdrive/icons/terminal_48.png', icon2:'', label:'Open in Terminal', nest:[], action: () => console.log('Open Terminal'), emptyline:false},
{icon1:'/osdrive/icons/terminal_48.png', icon2:'', label:'Open in Terminal', nest:[], action: () => console.log('Open Terminal'), emptyline:true},
{icon1:'', icon2:'', label:'Properties', nest:[], action: () => console.log('Properties'), emptyline:false}
]
}
Expand Down

0 comments on commit 6a87d08

Please sign in to comment.