From 4d632ba34a4bb8e79fd95cfaa8541cc6ef49243f Mon Sep 17 00:00:00 2001 From: rubikscraft Date: Wed, 30 Mar 2022 22:20:28 +0200 Subject: [PATCH] route animations --- frontend/angular.json | 4 +- frontend/src/app/app.animation.ts | 75 ++++++++++++++++++++++++++ frontend/src/app/app.component.html | 12 ++++- frontend/src/app/app.component.ts | 11 +++- frontend/src/app/app.routing.module.ts | 9 ++-- frontend/src/app/util/util.service.ts | 4 ++ frontend/src/scss/fixes.scss | 9 +++- frontend/src/scss/personal.scss | 9 ++-- 8 files changed, 119 insertions(+), 14 deletions(-) create mode 100644 frontend/src/app/app.animation.ts diff --git a/frontend/angular.json b/frontend/angular.json index f8ab062..03b7f06 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -18,7 +18,6 @@ }, "root": "", "sourceRoot": "src", - "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -37,7 +36,8 @@ "debug", "buffer/", "sha.js" - ] + ], + "optimization": true }, "configurations": { "production": { diff --git a/frontend/src/app/app.animation.ts b/frontend/src/app/app.animation.ts new file mode 100644 index 0000000..b431392 --- /dev/null +++ b/frontend/src/app/app.animation.ts @@ -0,0 +1,75 @@ +import { + animate, + query, + style, + transition, + trigger +} from '@angular/animations'; + +// This shit worked so beautifully on firefox, but then chrome and angular had to come along and fuck it up +// Because yes, chrome of course doesnt apply the opacity of an 'diplay: inline' element to its children. +// Not so difficult right, just change the display to block or something? +// Yes difficult, because of course the elements I need to apply it to, are all angular components. +// I could manually add the css to every component, but that is the most stupid solution ever. +// Maybe there is just an option to change that in angular itself? +// Because putting 'block' elements inside 'inline' elements isnt even allowed per spec, +// surely angular would allow you to follow spec? +// But no, of course not, having reasonable config options is stupid. +// The only thing it allows you to do is automatically add the 'display: block' property to every new element with schematics +// And every single issue that tries to properly fix this bug gets closed with this previous "solution" as answer. +// It sooo fucking stupid. +// Now I've just applied block to all the siblings of the router, since those are the only components that REALLY need it. +// But I still think its a stupid solution. + +// Also, why the fuck doesnt 'display: none' work? +// I'll just use this weird ass 'position: absolute' thingy for now. + +export const RouteTransitionAnimations = trigger('mainAnimation', [ + transition('* => *', [ + query( + ':enter', + [ + style({ + opacity: 0, + overflow: 'hidden', + position: 'absolute', + top: '-100%', + width: '0', + display: 'none', + }), + ], + { + optional: true, + } + ), + + query( + ':leave', + [ + style({ opacity: 1 }), + animate('.1s', style({ opacity: 0 })), + style({ + position: 'absolute', + top: '-100%', + width: '0', + display: 'none', + }), + ], + { optional: true } + ), + + query( + ':enter', + [ + style({ + opacity: 0, + display: 'block', + position: 'revert', + width: 'revert', + }), + animate('.1s', style({ opacity: 1 })), + ], + { optional: true } + ), + ]), +]); diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index df0885c..c2fa7ed 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -4,14 +4,22 @@ > - +
-
+
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index e981914..695fb9b 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -9,12 +9,14 @@ import { Router } from '@angular/router'; import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator'; +import { RouteTransitionAnimations } from './app.animation'; import { PRouteData } from './models/dto/picsur-routes.dto'; - +let b = 0; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + animations: [RouteTransitionAnimations], }) export class AppComponent implements OnInit { readonly logger = console; @@ -33,6 +35,13 @@ export class AppComponent implements OnInit { private breakPointObserver: BreakpointObserver ) {} + public getRouteAnimData() { + // Everyone is doing shit with the activated route + // This seems so much cleaner tho + // Am I just missing something, or is everyone else missing something? + return this.router.url; + } + public ngOnInit() { this.subscribeRouter(); this.subscribeMobile(); diff --git a/frontend/src/app/app.routing.module.ts b/frontend/src/app/app.routing.module.ts index 3dc6498..fa5f017 100644 --- a/frontend/src/app/app.routing.module.ts +++ b/frontend/src/app/app.routing.module.ts @@ -11,6 +11,11 @@ import { ViewRouteModule } from './routes/view/view.module'; const routes: PRoutes = [ { path: '', + pathMatch: 'full', + redirectTo: 'upload', + }, + { + path: 'upload', loadChildren: () => UploadRouteModule, }, { @@ -36,9 +41,7 @@ const routes: PRoutes = [ ]; @NgModule({ - imports: [ - RouterModule.forRoot(routes), - ], + imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} diff --git a/frontend/src/app/util/util.service.ts b/frontend/src/app/util/util.service.ts index ef079a5..597a890 100644 --- a/frontend/src/app/util/util.service.ts +++ b/frontend/src/app/util/util.service.ts @@ -44,4 +44,8 @@ export class UtilService { }); }); } + + public async sleep(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } } diff --git a/frontend/src/scss/fixes.scss b/frontend/src/scss/fixes.scss index e21f020..99a269d 100644 --- a/frontend/src/scss/fixes.scss +++ b/frontend/src/scss/fixes.scss @@ -22,6 +22,12 @@ html { box-sizing: inherit; } +router-outlet ~ * { + display: block; + height: 100%; + width: 100%; +} + :not(input) { -webkit-user-select: none; -moz-user-select: none; @@ -30,9 +36,8 @@ html { } .mat-icon { - // Yes yes, !important is here, deal with it + // Yes yes, !important is here, god damn css // If someone wants to properly figure out why icons are escaping their 24px box, feel free to height: initial !important; width: initial !important; } - diff --git a/frontend/src/scss/personal.scss b/frontend/src/scss/personal.scss index e3196f8..a20ae2c 100644 --- a/frontend/src/scss/personal.scss +++ b/frontend/src/scss/personal.scss @@ -5,8 +5,6 @@ border-style: solid; border-width: 5px; - - transition: all 0.2s ease-in-out; } // Easily center content @@ -65,8 +63,11 @@ // Anim -.container, .row > div { - transition: ease-in-out all 0.2s; +.container, +.row > div { + transition-property: max-width; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; } .fullanimate,