ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

splash is modified

Browse Source
This commit is contained in:
병준 박 2019-11-25 16:48:06 +09:00
parent 6a812a2240
commit 1d25831e0c
8 changed files with 177 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
projects/ucap-webmessenger-app/src/app/app.component.ts
View File

@ -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) {}
}

4
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -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 {

3
projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
View File

@ -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;

83
projects/ucap-webmessenger-app/src/index.html
View File

@ -12,36 +12,85 @@
<body class="theme-default">
<app-root></app-root>
<div class="wrapper-splash">
<svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120" class="svg-img">
<path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
<animate attributeName="stroke-dasharray" attributeType="XML" from="500, 50" to="450 50" begin="0s" dur="2s"
repeatCount="indefinite" />
<animate attributeName="stroke-dashoffset" attributeType="XML" from="-40" to="-540" begin="0s" dur="2s"
repeatCount="indefinite" />
<div class="wrapper-splash" id="splash-screen">
<svg
version="1.1"
id="preloader"
x="0px"
y="0px"
width="240px"
height="120px"
viewBox="0 0 240 120"
class="svg-img"
>
<path
id="loop-normal"
class="st1"
d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z"
>
<animate
attributeName="stroke-dasharray"
attributeType="XML"
from="500, 50"
to="450 50"
begin="0s"
dur="2s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-dashoffset"
attributeType="XML"
from="-40"
to="-540"
begin="0s"
dur="2s"
repeatCount="indefinite"
/>
</path>
<path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
<path
id="loop-offset"
d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
L146.48,87.02z" />
L146.48,87.02z"
/>
<path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z" />
<path
id="socket"
d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"
/>
<path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z" />
<path
id="plug"
d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"
/>
<animateMotion xlink:href="#plug" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<animateMotion
xlink:href="#plug"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1"
>
<mpath xlink:href="#loop-normal" />
</animateMotion>
<animateMotion xlink:href="#socket" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1">
<animateMotion
xlink:href="#socket"
dur="2s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"
keySplines="0.42, 0, 0.58, 1"
>
<mpath xlink:href="#loop-offset" />
</animateMotion>
</svg>
<div class="credit">Welcome to M-Messenger</div>
</div>
</body>
</html>

12
projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.spec.ts Normal file
View File

@ -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();
});
});

88
projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts Normal file
View File

@ -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);
}
}

4
projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
View File

@ -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({

1
projects/ucap-webmessenger-ui/src/public-api.ts
View File

@ -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';