mostly UI touches

chinonso098 · Oct 5, 2024 · a3e4288 · a3e4288
1 parent cb69047
commit a3e4288
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 74 deletions.
diff --git a/angular.json b/angular.json
@@ -60,7 +60,7 @@
               "node_modules/angular2-draggable/css/resizable.min.css"
             ],
             "scripts": [
-              "./src/scripts/backgrounds/three.min.js"
+              "src/osdrive/Cheetah/System/ThreeJS/three.min.js"
             ]
           },
           "configurations": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/shared/system-component/menu/menu.component.css b/src/app/shared/system-component/menu/menu.component.css
@@ -1,5 +1,5 @@
 
-.dm-vertical-menu{
+.dm-vertical-menu, .dm-tskbar-vertical-menu{
     position: absolute;
     width: 205px;
     box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
@@ -11,7 +11,8 @@
     width: 100%;
 }
 
-.dm-vertical-menu-item{
+
+.dm-vertical-menu-item, .dm-tskbar-vertical-menu-item{
     height: fit-content;
     padding: 2px 0;
     background-color: #2b2b2b;
@@ -39,7 +40,7 @@
     margin: 0 8px;
 }
 
-.dm-empty-line-container {
+.dm-empty-line-container , .dm-tskbar-empty-line-container {
     max-height: 3px;
     min-height: 3px;
     background-color: #2b2b2b;
@@ -89,6 +90,27 @@ span.dm-tail{
 }
 
 /*Taskbar Menu CSS*/
+
+.dm-tskbar-empty-line-container{
+    background-color: transparent;
+}
+
+.dm-tskbar-vertical-menu{
+    background-color: rgba(41,41, 41, 0.7);
+    backdrop-filter: blur(30px);
+    z-index: 5;
+}
+
+.dm-tskbar-vertical-menu-cntnr{
+    width: 100%;
+}
+
+.dm-tskbar-vertical-menu-item{
+    background-color: transparent;
+    z-index: 5;
+}
+
+
 .dm-tskbar-head{
     max-width: 27%;
     padding-left: 5px;
@@ -131,7 +153,6 @@ span.dm-tail{
 .dm-tskbar-img-alt{
     height: 18px;
     width: 18px;
-
     position: relative;
 }
 

diff --git a/src/app/shared/system-component/menu/menu.component.html b/src/app/shared/system-component/menu/menu.component.html
@@ -49,18 +49,18 @@
 </ng-template>
 
 <ng-template #tskBarMenu>
-  <div class="dm-vertical-menu">
-    <div class="dm-empty-line-container"></div>
+  <div class="dm-tskbar-vertical-menu">
+    <div class="dm-tskbar-empty-line-container"></div>
 
-    <div lass="dm-vertical-menu-cntnr" *ngFor="let menuItem of generalMenu; let i = index">
-        <div class="dm-vertical-menu-item"  (click)="onMenuItemClick(menuItem.action)">
+    <div lass="dm-tskbar-vertical-menu-cntnr" *ngFor="let menuItem of generalMenu; let i = index">
+        <div class="dm-tskbar-vertical-menu-item"  (click)="onMenuItemClick(menuItem.action)">
             <div class="dm-tskbar-head"> <figure class="dm-tskbar-fig-cntxt-menu"><img *ngIf="menuItem.icon.length > 0" class="dm-tskbar-img-alt" [src]="menuItem.icon"/></figure></div>
             <div class="dm-tskbar-mid"><p class="dm-p">{{menuItem.label}}</p></div>
             <div class="dm-tskbar-tail"> <figure class="dm-tskbar-fig-cntxt-menu"> </figure> </div>
         </div>
     </div>
 
-    <div class="dm-empty-line-container"></div>
+    <div class="dm-tskbar-empty-line-container"></div>
   </div>
 
 </ng-template>

diff --git a/src/app/shared/system-component/menu/menu.component.ts b/src/app/shared/system-component/menu/menu.component.ts
@@ -46,6 +46,7 @@ export class MenuComponent implements OnDestroy{
       this._menuService.setPasteState(true);
     })
   }
+
 
   ngOnDestroy(): void {
     this._storeDataSub?.unsubscribe();

diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html
@@ -7,7 +7,7 @@
     <cos-menu [nestedMenu]="deskTopMenu" *ngIf="showDesktopCntxtMenu" [style]="dskTopCntxtMenuStyle" [menuType]="deskTopMenuOption"> </cos-menu>
     <cos-taskbarpreview  [fadeState]="tskBarPreviewWindowState" [name]="appToPreview" [icon]="appToPreviewIcon" *ngIf="showTskBarPreviewWindow"  [ngStyle]="tskBarPrevWindowStyle">  </cos-taskbarpreview>
     <cos-menu [generalMenu]="taskBarMenuData" *ngIf="showTskBarCntxtMenu" [style]="tskBarCntxtMenuStyle" [menuType]="tskBarMenuOption" [menuOrder]="menuOrder"> </cos-menu>
-    <!-- <cos-startmenu *ngIf="showStartMenu"></cos-startmenu> -->
-    <cos-startmenu ></cos-startmenu>
+    <cos-startmenu *ngIf="showStartMenu"></cos-startmenu>
+    <!-- <cos-startmenu ></cos-startmenu> -->
     <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
@@ -171,16 +171,16 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
   ngOnInit():void{
-    // this._scriptService.loadScript("vanta-waves","osdrive/Program-Files/Backgrounds/vanta.waves.min.js").then(() =>{
-    //   this._vantaEffect = VANTA.WAVES({
-    //     el: '#vanta',
-    //     color:this.defaultColor, //this._numSequence,
-    //     waveHeight:20,
-    //     shininess: 50,
-    //     waveSpeed:0.20,
-    //     // zoom:0.75,     
-    //   });
-    // })
+    this._scriptService.loadScript("vanta-waves","osdrive/Program-Files/Backgrounds/vanta.waves.min.js").then(() =>{
+      this._vantaEffect = VANTA.WAVES({
+        el: '#vanta',
+        color:this.defaultColor, //this._numSequence,
+        waveHeight:20,
+        shininess: 50,
+        waveSpeed:0.20,
+        // zoom:0.75,     
+      });
+    })
 
     this.getDesktopMenuData();
   }
@@ -552,8 +552,8 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
     file.setOpensWith = arg0;
 
     if(arg0 ==  this.markDownViewerApp){
-      file.setCurrentPath = '/Desktop';
-      file.setContentPath = '/Documents/Credits.md';
+      file.setCurrentPath = '/Users/Desktop';
+      file.setContentPath = '/Users/Documents/Credits.md';
     }
 
     this._triggerProcessService.startApplication(file);
@@ -677,13 +677,13 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
       this.tskBarCntxtMenuStyle = {
         'position':'absolute',
         'transform':`translate(${String(rect.x - 60)}px, ${String(rect.y - 68.5)}px)`,
-        'z-index': 2,
+        'z-index': 5,
       }
     }else {
       this.tskBarCntxtMenuStyle = {
         'position':'absolute',
         'transform':`translate(${String(rect.x - 60)}px, ${String(rect.y - 97.5)}px)`,
-        'z-index': 2,
+        'z-index': 5,
       }
     }
   }

diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -199,6 +199,7 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
       }
     }, this.SECONDS_DELAY[1]);
   }
+
   async runProcess(file:FileInfo):Promise<void>{
 
     console.log('filemanager-runProcess:',file)

diff --git a/src/app/system-apps/startmenu/startmenu.component.css b/src/app/system-apps/startmenu/startmenu.component.css
@@ -18,7 +18,7 @@
 .start-menu-main-overlay-icon-text-container{
     width: 48px;
     display: block;
-    backdrop-filter: blur(12px);
+    backdrop-filter: blur(10px);
 }
 
 .start-menu-main-overlay-icon-text-content{ 
@@ -61,39 +61,22 @@
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
-
 .start-menu-main-content-container{
     display:flex;
-    width: 315px;
+    width: 300px;
     height: 500px;
-    background-color: rgba(51,51, 51, 0.8);
-    backdrop-filter: blur(12px);
+    background-color: rgba(41,41, 41, 0.75);
+    backdrop-filter: blur(30px);
 }
 
-
-
 .start-menu-main-content-empty{
-    width: 15.24%;
+    width: 16%;
 }
 
 .start-menu-main-content-list-container{
-    width: 84.76%;
+    width: 84%;
 }
 
-
-
-
 .start-menu-main-content-list-content{
     width: 100%;
     height: 500px;
@@ -112,14 +95,13 @@
     border: 2px solid transparent;
 }
 
-
 .start-menu-list-btn{
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
     /* padding: 1rem 2rem; */
-    /* background-color: rgba(51, 51, 51, 0.8); */
+    /* background-color: rgba(51, 51, 51, 0); */
     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
@@ -69,7 +69,7 @@
             <div class="start-menu-main-content-list-content">
                 <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">
+                        <button class="start-menu-list-btn"  (click)="runProcess(file)">
                             <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
@@ -9,6 +9,7 @@ import { FileService } from 'src/app/shared/system-service/file.service';
 import { FileEntry } from 'src/app/system-files/file.entry';
 
 import { applyEffect } from "src/osdrive/Cheetah/System/Fluent Effect";
+import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 
 @Component({
   selector: 'cos-startmenu',
@@ -18,6 +19,7 @@ import { applyEffect } from "src/osdrive/Cheetah/System/Fluent Effect";
 export class StartMenuComponent implements OnInit, AfterViewInit {
   private _processIdService:ProcessIDService;
   private _runningProcessService:RunningProcessService;
+  private _triggerProcessService:TriggerProcessService;
   private _fileService:FileService;
 
   private _elRef:ElementRef;
@@ -40,11 +42,13 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
   type = ComponentType.System
   displayName = '';
 
-  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService, elRef: ElementRef, fileService:FileService) { 
+  constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService, triggerProcessService:TriggerProcessService,
+              elRef: ElementRef, fileService:FileService) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this._elRef = elRef;
     this._fileService = fileService;
+    this._triggerProcessService = triggerProcessService;
 
     this.processId = this._processIdService.getNewProcessId()
     this._runningProcessService.addProcess(this.getComponentDetail());
@@ -145,8 +149,8 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
 
     applyEffect('.start-menu-list-ol', {
       clickEffect: true,
-      lightColor: 'rgba(255,255,255,0.6)',
-      gradientSize: 80,
+      lightColor: 'rgba(255,255,255,0.1)',
+      gradientSize: 35,
       isContainer: true,
       children: {
         borderSelector: '.start-menu-list-li',
@@ -157,18 +161,18 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     })
 
 
-    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
-      }
-    })
+    // 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
+    //   }
+    // })
   }
 
 
@@ -186,6 +190,11 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
     }
   }
 
+  async runProcess(file:FileInfo):Promise<void>{
+    console.log('startmanager-runProcess:',file)
+    this._triggerProcessService.startApplication(file);
+
+  }
 
 
   private getComponentDetail():Process{

diff --git a/src/app/system-apps/taskbar/taskbar.component.css b/src/app/system-apps/taskbar/taskbar.component.css
@@ -1,6 +1,6 @@
 .task-bar-nav{
-    background-color: rgba(51, 51, 51, 0.6);
-    backdrop-filter: blur(5px);
+    background-color: rgba(41,41, 41, 0.6);
+    backdrop-filter: blur(10px);
     bottom: 0;
     height: 40px;
     left: 0;

diff --git a/src/app/system-apps/taskbarpreview/taskbarpreview.component.css b/src/app/system-apps/taskbarpreview/taskbarpreview.component.css
@@ -1,7 +1,7 @@
 .taskbar-preview-main-container{
-    background-color:  rgba(0, 0, 0, 0.6);
+    background-color:  rgba(41, 41, 41, 0.6);
     backdrop-filter: blur(5px);
-    border: 0.2px solid  rgba(0, 0, 0, 0.6);
+    border: 0.2px solid  rgba(41, 41, 41, 0.6);
     position: absolute;
     display: inline-flex;
     z-index: 2;

diff --git a/src/scripts/backgrounds/three.min.js → ...drive/Cheetah/System/ThreeJS/three.min.js b/src/scripts/backgrounds/three.min.js → ...drive/Cheetah/System/ThreeJS/three.min.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,7 @@ export class MenuComponent implements OnDestroy{ @@
           this._menuService.setPasteState(true);
         })
       }
       ngOnDestroy(): void {
         this._storeDataSub?.unsubscribe();
@@ Expand Down @@