some window css fixes

chinonso098 · Oct 26, 2023 · 181b371 · 181b371
1 parent 22b61f9
commit 181b371
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 56 deletions.
diff --git a/src/app/system-apps/window/animation/animations.ts b/src/app/system-apps/window/animation/animations.ts
@@ -1,4 +1,4 @@
-import {trigger, transition, state, animate, style} from '@angular/animations';
+import {trigger, transition, state, animate, style, keyframes} from '@angular/animations';
 
   // Routable animations
     export const openCloseAnimation =
@@ -15,9 +15,13 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
                 }))
             ]),
             transition('open => *', [
-                animate("250ms ease-out", style({
-                    opacity: 0.5,
-                }))
+                animate("250s ease-out", keyframes([
+                    style({ transform: 'translate(0, 0)', opacity: 1 }),
+                    style({ transform: 'translate(-25, 25)', opacity: 0.75}),
+                    style({ transform: 'translate(-50, 50)', opacity: 0.50}),
+                    style({ transform: 'translate(-75, 75)', opacity: 0.25 }),
+                    style({ transform: 'translate(-100, 100)', opacity: 0 })
+                ]))
             ])
         ]);
 
@@ -37,9 +41,13 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
                 }))
             ]),
             transition('visible => hidden', [
-                animate("250ms ease-out", style({
-                    opacity: 0.5,
-                }))
+                animate("250s ease-out", keyframes([
+                    style({ transform: 'translate(0, 0)', opacity: 1 }),
+                    style({ transform: 'translate(-25, 25)', opacity: 0.75}),
+                    style({ transform: 'translate(-50, 50)', opacity: 0.50}),
+                    style({ transform: 'translate(-75, 75)', opacity: 0.25 }),
+                    style({ transform: 'translate(-100, 100)', opacity: 0 })
+                ]))
             ])
         ]);
 
@@ -49,8 +57,7 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
             state('minimize, minimized', style({
                 opacity: 1
             })),
-            transition('minimized => maximized', animate('250ms ease-out')),
+            transition('minimized => maximized', animate('250ms ease-in')),
             transition('maximized => minimized', animate('250ms ease-in')),
-
         ]);
 
diff --git a/src/app/system-apps/window/window.component.css b/src/app/system-apps/window/window.component.css
@@ -7,10 +7,11 @@
     position: absolute;
     min-width: 20%;
     min-height: 5%;
-    top: 20%;
-    left: 50%;
-    margin-top: -50px;
-    margin-left: -100px;
+    max-width: 100%;  /*Set the width of the parent container */
+    max-height: 100vh;  /*Set the height of the parent container */
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%); /* Move the element back by 50% of its own width and height */
     outline: 1px hsl(0deg 0% 20%/70%);
     overflow:hidden
   }

diff --git a/src/app/system-apps/window/window.component.ts b/src/app/system-apps/window/window.component.ts
@@ -100,16 +100,9 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
       const windowState = this._stateManagmentService.getState(this.processId) as WindowState;
       if(this.windowHide){
         if(windowState.getPid == this.processId){
-          this.currentStyles = {
-            // 'display': 'none' 
-            //opacity: 0
-          };
-
+         // this.currentStyles = { // 'display': 'none'  //opacity: 0 };
           windowState.setIsVisible = false;
           this._stateManagmentService.addState(this.processId,windowState);
-
-          console.log('Stuff is supposed to vanish')
-          //this._winAnimationSerice.hideOrShowWindowNotify.next();
         }
       }
       else if(!this.windowHide){
@@ -120,11 +113,8 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
             'transform': `translate(${String(windowState.getXAxis)}px, ${String(windowState.getYAxis)}px)`,
              'z-index': windowState.getZIndex
           };
-
-          console.log('Stuff is supposed to appear')
           windowState.setIsVisible = true;
           this._stateManagmentService.addState(this.processId,windowState);
-          //this._winAnimationSerice.hideOrShowWindowNotify.next();
         }
       }
     }
@@ -135,23 +125,24 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
       if(this.windowMaximize){
         if(windowState.getPid == this.processId){
           this.currentStyles = {
-            'transform': 'translate(0px,0px)',
-            'max-width': '100%',
-            'max-height': 'calc(100% - 40px)', //This accounts for the taskbar height
-            'top': '5.4%',
-            'left': '7.5%',
+            'transform': 'translate(0,0)',
+            'width': '100%',
+            'height': 'calc(100% - 40px)', //This accounts for the taskbar height
+            'top': '0',
+            'left': '0',
             'right': '0',
-            'bottom': '4%', //This accounts for the taskbar height
+            'bottom': '0', //This accounts for the taskbar height
             'z-index': windowState.getZIndex
           };
         }
       }
       else if(!this.windowMaximize){
         if(windowState.getPid == this.processId){
+          console.log('back to normal size:',windowState);
           this.currentStyles = {
             'display': 'block',
-            'width': `${String(windowState.getWidth)}`, 
-            'height': `${String(windowState.getHeight)}`, 
+            'width': `${String(windowState.getWidth)}px`, 
+            'height': `${String(windowState.getHeight)}px`, 
             'transform': `translate(${String(windowState.getXAxis)}px, ${String(windowState.getYAxis)}px)`,
             'z-index': windowState.getZIndex
           };
@@ -181,7 +172,7 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
           'background-color':'blue'
         };
       }
-  }
+    }
 
     onHideBtnClick():void{
       // a hide button, should just hide the window. not change the size of the window
@@ -289,7 +280,6 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
       }
     }
 
-
    setWindowToFocusById(pid:number):void{
 
       let z_index = this._stateManagmentService.getState(this.z_index) as number;
@@ -327,26 +317,4 @@ import {openCloseAnimation, hideShowAnimation, minimizeMaximizeAnimation} from '
       }
    }
 
-
-   onAnimationEvent(event: AnimationEvent):void {
-
-    // openClose is trigger name in this example
-    console.warn(`Animation Trigger: ${event.triggerName}`);
-
-    // phaseName is "start" or "done"
-    console.warn(`Phase: ${event.phaseName}`);
-
-    // in our example, totalTime is 1000 (number of milliseconds in a second)
-    console.warn(`Total time: ${event.totalTime}`);
-
-    // in our example, fromState is either "open" or "closed"
-    console.warn(`From: ${event.fromState}`);
-
-    // in our example, toState either "open" or "closed"
-    console.warn(`To: ${event.toState}`);
-
-    // the HTML element itself, the button in this case
-    console.warn(`Element: ${event.element}`);
-  }
-
 }