diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a9229f29..2c738f9c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AngularDraggableModule } from 'ngx-draggable-resize'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { TitleComponent } from './user-apps/title/title.component'; @@ -46,7 +47,8 @@ import { TaskBarEntryHighlightDirective } from './shared/system-directive/taskba ], imports: [ BrowserModule, - AngularDraggableModule + AngularDraggableModule, + BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/system-apps/window/window.component.ts b/src/app/system-apps/window/window.component.ts index ea23e51c..d294a2f4 100644 --- a/src/app/system-apps/window/window.component.ts +++ b/src/app/system-apps/window/window.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnInit, OnDestroy, ElementRef, AfterViewInit,OnChanges, ViewChild, ChangeDetectorRef, SimpleChanges } from '@angular/core'; + import { ComponentType } from 'src/app/system-files/component.types'; import { RunningProcessService } from 'src/app/shared/system-service/running.process.service'; import { Subscription } from 'rxjs'; @@ -31,7 +32,6 @@ import { WindowState } from 'src/app/system-files/state/windows.state'; processId = 0; type = ComponentType.systemComponent; displayName = ''; - windowHide = false; windowMaximize = false; diff --git a/src/app/user-apps/title/title.component.html b/src/app/user-apps/title/title.component.html index 379077ad..3c8c6483 100644 --- a/src/app/user-apps/title/title.component.html +++ b/src/app/user-apps/title/title.component.html @@ -1,8 +1,15 @@ - +
+

Hello, World!

+
+ + diff --git a/src/app/user-apps/title/title.component.ts b/src/app/user-apps/title/title.component.ts index a548c727..2bcdf77f 100644 --- a/src/app/user-apps/title/title.component.ts +++ b/src/app/user-apps/title/title.component.ts @@ -4,10 +4,49 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro import { BaseComponent } from 'src/app/system-base/base/base.component'; import { ComponentType } from 'src/app/system-files/component.types'; import { Process } from 'src/app/system-files/process'; +import { trigger, transition, state, animate, style, AnimationEvent } from '@angular/animations'; @Component({ - selector:'cos-title', + selector:'cos-title', templateUrl: './title.component.html', + animations: [ + trigger('openClose', [ + //... + state('open', style({ + // height: '200px', + opacity: 1, + backgroundColor: 'yellow' + })), + state('closed', style({ + // height: '100px', + // opacity: 0.8, + // backgroundColor: 'blue' + })), + transition('open => closed', [ + animate('10s') + ]), + transition('closed => open', [ + animate('9.5s') + ]), + transition('* => closed', [ + animate('10s') + ]), + transition('* => open', [ + animate('9.5s') + ]), + transition('open <=> closed', [ + animate('9.5s') + ]), + transition ('* => open', [ + animate ('10s', + style ({ opacity: '*' }), + ), + ]), + transition('* => *', [ + animate('10s') + ]), + ]), + ], styleUrls: ["./title.component.css"] }) @@ -24,6 +63,7 @@ export class TitleComponent implements BaseComponent{ processId = 0; type = ComponentType.userComponent; displayName = 'Hello'; + onOpen = true; constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService) { this._processIdService = processIdService; @@ -32,6 +72,29 @@ export class TitleComponent implements BaseComponent{ this._runningProcessService.addProcess(this.getComponentDetail()); } + + + onAnimationEvent(event: AnimationEvent) { + + // 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}`); + } + private getComponentDetail():Process{ return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type) }