2018-04-08 06:30:04 +02:00
|
|
|
import {
|
|
|
|
animate,
|
|
|
|
group,
|
|
|
|
query,
|
2018-04-14 04:10:27 +02:00
|
|
|
style,
|
2018-04-08 06:30:04 +02:00
|
|
|
transition,
|
2018-04-14 04:10:27 +02:00
|
|
|
trigger,
|
2018-04-08 06:30:04 +02:00
|
|
|
} from '@angular/animations';
|
|
|
|
|
|
|
|
const queryShown = query(':enter, :leave', [
|
2018-04-09 15:51:22 +02:00
|
|
|
style({ position: 'fixed', width: '100%', height: '100%' }),
|
|
|
|
], { optional: true });
|
|
|
|
|
|
|
|
// ref: https://github.com/angular/angular/issues/15477
|
|
|
|
const queryChildRoute = query('router-outlet ~ *', [
|
|
|
|
style({}),
|
|
|
|
animate(1, style({})),
|
2018-04-08 06:30:04 +02:00
|
|
|
], { optional: true });
|
|
|
|
|
2018-04-09 15:01:21 +02:00
|
|
|
const speed = '0.4s';
|
2018-04-08 06:30:04 +02:00
|
|
|
|
|
|
|
export function queryTranslate(direction: string, axis: string, from: number, to: number, zIndex: number = 1000) {
|
|
|
|
return query(':' + direction, [
|
|
|
|
style({ transform: 'translate' + axis + '(' + from + '%)', zIndex: zIndex, boxShadow: '0 3px 2px -2px gray' }),
|
|
|
|
animate(speed + ' ease-in-out', style({ transform: 'translate' + axis + '(' + to + '%)' })),
|
|
|
|
], { optional: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
export function queryTranslateX(direction: string, from: number, to: number, zIndex: number = 1000) {
|
|
|
|
return queryTranslate(direction, 'X', from, to, zIndex);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function queryTranslateY(direction: string, from: number, to: number, zIndex: number = 1000) {
|
|
|
|
return queryTranslate(direction, 'Y', from, to, zIndex);
|
|
|
|
}
|
|
|
|
|
|
|
|
const inSlideLeft = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateX('enter', 100, 0),
|
|
|
|
queryTranslateX('leave', 0, -100),
|
2018-04-09 15:51:22 +02:00
|
|
|
queryChildRoute,
|
2018-04-08 06:30:04 +02:00
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
const outSlideRight = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateX('enter', -100, 0),
|
|
|
|
queryTranslateX('leave', 0, 100),
|
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
const inSlideUp = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateY('enter', 100, 0, 1010),
|
|
|
|
queryTranslateY('leave', 0, 0),
|
2018-04-09 15:51:22 +02:00
|
|
|
queryChildRoute,
|
2018-04-08 06:30:04 +02:00
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
const outSlideDown = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateY('enter', 0, 0),
|
|
|
|
queryTranslateY('leave', 0, 100, 1010),
|
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
const inSlideDown = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateY('enter', -100, 0, 1010),
|
|
|
|
queryTranslateY('leave', 0, 0),
|
2018-04-09 15:51:22 +02:00
|
|
|
queryChildRoute,
|
2018-04-08 06:30:04 +02:00
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
const outSlideUp = [
|
|
|
|
queryShown,
|
|
|
|
group([
|
|
|
|
queryTranslateY('enter', 0, 0),
|
|
|
|
queryTranslateY('leave', 0, -100, 1010),
|
|
|
|
]),
|
|
|
|
];
|
|
|
|
|
|
|
|
export const routerTransition = trigger('routerTransition', [
|
2018-04-10 23:14:10 +02:00
|
|
|
transition('void => home', inSlideLeft),
|
|
|
|
transition('void => tabs', inSlideLeft),
|
|
|
|
|
2018-04-14 20:29:25 +02:00
|
|
|
transition('home => environment, home => login, home => register', inSlideUp),
|
2018-04-08 06:30:04 +02:00
|
|
|
|
2018-04-14 20:29:25 +02:00
|
|
|
transition('login => home', outSlideDown),
|
2018-04-08 06:30:04 +02:00
|
|
|
transition('login => hint', inSlideUp),
|
2018-04-10 22:32:48 +02:00
|
|
|
transition('login => tabs, login => 2fa', inSlideLeft),
|
|
|
|
|
2018-04-14 20:29:25 +02:00
|
|
|
transition('hint => login, register => home, environment => home', outSlideDown),
|
2018-04-10 23:14:10 +02:00
|
|
|
|
2018-04-10 22:32:48 +02:00
|
|
|
transition('2fa => login', outSlideRight),
|
|
|
|
transition('2fa => 2fa-options', inSlideUp),
|
|
|
|
transition('2fa-options => 2fa', outSlideDown),
|
|
|
|
transition('2fa => tabs', inSlideLeft),
|
|
|
|
|
2018-04-09 15:51:22 +02:00
|
|
|
transition('tabs => ciphers', inSlideLeft),
|
|
|
|
transition('ciphers => tabs', outSlideRight),
|
|
|
|
|
|
|
|
transition('tabs => view-cipher, ciphers => view-cipher', inSlideUp),
|
|
|
|
transition('view-cipher => tabs, view-cipher => ciphers', outSlideDown),
|
|
|
|
|
|
|
|
transition('view-cipher => edit-cipher', inSlideUp),
|
2018-04-13 06:23:05 +02:00
|
|
|
transition('edit-cipher => view-cipher, edit-cipher => tabs', outSlideDown),
|
2018-04-09 15:51:22 +02:00
|
|
|
|
|
|
|
transition('tabs => add-cipher, ciphers => add-cipher', inSlideUp),
|
|
|
|
transition('add-cipher => tabs, add-cipher => ciphers', outSlideDown),
|
2018-04-09 23:35:16 +02:00
|
|
|
|
2018-04-11 05:03:29 +02:00
|
|
|
transition('generator => generator-history, tabs => generator-history', inSlideLeft),
|
|
|
|
transition('generator-history => generator, generator-history => tabs', outSlideRight),
|
2018-04-09 23:35:16 +02:00
|
|
|
|
2018-04-11 05:03:29 +02:00
|
|
|
transition('add-cipher => generator, edit-cipher => generator', inSlideUp),
|
|
|
|
transition('generator => add-cipher, generator => edit-cipher', outSlideDown),
|
2018-04-10 01:05:36 +02:00
|
|
|
|
2018-04-11 19:51:09 +02:00
|
|
|
transition('edit-cipher => attachments', inSlideLeft),
|
|
|
|
transition('attachments => edit-cipher', outSlideRight),
|
|
|
|
|
2018-04-11 05:03:29 +02:00
|
|
|
transition('tabs => export', inSlideLeft),
|
|
|
|
transition('export => tabs', outSlideRight),
|
2018-04-10 22:20:49 +02:00
|
|
|
|
2018-04-13 06:06:48 +02:00
|
|
|
transition('tabs => folders', inSlideLeft),
|
|
|
|
transition('folders => tabs', outSlideRight),
|
|
|
|
|
|
|
|
transition('folders => edit-folder, folders => add-folder', inSlideUp),
|
|
|
|
transition('edit-folder => folders, add-folder => folders', outSlideDown),
|
|
|
|
|
2018-04-10 22:20:49 +02:00
|
|
|
transition('tabs => lock', inSlideDown),
|
2018-04-13 17:49:03 +02:00
|
|
|
|
|
|
|
transition('tabs => sync', inSlideLeft),
|
|
|
|
transition('sync => tabs', outSlideRight),
|
2018-04-13 19:18:56 +02:00
|
|
|
|
2018-04-13 20:19:33 +02:00
|
|
|
transition('tabs => options', inSlideLeft),
|
|
|
|
transition('options => tabs', outSlideRight),
|
|
|
|
|
2018-04-13 19:18:56 +02:00
|
|
|
transition('tabs => premium', inSlideLeft),
|
|
|
|
transition('premium => tabs', outSlideRight),
|
2018-04-08 06:30:04 +02:00
|
|
|
]);
|