Skip to content

Commit

Permalink
menu is still in prog
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Aug 19, 2024
1 parent 12e9eac commit b813faf
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 43 deletions.
10 changes: 5 additions & 5 deletions src/app/shared/system-component/menu/menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</ng-container>

<ng-template #fileExplrMngrMenu>
<div class="dm-vertical-menu">
<div class="dm-vertical-menu" id="dmfileExplrMngrMenu">
<div class="dm-empty-line-container"></div>

<div lass="dm-vertical-menu-cntnr" *ngFor="let menuItem of generalMenu; let i = index">
Expand Down Expand Up @@ -41,7 +41,7 @@
</ng-template>

<ng-template #dsktpMenu>
<div class="dm-dsktp-vertical-menu">
<div class="dm-dsktp-vertical-menu" id="dmdskptNestedMenu">
<div class="dm-dsktp-empty-line-container"></div>

<div class="dm-dsktp-vertical-sub-menu" *ngFor="let menuItem of nestedMenu" >
Expand Down Expand Up @@ -95,10 +95,10 @@
</ng-template>

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

<div class="dm-fileExplr-vertical-sub-menu" *ngFor="let menuItem of nestedMenu" >
<div class="dm-fileExplr-vertical-sub-menu" *ngFor="let menuItem of nestedMenu; let i = index" >

<div *ngIf="menuItem.label !== paste" class="dm-fileExplr-vertical-menu-item" (click)="onMenuItemClick(menuItem.action)" (mouseenter)="onMenuItemHover(menuItem.action1)">
<div class="dm-fileExplr-head"><figure class="dm-fileExplr-figure"><img *ngIf="menuItem.icon1" class="dm-fileExplr-img" [src]="menuItem.icon1"/></figure></div>
Expand All @@ -120,7 +120,7 @@
</div>


<div *ngIf="menuItem.nest.length" class="dm-fileExplr-vertical-sub-menu-content" id="dmfileExplrNestedMenu">
<div *ngIf="menuItem.nest.length" class="dm-fileExplr-vertical-sub-menu-content" id="dmfileExplrNestedMenu-{{i}}">
<div class="dm-fileExplr-empty-line-container"></div>
<div *ngFor="let item of menuItem.nest" (click)="onMenuItemClick(item.action)">
<div class="dm-fileExplr-vertical-menu-item">
Expand Down
114 changes: 76 additions & 38 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
private isIconInFocusDueToPriorAction = false;
private isBtnClickEvt= false;
private isHideCntxtMenuEvt= false;
private isShiftSubMenuLeft = false;

private selectedFile!:FileInfo;
private selectedElementId = -1;
Expand All @@ -82,10 +83,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
showInformationTip = false;
iconCntxtCntr = 0;
fileExplrCntxtCntr = 0;

currentXPosition = 0;
currentYPosition = 0;

//hideInformationTip = false;

fileExplrCntxtMenuStyle:Record<string, unknown> = {};
Expand Down Expand Up @@ -895,6 +892,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
onHideIconContextMenu():void{
this.showIconCntxtMenu = false;
this.showFileExplrCntxtMenu = false;
this.isShiftSubMenuLeft = false;
this.iconCntxtCntr = 0;
this.fileExplrCntxtCntr = 0;

Expand Down Expand Up @@ -931,7 +929,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}
}

onShowFileExplorerContextMenu(evt:MouseEvent,):void{
onShowFileExplorerContextMenu(evt:MouseEvent):void{

this.fileExplrCntxtCntr++;
if(this.iconCntxtCntr >= this.fileExplrCntxtCntr)
Expand All @@ -942,27 +940,28 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}

const rect = this.fileExplrCntntCntnr.nativeElement.getBoundingClientRect();
// console.log('rect:', rect);
// console.log('evt:',evt);

const horizontalMin = rect.x;
const horizontalMax = rect.right
const verticalMin = rect.top;
const verticalMax = rect.bottom;

let x = 0;
let y = 0;

if((horizontalMax - evt.clientX) >= 0 && (horizontalMax - evt.clientX) <= 25){
x = evt.clientX - rect.left - 25;
this.currentXPosition = x;
y = evt.clientY - rect.top;
this.currentYPosition = y;
}else{

x = evt.clientX - rect.left;
y = evt.clientY - rect.top;
}
console.log('rect:', rect);
console.log('evt:',evt);

// const horizontalMin = rect.x;
// const horizontalMax = rect.right
// const verticalMin = rect.top;
// const verticalMax = rect.bottom;

const axis = this.checkAndHandleMenuBounds(rect, evt);
// let x = 0;
// let y = 0;

// if((horizontalMax - evt.clientX) >= 0 && (horizontalMax - evt.clientX) <= 10){
// x = evt.clientX - rect.left - 10;
// this.currentXPosition = x;
// y = evt.clientY - rect.top;
// this.currentYPosition = y;
// }else{

// x = evt.clientX - rect.left;
// y = evt.clientY - rect.top;
// }


// console.log(`horizontalMin:${horizontalMin} horizontalMax:${horizontalMax} verticalMin:${verticalMin} verticalMax:${verticalMax}`);
Expand All @@ -976,18 +975,59 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

this.fileExplrCntxtMenuStyle = {
'position': 'absolute',
'transform':`translate(${String(x)}px, ${String(y)}px)`,
'transform':`translate(${String(axis.xAxis)}px, ${String(axis.yAxis)}px)`,
'z-index': 2,
}
evt.preventDefault();
}

moveNestMenuOver():void{
const fileExplrNestedMenu = document.getElementById("dmfileExplrNestedMenu") as HTMLDivElement;
console.log('fileExplrNestedMenu:',fileExplrNestedMenu);
checkAndHandleMenuBounds(rect:DOMRect, evt:MouseEvent):{ xAxis: number; yAxis: number; }{

let xAxis = 0;
let yAxis = 0;
//const horizontalMin = rect.x;
const horizontalMax = rect.right
//const verticalMin = rect.top;
const verticalMax = rect.bottom;
const horizontalDiff = horizontalMax - evt.clientX;
const verticalDiff = verticalMax - evt.clientY;
const menuHeight = 230; //get menu height here
let horizontalShift = false;
let verticalShift = false;

if((horizontalDiff) >= 0 && (horizontalDiff) <= 10){
this.isShiftSubMenuLeft = true;
horizontalShift = true;

xAxis = evt.clientX - rect.left - horizontalDiff;
}

if((verticalDiff) >= 40 && (verticalDiff) <= menuHeight){
const shifMenuUpBy = menuHeight - verticalDiff;
verticalShift = true;

yAxis = evt.clientY - rect.top - shifMenuUpBy;
}

xAxis = (horizontalShift)? xAxis : evt.clientX - rect.left;
yAxis = (verticalShift)? yAxis : evt.clientY - rect.top;

return {xAxis, yAxis};
}

shiftViewSubMenu():void{ this.shiftNestedMenuPosition(0); }

shiftSortBySubMenu():void{this.shiftNestedMenuPosition(1); }

shiftNewSubMenu():void { this.shiftNestedMenuPosition(6); }

shiftNestedMenuPosition(i:number):void{
const fileExplrNestedMenu = document.getElementById(`dmfileExplrNestedMenu-${i}`) as HTMLDivElement;
if(fileExplrNestedMenu){
if(this.isShiftSubMenuLeft)
fileExplrNestedMenu.style.left = '-98%';
}

if(fileExplrNestedMenu)
fileExplrNestedMenu.style.left = '-98%';
}

onDragStart(evt:any):void{
Expand Down Expand Up @@ -1070,8 +1110,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

setInformationTipInfo(file:FileInfo):void{

//console.log('file:',file);

const infoTipFields = ['Author:', 'Item type:','Date created:','Date modified:', 'Dimesions:', 'General', 'Size:','Type:'];
const fileAuthor = 'Relampago Del Catatumbo';
const fileType = file.getFileType;
Expand Down Expand Up @@ -1560,7 +1598,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}


buildViewByMenu():NestedMenuItem[]{
buildViewMenu():NestedMenuItem[]{

const extraLargeIcon:NestedMenuItem={ icon:'osdrive/icons/circle.png', label:'Extra Large icons', action: () => this.isExtraLargeIcon = !this.isExtraLargeIcon, variables:this.isExtraLargeIcon,
emptyline:false, styleOption:'A' }
Expand Down Expand Up @@ -1621,13 +1659,13 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

getFileExplorerMenuData():void{
this.fileExplrMenu = [
{icon1:'', icon2: 'osdrive/icons/arrow_next_1.png', label:'View', nest:this.buildViewByMenu(), action: ()=> '', action1: this.moveNestMenuOver.bind(this), emptyline:false},
{icon1:'', icon2:'osdrive/icons/arrow_next_1.png', label:'Sort by', nest:this.buildSortByMenu(), action: ()=> '', action1: ()=> '', emptyline:false},
{icon1:'', icon2: 'osdrive/icons/arrow_next_1.png', label:'View', nest:this.buildViewMenu(), action: ()=> '', action1: this.shiftViewSubMenu.bind(this), emptyline:false},
{icon1:'', icon2:'osdrive/icons/arrow_next_1.png', label:'Sort by', nest:this.buildSortByMenu(), action: ()=> '', action1: this.shiftSortBySubMenu.bind(this), emptyline:false},
{icon1:'', icon2:'', label: 'Refresh', nest:[], action:() => console.log('Refresh'), action1: ()=> '', emptyline:true},
{icon1:'', icon2:'', label: 'Paste', nest:[], action: () => console.log('Paste!! Paste!!'), action1: ()=> '', emptyline:false},
{icon1:'/osdrive/icons/terminal_48.png', icon2:'', label:'Open in Terminal', nest:[], action: () => console.log('Open Terminal'), action1: ()=> '', emptyline:false},
{icon1:'osdrive/icons/vs-code_48.png', icon2:'', label:'Open with Code', nest:[], action: () => console.log('Open CodeEditor'), action1: ()=> '', emptyline:true},
{icon1:'', icon2:'osdrive/icons/arrow_next_1.png', label:'New', nest:this.buildNewMenu(), action: ()=> console.log(), action1: ()=> '', emptyline:true},
{icon1:'', icon2:'osdrive/icons/arrow_next_1.png', label:'New', nest:this.buildNewMenu(), action: ()=> '', action1: this.shiftNewSubMenu.bind(this), emptyline:true},
{icon1:'', icon2:'', label:'Properties', nest:[], action: () => console.log('Properties'), action1: ()=> '', emptyline:false}
]
}
Expand Down

0 comments on commit b813faf

Please sign in to comment.