mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
start sliding transition between pages
This commit is contained in:
parent
11a0245890
commit
71d139f177
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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']"
|
||||
|
@ -6,4 +6,9 @@
|
||||
width: 4em;
|
||||
text-align: center;
|
||||
}
|
||||
.navbar-item {
|
||||
.fa {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 },
|
||||
];
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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 },
|
||||
|
40
src/app/shared/animations/main.ts
Normal file
40
src/app/shared/animations/main.ts
Normal 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()),
|
||||
]),
|
||||
]);
|
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user