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 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
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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']"
|
||||||
|
@ -6,4 +6,9 @@
|
|||||||
width: 4em;
|
width: 4em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.navbar-item {
|
||||||
|
.fa {
|
||||||
|
margin-right: 1ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 },
|
||||||
|
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">
|
<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">
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user