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 id="big_container" [class]="themeClass">
<div class="container"> <div class="container">
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header> <app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
<main> <main [@routeAnimations]="prepareRoute(outlet)">
<router-outlet></router-outlet> <router-outlet #outlet></router-outlet>
<div class="padded" *ngIf="devModeEnabled"> <div class="padded" *ngIf="devModeEnabled">
<br /> <br />
<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu <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 { Theme } from './core/enums/theme.enum';
import { LanguageService } from './core/services/language.service'; import { LanguageService } from './core/services/language.service';
import { ThemeService } from './core/services/theme.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({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
animations: [slideInAnimation],
}) })
export class AppComponent implements OnInit, OnDestroy { export class AppComponent implements OnInit, OnDestroy {
public appTitle: string = environment.appTitle; public appTitle: string = environment.appTitle;
@ -69,4 +71,8 @@ export class AppComponent implements OnInit, OnDestroy {
public toggleSidebar(status: boolean): void { public toggleSidebar(status: boolean): void {
this.isSidebarOpened = status === true; this.isSidebarOpened = status === true;
} }
prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
}
} }

View File

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

View File

@ -6,4 +6,9 @@
width: 4em; width: 4em;
text-align: center; 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'; import { NamingComponent } from './naming/naming.component';
const routes: Routes = [ const routes: Routes = [
{ path: '', component: AdministrationComponent }, { path: '', component: AdministrationComponent, data: { animation: 'AdminPage' } },
{ path: 'naming', component: NamingComponent }, { path: 'naming', component: NamingComponent },
]; ];

View File

@ -4,11 +4,13 @@ import { Subscription } from 'rxjs';
import { Poll } from '../../core/models/poll.model'; import { Poll } from '../../core/models/poll.model';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { slideInAnimation } from '../../shared/animations/main';
@Component({ @Component({
selector: 'app-administration', selector: 'app-administration',
templateUrl: './administration.component.html', templateUrl: './administration.component.html',
styleUrls: ['./administration.component.scss'], styleUrls: ['./administration.component.scss'],
animations: [slideInAnimation],
}) })
export class AdministrationComponent implements OnInit, OnDestroy { export class AdministrationComponent implements OnInit, OnDestroy {
public poll: Poll; 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'; import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
export const routes: Routes = [ export const routes: Routes = [
{ path: '', component: HomeComponent }, { path: '', component: HomeComponent, data: { animation: 'HomePage' } },
{ {
path: 'user', path: 'user',
loadChildren: () => import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule), loadChildren: () => import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule),
}, },
{ {
path: 'administration', path: 'administration',
data: { animation: 'AdminPage' },
loadChildren: () => loadChildren: () =>
import('./features/administration/administration.module').then((m) => m.AdministrationModule), import('./features/administration/administration.module').then((m) => m.AdministrationModule),
// resolve: { poll: PollService }, // 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"> <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"> <div class="buttons has-addons">
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label> <label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
<select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang"> <select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">

View File

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