desktop v0.7.9 dekstop icon context menu

chinonso098 · Nov 18, 2023 · 638b6ba · 638b6ba
1 parent 678166f
commit 638b6ba
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 21 deletions.
diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html
@@ -106,6 +106,6 @@
             <span class="span mid">New</span>
             <span class="span tail"> <figure> </figure> </span>
         </div>
-       </div>
+    </div>
     <ng-content> </ng-content>
 </main>
diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts
@@ -38,8 +38,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
 
 
   showCntxtMenu = false;
-  isCntxtMenuActive = false;
-  isCntxtSubMenuActive = false;
   cntxtMenuStyle:Record<string, unknown> = {};
 
   hasWindow = false;
@@ -79,27 +77,27 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
   ngOnInit():void{
-
-    this._vantaEffect = VANTA.WAVES({
-      el: '#vanta',
-      color:this._numSequence,
-      // waveHeight:20,
-      // shininess: 50,
-      // waveSpeed:0.5,
-      // zoom:0.75,     
-    });
+1
+    // this._vantaEffect = VANTA.WAVES({
+    //   el: '#vanta',
+    //   color:this._numSequence,
+    //   // waveHeight:20,
+    //   // shininess: 50,
+    //   // waveSpeed:0.5,
+    //   // zoom:0.75,     
+    // });
   }
 
   ngAfterViewInit():void{
 
-    //interval countdown also 15 second
-     this._timerSubscription = interval(15000) .subscribe(() => {
-
-          //console.log("hexColor:",this.getNextColor());
-          this._vantaEffect.setOptions({
-            color: this.getNextColor(),
-          });
-     });
+    // //interval countdown also 15 second
+    //  this._timerSubscription = interval(15000) .subscribe(() => {
+
+    //       //console.log("hexColor:",this.getNextColor());
+    //       this._vantaEffect.setOptions({
+    //         color: this.getNextColor(),
+    //       });
+    //  });
 
      this.hideContextMenu();
   }

diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
@@ -62,4 +62,65 @@ button{
     background-color: transparent;
     width: 100%;
     height: 70px; 
+}
+
+
+.icon-vertical-menu {
+    position: absolute;
+    width: 250px;
+    box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
+    z-index: 2;
+}
+
+.icon-vertical-menu-item {
+    height: fit-content;
+    padding: 4px 0;
+    background-color: #eee;
+    display: inline-flex;
+    width: 100%;
+    z-index: 2;
+   /*  transition: background-color 0.3s ease; Add a transition for background-color */
+}
+
+.icon-vertical-menu .icon-vertical-menu-item:hover {
+    background-color: #ccc;
+}
+
+.line-container {
+    max-height: 1px;
+    background-color: #eee;
+}
+
+.line {
+    border: 1px solid #afadad;
+    margin: 0 8px;
+}
+
+span{
+    display: block;
+}
+
+span.head{
+    max-width: 25%;
+    padding-left: 4px;
+}
+
+span.mid{
+    min-width: 50%;
+    padding: 0 4px;
+    color: black; /* Black text color */
+    text-align: left;
+    font-size: small;
+}
+
+span.tail{
+    max-width: 25%;
+    padding-left: 78px;
+}
+
+.figure-cntx-menu{
+    align-items: center;
+    display:inline-flex;
+    min-width: 18px;
+    min-width: 18px;
 }
diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
@@ -1,6 +1,6 @@
 <ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)">
     <li *ngFor="let file of files ">
-        <button fileMngrHighlight (dblclick)="runProcess(file)" >
+        <button fileMngrHighlight (dblclick)="runProcess(file)"  (contextmenu)="showIconContextMenu($event)" (click)="hideIconContextMenu()">
             <figure>
                 <img [src]="file.getIcon | safeResourceUrl" [alt]="file.getFileName" />
                 <figcaption>
@@ -9,4 +9,35 @@
             </figure>
         </button>
     </li>
+
+
+<div class="icon-vertical-menu" [style]="iconCntxtMenuStyle">
+
+    <div class="icon-vertical-menu-item">
+        <span class="span head"> <figure class="figure-cntx-menu"> </figure></span>
+        <span class="span mid">Open</span>
+        <span class="span tail"> <figure class="figure-cntx-menu"> </figure> </span>
+    </div>
+
+    <div class="icon-vertical-menu-item">
+        <span class="span head"> <figure class="figure-cntx-menu"> </figure></span>
+        <span class="span mid">Pin to Start</span>
+        <span class="span tail"> <figure class="figure-cntx-menu"> </figure> </span>
+    </div>
+
+    <div class="icon-vertical-menu-item" >
+        <span class="span head"> <figure  class="figure-cntx-menu"> </figure></span>
+        <span class="span mid">Pin to taskbar</span>
+        <span class="span tail"> <figure class="figure-cntx-menu"> </figure> </span>
+    </div>
+
+    <div class="line-container"><div class="line"></div></div>
+
+    <div class="icon-vertical-menu-item">
+        <span class="span head"> <figure class="figure-cntx-menu" > </figure></span>
+        <span class="span mid">Delete</span>
+        <span class="span tail"> <figure class="figure-cntx-menu"> </figure> </span>
+    </div>
+</div>
 </ol>
+
diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -26,6 +26,10 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   private _dirFilesUpdatedSub!: Subscription;
   private _triggerProcessService:TriggerProcessService;
 
+
+  showCntxtMenu = false;
+  iconCntxtMenuStyle:Record<string, unknown> = {};
+
   hasWindow = false;
   icon = 'osdrive/icons/generic-program.ico';
   name = 'filemanager';
@@ -52,6 +56,8 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
         this.directory = '/osdrive/desktop';
     else
       this.directory = `/${this.folderPath}`;
+
+    this.hideIconContextMenu();
   }
 
   async ngAfterViewInit():Promise<void>{
@@ -120,6 +126,34 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+
+  showIconContextMenu(evt:MouseEvent):void{
+    this._runningProcessService.responseToEventCount++;
+    const evtRespCount = this._runningProcessService.responseToEventCount;
+
+    console.log('evtRespCount-fileMgr:',evtRespCount);
+
+    this.iconCntxtMenuStyle = {
+      'width': '250px', 
+      'transform':`translate(${String(evt.clientX)}px, ${String(evt.clientY)}px)`,
+      'z-index': 2,
+      'opacity':1
+    }
+
+
+    evt.preventDefault();
+  }
+
+  hideIconContextMenu():void{
+    this.iconCntxtMenuStyle = {
+      'width': '0px', 
+      'height': '0px', 
+      'transform': 'translate(-100000px, 100000px)',
+      'z-index': -1,
+      'opacity':0
+    }
+  }
+
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type);
   }