Skip to content

Commit

Permalink
start menu overlay works a bit better
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Oct 3, 2024
1 parent 0533256 commit 71f0da9
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 60 deletions.
4 changes: 2 additions & 2 deletions src/app/system-apps/desktop/desktop.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
20 changes: 10 additions & 10 deletions src/app/system-apps/desktop/desktop.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
22 changes: 20 additions & 2 deletions src/app/system-apps/startmenu/startmenu.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,29 @@
top: 0px;
}














.start-menu-main-content-container{
display:flex;
width: 315px;
height: 500px;
background-color: rgba(51,51, 51, 1);
background-color: rgba(51,51, 51, 0.8);
backdrop-filter: blur(12px);
}



.start-menu-main-content-empty{
width: 15.24%;
}
Expand All @@ -76,6 +91,9 @@
width: 84.76%;
}




.start-menu-main-content-list-content{
width: 100%;
height: 500px;
Expand All @@ -98,7 +116,7 @@
.start-menu-list-btn{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
/* padding: 1rem 2rem; */
background-color: rgba(51, 51, 51, 1);
/* background-color: rgba(51, 51, 51, 0.8); */
color: #fff;
border: 0;
transition: all 200ms ease;
Expand Down
112 changes: 67 additions & 45 deletions src/app/system-apps/startmenu/startmenu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
txtOverlayMenuStyle:Record<string, unknown> = {};
private SECONDS_DELAY = 250;

delayStartMenuOverlayHideTimeoutId!: NodeJS.Timeout;
delayStartMenuOverlayShowTimeoutId!: NodeJS.Timeout;

startMenuFiles:FileInfo[] = [];
private _startMenuDirectoryFilesEntries!:FileEntry[];
directory ='/AppData/StartMenu';
Expand Down Expand Up @@ -54,7 +57,7 @@ export class StartMenuComponent implements OnInit, AfterViewInit {

setTimeout(async () => {
await this.loadFilesInfoAsync();
}, 100);
}, 1000);
//
this.removeVantaJSSideEffect();
}
Expand All @@ -73,65 +76,84 @@ export class StartMenuComponent implements OnInit, AfterViewInit {
}, this.SECONDS_DELAY);
}



// Show Overlay Function
startMenuOverlaySlideOut(): void {
console.log('IN');


clearTimeout(this.delayStartMenuOverlayHideTimeoutId);

const smIconTxtOverlay = document.getElementById('sm-IconText-Overlay-Cntnr') as HTMLElement;

if (smIconTxtOverlay) {
// Set initial position and visibility
smIconTxtOverlay.style.width = '48px';

// Allow the browser to calculate the layout before applying the animation
smIconTxtOverlay.style.transition = 'width 0.4s ease'; // Set the transition for left
smIconTxtOverlay.style.width = '248px'; // Animate to 248px
smIconTxtOverlay.style.transitionDelay = '1s';
//smIconTxtOverlay.style.backgroundColor = 'rgba(33,33, 33, 0.6)';

setTimeout(() => {
smIconTxtOverlay.style.boxShadow = '0px 2px 4px rgba(0, 0, 0, 0.6)';
this.txtOverlayMenuStyle = {
'display': 'flex'
}
}, 1400); // Use a small timeout to ensure styles are applied in the correct order
}

// Clear the show timeout as well if needed
clearTimeout(this.delayStartMenuOverlayShowTimeoutId);

// Begin the show process
this.delayStartMenuOverlayShowTimeoutId = setTimeout(() => {
if (smIconTxtOverlay) {
// Set initial position and visibility
smIconTxtOverlay.style.width = '48px';
smIconTxtOverlay.style.transition = 'width 0.3s ease'; // Set transition
smIconTxtOverlay.style.width = '248px'; // Animate to 248px
smIconTxtOverlay.style.transitionDelay = '0.75s';

// Box-shadow animation after expansion
smIconTxtOverlay.addEventListener('transitionend', () => {
smIconTxtOverlay.style.boxShadow = '0px 2px 4px rgba(0, 0, 0, 0.6)';
this.txtOverlayMenuStyle = { 'display': 'flex' }; // Make visible after slide out
}, { once: true });
}
}, 500); // Delay the start of the animation
}

// Hide Overlay Function
startMenuOverlaySlideIn(): void {
console.log('OUT');

clearTimeout(this.delayStartMenuOverlayShowTimeoutId);

const smIconTxtOverlay = document.getElementById('sm-IconText-Overlay-Cntnr') as HTMLElement;

if (smIconTxtOverlay) {
// Ensure the element has the transition property set for smooth animation
smIconTxtOverlay.style.transition = 'width 0.75s ease';
smIconTxtOverlay.style.width = '48px';
smIconTxtOverlay.style.boxShadow = 'none';
//smIconTxtOverlay.style.backgroundColor = 'transparent';

// After the transition ends, hide the element
setTimeout(() => {
this.txtOverlayMenuStyle = {
'display': 'none'
}
}, 300); // Set this to match the transition duration (.3s)
}
// Clear the hide timeout if necessary
clearTimeout(this.delayStartMenuOverlayHideTimeoutId);

// Begin the hide process
this.delayStartMenuOverlayHideTimeoutId = setTimeout(() => {
if (smIconTxtOverlay ) {
// Start shrinking animation
smIconTxtOverlay.style.transition = 'width 0.3s ease';
smIconTxtOverlay.style.width = '48px';
smIconTxtOverlay.style.boxShadow = 'none';

// Once transition ends, hide the overlay
smIconTxtOverlay.addEventListener('transitionstart', () => {
this.txtOverlayMenuStyle = { 'display': 'none' }; // Hide after slide in
}, { once: true });
}
}, 250); // Add a slight delay to match the UX behavior
}


onBtnHover():void{
// applyEffect('.start-menu-list-btn', {
// 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-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
// }
// })
}

onBtnExit():void{
Expand Down
Loading

0 comments on commit 71f0da9

Please sign in to comment.