Start menu needs more work

chinonso098 · Oct 4, 2024 · cb69047 · cb69047
1 parent 71f0da9
commit cb69047
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/src/app/system-apps/startmenu/startmenu.component.css b/src/app/system-apps/startmenu/startmenu.component.css
@@ -98,7 +98,7 @@
     width: 100%;
     height: 500px;
     overflow-y: auto;
-    padding:0px 12px;
+    /* padding:0px 12px; */
 }
 
 .start-menu-list-ol{
@@ -119,7 +119,7 @@
     /* background-color: rgba(51, 51, 51, 0.8); */
     color: #fff;
     border: 0;
-    transition: all 200ms ease;
+    /* transition: all 200ms ease; */
     display: flex;
     width: 100%;
     height: 32px;

diff --git a/src/app/system-apps/startmenu/startmenu.component.html b/src/app/system-apps/startmenu/startmenu.component.html
@@ -67,9 +67,9 @@
         <div class="start-menu-main-content-empty"></div>
         <div class="start-menu-main-content-list-container">
             <div class="start-menu-main-content-list-content">
-                <ol class="start-menu-list-ol"> 
-                    <li  class="start-menu-list-li"  *ngFor="let file of startMenuFiles; let i = index"  >
-                        <button class="start-menu-list-btn" (mouseenter)="onBtnHover()" (mouseleave)="onBtnExit()">
+                <ol class="start-menu-list-ol" (mouseenter)="onBtnHover()"> 
+                    <li  class="start-menu-list-li"  *ngFor="let file of startMenuFiles; let i = index"  id="start-menu-list-li-{{i}}">
+                        <button class="start-menu-list-btn">
                             <div class="start-menu-list-head"> <figure class="start-menu-list-fig"><img class="start-menu-list-img" [src]="file.getIconPath"/></figure></div>
                             <div class="start-menu-list-mid"><p class="start-menu-list-p">{{file.getFileName}}</p></div>
                             <div class="start-menu-list-tail"> <figure class="start-menu-list-fig"></figure> </div>

diff --git a/src/app/system-apps/startmenu/startmenu.component.ts b/src/app/system-apps/startmenu/startmenu.component.ts
@@ -23,6 +23,7 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
   private _elRef:ElementRef;
   private _consts:Constants = new Constants();
   txtOverlayMenuStyle:Record<string, unknown> = {};
+
   private SECONDS_DELAY = 250;
 
   delayStartMenuOverlayHideTimeoutId!: NodeJS.Timeout;
@@ -80,13 +81,9 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
 
   // Show Overlay Function
   startMenuOverlaySlideOut(): void {
-    console.log('IN');
-
 
     clearTimeout(this.delayStartMenuOverlayHideTimeoutId);
-
     const smIconTxtOverlay = document.getElementById('sm-IconText-Overlay-Cntnr') as HTMLElement;
-
     // Clear the show timeout as well if needed
     clearTimeout(this.delayStartMenuOverlayShowTimeoutId);
 
@@ -110,12 +107,10 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
 
   // Hide Overlay Function
   startMenuOverlaySlideIn(): void {
-    console.log('OUT');
 
-    clearTimeout(this.delayStartMenuOverlayShowTimeoutId);
 
+    clearTimeout(this.delayStartMenuOverlayShowTimeoutId);
     const smIconTxtOverlay = document.getElementById('sm-IconText-Overlay-Cntnr') as HTMLElement;
-
     // Clear the hide timeout if necessary
     clearTimeout(this.delayStartMenuOverlayHideTimeoutId);
 
@@ -137,29 +132,47 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
 
 
   onBtnHover():void{
-    // applyEffect('.start-menu-list-btn', {
+
+    // applyEffect('.start-menu-main-overlay-content', {
     //   lightColor: 'rgba(255,255,255,0.1)',
     //   gradientSize: 150,
     // });
 
-    // applyEffect('.start-menu-list-ol', {
-    //   clickEffect: true,
-    //   lightColor: 'rgba(255,255,255,0.6)',
-    //   gradientSize: 40,
-    //   isContainer: true,
-    //   children: {
-    //     borderSelector: '.start-menu-list-li',
-    //     elementSelector: '.start-menu-list-btn',
-    //     lightColor: 'rgba(255,255,255,0.3)',
-    //     gradientSize: 150
-    //   }
-    // })
-  }
+    // applyEffect('.start-menu-main-overlay-content', {
+    //   lightColor: 'rgba(255,255,255,0.1)',
+    //   gradientSize: 150,
+    // });
 
-  onBtnExit():void{
-//
+    applyEffect('.start-menu-list-ol', {
+      clickEffect: true,
+      lightColor: 'rgba(255,255,255,0.6)',
+      gradientSize: 80,
+      isContainer: true,
+      children: {
+        borderSelector: '.start-menu-list-li',
+        elementSelector: '.start-menu-list-btn',
+        lightColor: 'rgba(255,255,255,0.3)',
+        gradientSize: 150
+      }
+    })
+
+
+    applyEffect('.start-menu-main-overlay-container', {
+      clickEffect: true,
+      lightColor: 'rgba(255,255,255,0.6)',
+      gradientSize: 80,
+      isContainer: true,
+      children: {
+        borderSelector: '.start-menu-main-overlay-icon-text-content',
+        elementSelector: '.start-menu-overlay-icon',
+        lightColor: 'rgba(255,255,255,0.3)',
+        gradientSize: 150
+      }
+    })
   }
 
+
+
   private async loadFilesInfoAsync():Promise<void>{
     this.startMenuFiles = [];
     this._fileService.resetDirectoryFiles();