From 08a1a5e87771c375102ae1ed26ba27aa30697b87 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Thu, 6 Mar 2025 11:52:31 +0100 Subject: [PATCH 1/3] feat(deposit): implement modal animations with GSAP --- frontend/bun.lock | 3 + frontend/package.json | 1 + .../feature/deposit/deposit.component.html | 4 +- .../app/feature/deposit/deposit.component.ts | 60 ++++++++++++++++++- .../confirmation/confirmation.component.html | 4 +- .../confirmation/confirmation.component.ts | 33 +++++++++- .../components/navbar/navbar.component.html | 10 ++-- .../services/modal-animation.service.ts | 53 ++++++++++++++++ frontend/src/styles.css | 26 +++++++- 9 files changed, 177 insertions(+), 17 deletions(-) create mode 100644 frontend/src/app/shared/services/modal-animation.service.ts diff --git a/frontend/bun.lock b/frontend/bun.lock index f5631b4..5b0629c 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -19,6 +19,7 @@ "@fortawesome/free-solid-svg-icons": "^6.7.2", "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", + "gsap": "^3.12.7", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", "postcss": "^8.5.1", @@ -1068,6 +1069,8 @@ "graphemer": ["graphemer@1.4.0", "", {}, "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="], + "gsap": ["gsap@3.12.7", "", {}, "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg=="], + "handle-thing": ["handle-thing@2.0.1", "", {}, "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="], "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="], diff --git a/frontend/package.json b/frontend/package.json index 646c8a4..0ad0967 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "@fortawesome/free-solid-svg-icons": "^6.7.2", "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", + "gsap": "^3.12.7", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", "postcss": "^8.5.1", diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index fdaf87a..e8e4dfb 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,6 +1,6 @@ @if (isOpen) { -
-
+
+

Guthaben aufladen

@if (errorMsg) { diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index 7a45859..e9ee965 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -1,11 +1,18 @@ import { ChangeDetectionStrategy, Component, + ElementRef, EventEmitter, inject, Input, OnInit, Output, + ViewChild, + AfterViewInit, + OnDestroy, + OnChanges, + SimpleChanges, + ChangeDetectorRef, } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { loadStripe, Stripe } from '@stripe/stripe-js'; @@ -13,6 +20,8 @@ import { DepositService } from '../../service/deposit.service'; import { debounceTime } from 'rxjs'; import { environment } from '../../../environments/environment'; import { NgIf } from '@angular/common'; +import { ModalAnimationService } from '../../shared/services/modal-animation.service'; +import gsap from 'gsap'; @Component({ selector: 'app-deposit', @@ -21,13 +30,17 @@ import { NgIf } from '@angular/common'; templateUrl: './deposit.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DepositComponent implements OnInit { +export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { @Input() isOpen = false; @Output() close = new EventEmitter(); + @ViewChild('modalBg') modalBg!: ElementRef; + @ViewChild('modalCard') modalCard!: ElementRef; protected form!: FormGroup; protected errorMsg = ''; private stripe: Stripe | null = null; private service: DepositService = inject(DepositService); + private modalAnimationService: ModalAnimationService = inject(ModalAnimationService); + private cdr: ChangeDetectorRef = inject(ChangeDetectorRef); async ngOnInit() { this.form = new FormGroup({ @@ -43,6 +56,43 @@ export class DepositComponent implements OnInit { this.stripe = await loadStripe(environment.STRIPE_KEY); } + ngAfterViewInit() { + if (this.isOpen) { + this.openModal(); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['isOpen']) { + // Force change detection to ensure DOM is updated + this.cdr.detectChanges(); + + // Small delay to ensure DOM is ready + setTimeout(() => { + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + if (changes['isOpen'].currentValue) { + this.openModal(); + } else { + this.closeModal(); + } + } + }, 0); + } + } + + ngOnDestroy() { + gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]); + } + + private openModal() { + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + this.modalAnimationService.openModal( + this.modalCard.nativeElement, + this.modalBg.nativeElement + ); + } + } + submit() { if (!this.stripe) { this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'; @@ -59,6 +109,12 @@ export class DepositComponent implements OnInit { } public closeModal() { - this.close.emit(); + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + this.modalAnimationService.closeModal( + this.modalCard.nativeElement, + this.modalBg.nativeElement, + () => this.close.emit() + ); + } } } diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.html b/frontend/src/app/shared/components/confirmation/confirmation.component.html index d9546e0..193ea9a 100644 --- a/frontend/src/app/shared/components/confirmation/confirmation.component.html +++ b/frontend/src/app/shared/components/confirmation/confirmation.component.html @@ -1,6 +1,6 @@ @if (successful) { -
-
+
+

Bestätigung

Der Vorgang wurde erfolgreich abgeschlossen.

diff --git a/frontend/src/app/shared/services/modal-animation.service.ts b/frontend/src/app/shared/services/modal-animation.service.ts new file mode 100644 index 0000000..9dc11bd --- /dev/null +++ b/frontend/src/app/shared/services/modal-animation.service.ts @@ -0,0 +1,53 @@ +import { Injectable } from '@angular/core'; +import gsap from 'gsap'; + +@Injectable({ + providedIn: 'root' +}) +export class ModalAnimationService { + private readonly defaultDuration = 0.3; + private readonly defaultEase = 'power2.out'; + + openModal(modalElement: HTMLElement, overlayElement: HTMLElement) { + gsap.set(overlayElement, { opacity: 0, display: 'block' }); + gsap.set(modalElement, { + opacity: 0, + scale: 0.95, + y: 20, + display: 'block' + }); + + gsap.to(overlayElement, { + opacity: 1, + duration: this.defaultDuration, + ease: this.defaultEase + }); + + gsap.to(modalElement, { + opacity: 1, + scale: 1, + y: 0, + duration: this.defaultDuration, + ease: this.defaultEase + }); + } + + closeModal(modalElement: HTMLElement, overlayElement: HTMLElement, onComplete?: () => void) { + gsap.to([overlayElement, modalElement], { + opacity: 0, + duration: this.defaultDuration, + ease: this.defaultEase, + onComplete: () => { + gsap.set([overlayElement, modalElement], { display: 'none' }); + onComplete?.(); + } + }); + + gsap.to(modalElement, { + scale: 0.95, + y: 20, + duration: this.defaultDuration, + ease: this.defaultEase + }); + } +} \ No newline at end of file diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 5693d6b..300a61a 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -144,13 +144,33 @@ a { } .modal-bg { - @apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light; + @apply fixed inset-0 bg-black/80 backdrop-blur-sm z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light; } .modal-card { - @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 rounded-lg shadow-lg z-50 min-w-[300px]; + @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-6 rounded-xl shadow-2xl z-50 min-w-[300px] max-w-[400px] w-full mx-auto border border-deep-blue-light/20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2; } .modal-heading { - @apply text-xl font-bold text-text-primary; + @apply text-2xl font-bold text-text-primary mb-4; +} + +.modal-card input { + @apply w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200; +} + +.modal-card label { + @apply text-text-secondary text-sm font-medium mb-1 block; +} + +.modal-card button { + @apply transition-all duration-200; +} + +.modal-card .button-primary { + @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 shadow-lg shadow-emerald/20; +} + +.modal-card .button-secondary { + @apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50; } From 1569922fda7090dd29917ac859b5e41b020cf7d6 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Thu, 6 Mar 2025 11:55:01 +0100 Subject: [PATCH 2/3] refactor(deposit): remove unnecessary comments in code --- frontend/src/app/feature/deposit/deposit.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index e9ee965..f0f900a 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -64,10 +64,7 @@ export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnCha ngOnChanges(changes: SimpleChanges) { if (changes['isOpen']) { - // Force change detection to ensure DOM is updated this.cdr.detectChanges(); - - // Small delay to ensure DOM is ready setTimeout(() => { if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { if (changes['isOpen'].currentValue) { From 9c12ccd7169dfe1bdb75cca4187d94bdf8c4654c Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Thu, 6 Mar 2025 11:56:00 +0100 Subject: [PATCH 3/3] style: format code for better readability and consistency --- .../confirmation/confirmation.component.ts | 16 +++++++++++----- .../shared/services/modal-animation.service.ts | 18 +++++++++--------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.ts b/frontend/src/app/shared/components/confirmation/confirmation.component.ts index 0e0d202..d407985 100644 --- a/frontend/src/app/shared/components/confirmation/confirmation.component.ts +++ b/frontend/src/app/shared/components/confirmation/confirmation.component.ts @@ -1,4 +1,13 @@ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnDestroy } from '@angular/core'; +import { + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + AfterViewInit, + OnDestroy, +} from '@angular/core'; import { ModalAnimationService } from '../../services/modal-animation.service'; import gsap from 'gsap'; @@ -27,10 +36,7 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy { } private openModal() { - this.modalAnimationService.openModal( - this.modalCard.nativeElement, - this.modalBg.nativeElement - ); + this.modalAnimationService.openModal(this.modalCard.nativeElement, this.modalBg.nativeElement); } public closeModal() { diff --git a/frontend/src/app/shared/services/modal-animation.service.ts b/frontend/src/app/shared/services/modal-animation.service.ts index 9dc11bd..f54c2bc 100644 --- a/frontend/src/app/shared/services/modal-animation.service.ts +++ b/frontend/src/app/shared/services/modal-animation.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import gsap from 'gsap'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class ModalAnimationService { private readonly defaultDuration = 0.3; @@ -10,17 +10,17 @@ export class ModalAnimationService { openModal(modalElement: HTMLElement, overlayElement: HTMLElement) { gsap.set(overlayElement, { opacity: 0, display: 'block' }); - gsap.set(modalElement, { - opacity: 0, + gsap.set(modalElement, { + opacity: 0, scale: 0.95, y: 20, - display: 'block' + display: 'block', }); gsap.to(overlayElement, { opacity: 1, duration: this.defaultDuration, - ease: this.defaultEase + ease: this.defaultEase, }); gsap.to(modalElement, { @@ -28,7 +28,7 @@ export class ModalAnimationService { scale: 1, y: 0, duration: this.defaultDuration, - ease: this.defaultEase + ease: this.defaultEase, }); } @@ -40,14 +40,14 @@ export class ModalAnimationService { onComplete: () => { gsap.set([overlayElement, modalElement], { display: 'none' }); onComplete?.(); - } + }, }); gsap.to(modalElement, { scale: 0.95, y: 20, duration: this.defaultDuration, - ease: this.defaultEase + ease: this.defaultEase, }); } -} \ No newline at end of file +}