desktop v0.6.2

chinonso098 · Nov 5, 2023 · 293ce7a · 293ce7a
1 parent 9efa789
commit 293ce7a
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 28 deletions.
diff --git a/angular.json b/angular.json
@@ -21,12 +21,7 @@
               "browserfs",
               "ini",
               "path",
-              "js-dos",
-              "vanta/dist/vanta.waves.min",
-              "vanta/dist/vanta.birds.min",
-              "vanta/dist/vanta.rings.min",
-              "vanta/dist/vanta.globe.min",
-              "vanta/dist/vanta.net.min"
+              "js-dos"
             ],
             "outputPath": "dist/cheetah-os",
             "index": "src/index.html",
@@ -56,7 +51,7 @@
               "./src/scripts/vanta.halo.min.js",
               "./src/scripts/vanta.globe.min.js",
               "./src/scripts/vanta.birds.min.js",
-              "./src/scripts/vanta.rings.min.js"  
+              "./src/scripts/vanta.rings.min.js"
             ]
           },
           "configurations": {

diff --git a/src/app/system-apps/desktop/desktop.component.css b/src/app/system-apps/desktop/desktop.component.css
@@ -10,7 +10,6 @@
     background-color: blue;
 }
 
-
 .vertical-menu {
     position: absolute;
     width: 250px; /* Set a width if you like */
@@ -41,6 +40,31 @@ span.container2{
     z-index:2;
 }
 
+span.container2.sub-menu {
+
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    width: 250px;
+    z-index: 2;
+    left: 100%;
+    top: 0;
+}
+
+
+span.container2.sub-menu:hover {
+    display: block;
+    z-index: 2;
+}
+
+span.container2.sub-menu  a{
+    color: black;
+    padding: 6px 6px;
+    text-decoration: none;
+    display: block;
+}
+
+
 span.container2:hover {
     background-color: #ccc; /* Dark grey background on mouse-over */
 }
@@ -50,6 +74,8 @@ span.container2.active {
     color: white;
 }
 
+
+
 span.head{
     max-width: 25%;
     padding-left: 4px;
@@ -82,4 +108,4 @@ img{
     position: relative;
     margin: 0 0 0 0;
 }
-
+
diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html
@@ -1,11 +1,16 @@
 <main id="vanta" class="main-desktop"  (contextmenu)="showContextMenu($event)" (click)="hideContextMenu()">
     <div class="vertical-menu" [style]="cntxtMenuStyle" #cntxtMenu>
-        <span class="span container2" (click)="showContextSubMenuFast()" [class.active]>
+        <span class="span container2" (click)="showContextSubMenuFast()" (mouseenter)="showContextSubMenu()" (mouseleave)="hideContextSubMenu()">
             <span class="span head"><figure ></figure></span>
             <span class="span mid">View</span>
-            <span class="span tail"><figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure> </span>
+            <span class="span tail"><figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure></span>
+            <span class="span container2 sub-menu"  [style]="cntxtSubMenuStyle"   #cntxtSubMenu>
+                <a href="#">Link 1</a>
+                <a href="#">Link 2</a>
+                <a href="#">Link 3</a>
+            </span>
         </span>
-        <span class="span container2" (click)="showContextSubMenuFast()" [class.active]>
+        <span class="span container2" (click)="showContextSubMenuFast()">
             <span class="span head"><figure ></figure></span>
             <span class="span mid">Sort by </span>
             <span class="span tail"> <figure> <img [src]="'osdrive/icons/arrow_next.png'"></figure></span>

diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts
@@ -22,6 +22,7 @@ declare let VANTA: {
 export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
 
   @ViewChild('cntxtMenu') cntxtMenu!: ElementRef;
+  @ViewChild('cntxtSubMenu') cntxtSubMenu!: ElementRef;
 
   private _renderer: Renderer2;
 
@@ -39,6 +40,7 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   isCntxtMenuActive = false;
   isCntxtSubMenuActive = false;
   cntxtMenuStyle:Record<string, unknown> = {};
+  cntxtSubMenuStyle:Record<string, unknown> = {};
 
   hasWindow = false;
   icon = 'osdrive/icons/generic-program.ico';
@@ -157,7 +159,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
 
     this.cntxtMenuStyle = {
       'width': '250px', 
-      'height': 'fit-content', 
       'transform':`translate(${String(evt.clientX)}px, ${String(evt.clientY)}px)`,
       'z-index': 2,
       'opacity':1
@@ -183,35 +184,54 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
   showContextSubMenuFast():void{
-    1
+    this.cntxtSubMenuStyle = {
+      'width': '250px', 
+      'display': 'block',
+      'position': 'absolute',
+      'background-color': '#f1f1f1',
+      'z-index': 2,
+      'left':'100%',
+    }
   }
 
-  previousBackground():void{
+  showContextSubMenu():void{
+
+    setTimeout(() => {
+      this.cntxtSubMenuStyle = {
+        'width': '250px', 
+        'display': 'block',
+        'position': 'absolute',
+        'background-color': '#f1f1f1',
+        'z-index': 2,
+        'left':'100%',
+      }
+    }, 750);
+  }
 
-    console.log('this.CURRENT_DESTOP_NUM-prev:',this.CURRENT_DESTOP_NUM);
+  hideContextSubMenu():void{
+    this.cntxtSubMenuStyle = {
+      'width': '0px', 
+      'height': '0px', 
+      'display': 'none',
+      'position': 'absolute',
+      'z-index': -1,
+    }
+  }
 
+  previousBackground():void{
     if(this.CURRENT_DESTOP_NUM > this.MIN_NUMS_OF_DESKTOPS){
       this.CURRENT_DESTOP_NUM --;
       const curNum = this.CURRENT_DESTOP_NUM;
-
-      console.log('curNum:',curNum);
       this.buildVantaEffect(curNum);
     }
 
     this.hideContextMenu();
   }
 
   nextBackground():void{
-
-    console.log('this.CURRENT_DESTOP_NUM-next:',this.CURRENT_DESTOP_NUM);
-
     if(this.CURRENT_DESTOP_NUM < this.MAX_NUMS_OF_DESKTOPS){
       this.CURRENT_DESTOP_NUM ++;
       const curNum = this.CURRENT_DESTOP_NUM;
-
-      console.log('curNum:',curNum);
-
-      console.log('this.CURRENT_DESTOP_NUM-next:',this.CURRENT_DESTOP_NUM);
       this.buildVantaEffect(curNum);
     }
 
@@ -222,7 +242,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
 
     try {
       const vanta = this.VANTAS[n];
-
       if(n == 0){
         this._vantaEffect = VANTA.WAVES(vanta)
       }
@@ -247,7 +266,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
 
-
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }

diff --git a/src/app/system-apps/desktop/vanta-object/vanta.interfaces.ts b/src/app/system-apps/desktop/vanta-object/vanta.interfaces.ts
@@ -32,7 +32,8 @@ export interface BIRDS{
     speedLimit?:5,
     separation?:20,
     alignment?:20,
-    cohesion?:20
+    cohesion?:20,
+    colorMode?: 'lerp' | 'variance' | 'lerpGradient' | 'varianceGradient'
 }
 
 export interface WAVE{