From 1d25831e0c20297b4303e4d1a62084193a7321e5 Mon Sep 17 00:00:00 2001 From: Richard Park Date: Mon, 25 Nov 2019 16:48:06 +0900 Subject: [PATCH] splash is modified --- .../src/app/app.component.ts | 3 +- .../native/components/top-bar.component.scss | 4 +- .../src/assets/scss/partials/splash.css | 3 + projects/ucap-webmessenger-app/src/index.html | 83 +++++++++++++---- .../services/splash-screen.service.spec.ts | 12 +++ .../src/lib/services/splash-screen.service.ts | 88 +++++++++++++++++++ .../src/lib/ucap-ui.module.ts | 4 +- .../ucap-webmessenger-ui/src/public-api.ts | 1 + 8 files changed, 177 insertions(+), 21 deletions(-) create mode 100644 projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.spec.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts diff --git a/projects/ucap-webmessenger-app/src/app/app.component.ts b/projects/ucap-webmessenger-app/src/app/app.component.ts index 54476187..e80551de 100644 --- a/projects/ucap-webmessenger-app/src/app/app.component.ts +++ b/projects/ucap-webmessenger-app/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { SplashScreenService } from '@ucap-webmessenger/ui'; @Component({ selector: 'app-root', @@ -6,5 +7,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'] }) export class AppComponent { - title = 'ucap-webmessenger-app'; + constructor(private splashScreenService: SplashScreenService) {} } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss index f84b82d9..db4379de 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss @@ -15,8 +15,8 @@ //border-bottom: 1px solid #d5dadb; .app-layout-native-title-bar-logo { - width: 16px; - height: 16px; + width: 32px; + height: 32px; } .app-layout-native-title-bar-title { diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css index 31b9f485..da815e5c 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css +++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css @@ -1,6 +1,9 @@ .wrapper-splash { + position: absolute; + z-index: 99999; width: 100%; height: 100%; + pointer-events: none; background-size: cover; height: 100%; background: #eaeff1; diff --git a/projects/ucap-webmessenger-app/src/index.html b/projects/ucap-webmessenger-app/src/index.html index 4253f4e1..f6c40e3d 100644 --- a/projects/ucap-webmessenger-app/src/index.html +++ b/projects/ucap-webmessenger-app/src/index.html @@ -12,36 +12,85 @@ -
- - - - +
+ + + + - + L146.48,87.02z" + /> - + - + - + - +
Welcome to M-Messenger
-
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.spec.ts b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.spec.ts new file mode 100644 index 00000000..97fb5eb4 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { BottomSheetService } from './bottom-sheet.service'; + +describe('ui::BottomSheetService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: BottomSheetService = TestBed.get(BottomSheetService); + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts new file mode 100644 index 00000000..3463c7f5 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts @@ -0,0 +1,88 @@ +import { Injectable, Inject } from '@angular/core'; +import { + animate, + AnimationBuilder, + AnimationPlayer, + style +} from '@angular/animations'; +import { DOCUMENT } from '@angular/common'; +import { Router, NavigationEnd } from '@angular/router'; +import { filter, take } from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class SplashScreenService { + splashScreenEl: any; + player: AnimationPlayer; + + public constructor( + private animationBuilder: AnimationBuilder, + @Inject(DOCUMENT) private document: Document, + private router: Router + ) { + this.init(); + } + + private init(): void { + // Get the splash screen element + this.splashScreenEl = this.document.body.querySelector('#splash-screen'); + + // If the splash screen element exists... + if (this.splashScreenEl) { + // Hide it on the first NavigationEnd event + this.router.events + .pipe( + filter(event => event instanceof NavigationEnd), + take(1) + ) + .subscribe(() => { + setTimeout(() => { + this.hide(); + }); + }); + } + } + + /** + * Show the splash screen + */ + show(): void { + this.player = this.animationBuilder + .build([ + style({ + opacity: '0', + zIndex: '99999' + }), + animate('400ms ease', style({ opacity: '1' })) + ]) + .create(this.splashScreenEl); + + setTimeout(() => { + this.player.play(); + }, 0); + } + + /** + * Hide the splash screen + */ + hide(): void { + this.player = this.animationBuilder + .build([ + style({ opacity: '1' }), + animate( + '400ms ease', + style({ + opacity: '0', + display: 'none', + zIndex: '-10' + }) + ) + ]) + .create(this.splashScreenEl); + + setTimeout(() => { + this.player.play(); + }, 0); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index 37185d4d..d6c159ab 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts @@ -30,6 +30,7 @@ import { BottomSheetService } from './services/bottom-sheet.service'; import { ClipboardService } from './services/clipboard.service'; import { DialogService } from './services/dialog.service'; import { SnackBarService } from './services/snack-bar.service'; +import { SplashScreenService } from './services/splash-screen.service'; import { ClickOutsideDirective } from './directives/click-outside.directive'; import { FileUploadForDirective } from './directives/file-upload-for.directive'; @@ -83,7 +84,8 @@ const SERVICES = [ BottomSheetService, ClipboardService, DialogService, - SnackBarService + SnackBarService, + SplashScreenService ]; @NgModule({ diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts index 39f04b1a..81892d49 100644 --- a/projects/ucap-webmessenger-ui/src/public-api.ts +++ b/projects/ucap-webmessenger-ui/src/public-api.ts @@ -26,6 +26,7 @@ export * from './lib/services/bottom-sheet.service'; export * from './lib/services/clipboard.service'; export * from './lib/services/dialog.service'; export * from './lib/services/snack-bar.service'; +export * from './lib/services/splash-screen.service'; export * from './lib/types/file-viewer.type';