start sliding transition between pages

This commit is contained in:
Tykayn 2021-05-18 11:21:40 +02:00 committed by tykayn
parent 11a0245890
commit 71d139f177
10 changed files with 72 additions and 25 deletions

View File

@ -7,8 +7,8 @@
<div id="big_container" [class]="themeClass">
<div class="container">
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
<main>
<router-outlet></router-outlet>
<main [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet></router-outlet>
<div class="padded" *ngIf="devModeEnabled">
<br />
<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu

View File

@ -6,12 +6,14 @@ import { environment } from '../environments/environment';
import { Theme } from './core/enums/theme.enum';
import { LanguageService } from './core/services/language.service';
import { ThemeService } from './core/services/theme.service';
import { NavigationEnd, Router } from '@angular/router';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { slideInAnimation } from './shared/animations/main';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [slideInAnimation],
})
export class AppComponent implements OnInit, OnDestroy {
public appTitle: string = environment.appTitle;
@ -69,4 +71,8 @@ export class AppComponent implements OnInit, OnDestroy {
public toggleSidebar(status: boolean): void {
this.isSidebarOpened = status === true;
}
prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
}
}

View File

@ -9,17 +9,14 @@
</a>
</div>
<div class="navbar-start">
<a
class="navbar-item button is-primary"
role="button"
routerLink="/administration"
routerLinkActive="is-active"
>
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'config.title' | translate }}
</div>
</a>
<span class="navbar-item">
<a class="button is-primary" role="button" routerLink="/administration" routerLinkActive="is-active">
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'config.title' | translate }}
</div>
</a>
</span>
</div>
<div class="navbar-end">
<!-- navbar items -->
@ -88,13 +85,6 @@
aujourdhui-ou-demain
</em>
</a>
<a class="navbar-item" [routerLink]="['/poll/citron/hash/consultation']" routerLinkActive="is-primary">
<em>
citron
</em>
sans pass
</a>
<a
class="navbar-item"
[routerLink]="['/poll/citron/consultation/1c01ed9c94fc640a1be864f197ff808c']"

View File

@ -6,4 +6,9 @@
width: 4em;
text-align: center;
}
.navbar-item {
.fa {
margin-right: 1ch;
}
}
}

View File

@ -5,7 +5,7 @@ import { AdministrationComponent } from './administration.component';
import { NamingComponent } from './naming/naming.component';
const routes: Routes = [
{ path: '', component: AdministrationComponent },
{ path: '', component: AdministrationComponent, data: { animation: 'AdminPage' } },
{ path: 'naming', component: NamingComponent },
];

View File

@ -4,11 +4,13 @@ import { Subscription } from 'rxjs';
import { Poll } from '../../core/models/poll.model';
import { DOCUMENT } from '@angular/common';
import { slideInAnimation } from '../../shared/animations/main';
@Component({
selector: 'app-administration',
templateUrl: './administration.component.html',
styleUrls: ['./administration.component.scss'],
animations: [slideInAnimation],
})
export class AdministrationComponent implements OnInit, OnDestroy {
public poll: Poll;

View File

@ -10,13 +10,14 @@ import { PrivacyComponent } from './features/shared/components/ui/static-pages/p
import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '', component: HomeComponent, data: { animation: 'HomePage' } },
{
path: 'user',
loadChildren: () => import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule),
},
{
path: 'administration',
data: { animation: 'AdminPage' },
loadChildren: () =>
import('./features/administration/administration.module').then((m) => m.AdministrationModule),
// resolve: { poll: PollService },

View File

@ -0,0 +1,40 @@
import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';
export const slideInAnimation = trigger('routeAnimations', [
transition('HomePage <=> AdminPage', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
}),
]),
query(':enter', [style({ left: '-100%' })]),
query(':leave', animateChild()),
group([
query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]),
query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
]),
query(':enter', animateChild()),
]),
transition('* <=> FilterPage', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
}),
]),
query(':enter', [style({ left: '-100%' })]),
query(':leave', animateChild()),
group([
query(':leave', [animate('200ms ease-out', style({ left: '100%' }))]),
query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
]),
query(':enter', animateChild()),
]),
]);

View File

@ -1,5 +1,5 @@
<div class="selector">
<img src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
<img class="clickable" src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
<div class="buttons has-addons">
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
<select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">

View File

@ -4,6 +4,7 @@ label {
margin-top: 0.25em;
line-height: 2.5em;
}
input,
select,
textarea {
@ -11,7 +12,7 @@ textarea {
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
width: calc(100% -45px);
width: calc(100% - 45px);
margin-right: 2px;
margin-bottom: 1em;
@ -50,6 +51,7 @@ textarea {
li {
list-style-type: none;
}
.next {
max-width: 200px;
margin-bottom: 50px;
@ -137,6 +139,7 @@ textarea {
background: $warning;
padding: 1em;
}
mat-checkbox {
display: block;
}