From bf0ef602a0a880ee4181a72e7623f963424e70b4 Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Sat, 9 Feb 2019 11:05:45 +0100 Subject: [PATCH 1/4] [HIMA-61] - moved newsletter to debug module --- src/app/app-routing.module.ts | 2 -- src/app/modules/debug/debug.module.ts | 15 +++++++++++++-- .../newsletter-debug.component.html | 3 +++ .../newsletter-debug.component.ts | 9 +++++++++ .../newsletter-signup.component.scss | 4 ---- .../newsletter-signup/newsletter-signup.module.ts | 3 +-- 6 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 src/app/modules/debug/newsletter-debug/newsletter-debug.component.html create mode 100644 src/app/modules/debug/newsletter-debug/newsletter-debug.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 50622e57b..5f62cc5f6 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,7 +10,6 @@ import { import { SearchResultsComponent } from './components/search-results/search-results.component'; import { ProductDetailsComponent } from './components/product-details/product-details.component'; import { BarcodeSearchComponent } from './modules/barcode-search/barcode-search.component'; -import { NewsletterSignupComponent } from './modules/newsletter-signup/newsletter-signup.component'; const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, @@ -22,7 +21,6 @@ const routes: Routes = [ { path: 'search-results#start', component: SearchResultsComponent }, { path: 'product-details/:id', component: ProductDetailsComponent }, { path: 'article-scan', component: BarcodeSearchComponent }, - { path: 'newsletter', component: NewsletterSignupComponent }, { path: 'debug', loadChildren: './modules/debug/debug.module#DebugModule' } ]; diff --git a/src/app/modules/debug/debug.module.ts b/src/app/modules/debug/debug.module.ts index 1531752b1..73bdab4f2 100644 --- a/src/app/modules/debug/debug.module.ts +++ b/src/app/modules/debug/debug.module.ts @@ -4,18 +4,29 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { SharedModule } from 'src/app/shared/shared.module'; import { CommonModule } from '@angular/common'; +import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.component'; +import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module'; const routes: Routes = [ { path: 'card-stack', component: CardStackAnimationComponent }, + { + path: 'newsletter', + component: NewsletterDebugComponent + }, { path: '**', redirectTo: 'card-stack' } ]; @NgModule({ - imports: [CommonModule, SharedModule, RouterModule.forChild(routes)], + imports: [ + CommonModule, + SharedModule, + RouterModule.forChild(routes), + NewsletterSignupModule + ], exports: [], - declarations: [CardStackAnimationComponent] + declarations: [CardStackAnimationComponent, NewsletterDebugComponent] }) export class DebugModule {} diff --git a/src/app/modules/debug/newsletter-debug/newsletter-debug.component.html b/src/app/modules/debug/newsletter-debug/newsletter-debug.component.html new file mode 100644 index 000000000..874756bcd --- /dev/null +++ b/src/app/modules/debug/newsletter-debug/newsletter-debug.component.html @@ -0,0 +1,3 @@ + + + diff --git a/src/app/modules/debug/newsletter-debug/newsletter-debug.component.ts b/src/app/modules/debug/newsletter-debug/newsletter-debug.component.ts new file mode 100644 index 000000000..454d453f6 --- /dev/null +++ b/src/app/modules/debug/newsletter-debug/newsletter-debug.component.ts @@ -0,0 +1,9 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-newsletter-debug', + templateUrl: 'newsletter-debug.component.html' +}) +export class NewsletterDebugComponent implements OnInit { + ngOnInit(): void {} +} diff --git a/src/app/modules/newsletter-signup/newsletter-signup.component.scss b/src/app/modules/newsletter-signup/newsletter-signup.component.scss index 984a0d1bf..36b2903e4 100644 --- a/src/app/modules/newsletter-signup/newsletter-signup.component.scss +++ b/src/app/modules/newsletter-signup/newsletter-signup.component.scss @@ -1,11 +1,7 @@ .container { display: flex; align-items: center; - padding: 36px; flex-direction: column; - background-color: rgba(255, 255, 255, 1); - border-radius: 5px; - box-shadow: 0px -2px 24px 0px rgba(220, 226, 233, 0.8); user-select: none; h1 { diff --git a/src/app/modules/newsletter-signup/newsletter-signup.module.ts b/src/app/modules/newsletter-signup/newsletter-signup.module.ts index daacf6d33..7aaf83a31 100644 --- a/src/app/modules/newsletter-signup/newsletter-signup.module.ts +++ b/src/app/modules/newsletter-signup/newsletter-signup.module.ts @@ -5,10 +5,9 @@ import { NgModule } from '@angular/core'; import { SignaturePadComponent } from './components/signature-pad/signature-pad.component'; import { NewsletterSignupComponent } from './newsletter-signup.component'; import { CommonModule } from '@angular/common'; -import { BrowserModule } from '@angular/platform-browser'; @NgModule({ - imports: [BrowserModule, CommonModule, SignaturePadModule], + imports: [CommonModule, SignaturePadModule], exports: [NewsletterSignupComponent], declarations: [NewsletterSignupComponent, SignaturePadComponent], providers: [] From 545548c1b6799bada696ddc956269725496156a8 Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Sat, 9 Feb 2019 12:37:01 +0100 Subject: [PATCH 2/4] [HIMA-61] - recommendations transition animation --- src/app/modules/debug/debug.module.ts | 11 +++- .../recommendations-animation.component.html | 13 +++++ .../recommendations-animation.component.scss | 22 ++++++++ .../recommendations-animation.component.ts | 17 ++++++ .../shrink.animation.ts | 54 +++++++++++++++++++ .../newsletter-signup/circle.animation.ts | 10 +--- 6 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 src/app/modules/debug/recommendations-animation/recommendations-animation.component.html create mode 100644 src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss create mode 100644 src/app/modules/debug/recommendations-animation/recommendations-animation.component.ts create mode 100644 src/app/modules/debug/recommendations-animation/shrink.animation.ts diff --git a/src/app/modules/debug/debug.module.ts b/src/app/modules/debug/debug.module.ts index 73bdab4f2..48eac31e5 100644 --- a/src/app/modules/debug/debug.module.ts +++ b/src/app/modules/debug/debug.module.ts @@ -6,6 +6,7 @@ import { SharedModule } from 'src/app/shared/shared.module'; import { CommonModule } from '@angular/common'; import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.component'; import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module'; +import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component'; const routes: Routes = [ { @@ -16,6 +17,10 @@ const routes: Routes = [ path: 'newsletter', component: NewsletterDebugComponent }, + { + path: 'recom', + component: RecommendationDebugComponent + }, { path: '**', redirectTo: 'card-stack' } ]; @@ -27,6 +32,10 @@ const routes: Routes = [ NewsletterSignupModule ], exports: [], - declarations: [CardStackAnimationComponent, NewsletterDebugComponent] + declarations: [ + RecommendationDebugComponent, + CardStackAnimationComponent, + NewsletterDebugComponent + ] }) export class DebugModule {} diff --git a/src/app/modules/debug/recommendations-animation/recommendations-animation.component.html b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.html new file mode 100644 index 000000000..50f5e0d35 --- /dev/null +++ b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.html @@ -0,0 +1,13 @@ + +

+ Rechnungsadresse +

+
+ +
+ + diff --git a/src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss new file mode 100644 index 000000000..a52786c3e --- /dev/null +++ b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss @@ -0,0 +1,22 @@ +.placeholder { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 40px; +} + +.tabtitle { + width: 100%; + font-family: 'Open Sans'; + font-size: 20px; + font-weight: bold; + color: rgba(90, 114, 138, 1); + line-height: 21px; + margin: 0; + margin-bottom: 10px; +} + +.newsletter { + padding: 36px; + margin-top: -10px; +} diff --git a/src/app/modules/debug/recommendations-animation/recommendations-animation.component.ts b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.ts new file mode 100644 index 000000000..6454cfce9 --- /dev/null +++ b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { shrinkTitleAnimation, shrinkMainAnimation } from './shrink.animation'; + +@Component({ + selector: 'app-recommendations-animation', + templateUrl: 'recommendations-animation.component.html', + styleUrls: ['recommendations-animation.component.scss'], + animations: [shrinkTitleAnimation, shrinkMainAnimation] +}) +export class RecommendationDebugComponent implements OnInit { + expanded = true; + ngOnInit(): void {} + + expand() { + this.expanded = !this.expanded; + } +} diff --git a/src/app/modules/debug/recommendations-animation/shrink.animation.ts b/src/app/modules/debug/recommendations-animation/shrink.animation.ts new file mode 100644 index 000000000..55713e135 --- /dev/null +++ b/src/app/modules/debug/recommendations-animation/shrink.animation.ts @@ -0,0 +1,54 @@ +import { + trigger, + style, + transition, + animate, + query, + state +} from '@angular/animations'; + +export const shrinkTitleAnimation = trigger('shrinkTitle', [ + state('false', style({ transform: 'scale(1) translateX(0) translateY(0)' })), + state( + 'true', + style({ + transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)' + }) + ), + transition('true => false', [ + style({ + transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)' + }), + animate( + 300, + style({ + transform: 'scale(1) translateX(0) translateY(0)' + }) + ) + ]), + transition('false => true', [ + animate( + 100, + style({ + transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)' + }) + ) + ]) +]); + +export const shrinkMainAnimation = trigger('shrinkMain', [ + transition(':leave', [ + style({ + visibility: 'hidden', + height: '*' + }), + animate( + '300ms ease-out', + style({ + visibility: 'hidden', + height: '0', + paddingTop: '0px' + }) + ) + ]) +]); diff --git a/src/app/modules/newsletter-signup/circle.animation.ts b/src/app/modules/newsletter-signup/circle.animation.ts index 8707be238..a6a0fab14 100644 --- a/src/app/modules/newsletter-signup/circle.animation.ts +++ b/src/app/modules/newsletter-signup/circle.animation.ts @@ -25,15 +25,7 @@ export const circleAnimation = trigger('circle', [ ), transition('one => two', [ animate( - 400, - style({ - opacity: 0, - height: '0', - marginBottom: '0' - }) - ), - animate( - 300, + '300ms 400ms ease-out', style({ opacity: 1, height: '*', From 08d5e744481f1dd6b26e74986630111e79c13ddf Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Sat, 9 Feb 2019 12:40:32 +0100 Subject: [PATCH 3/4] [HIMA-61] - timing adjustments --- .../debug/recommendations-animation/shrink.animation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/modules/debug/recommendations-animation/shrink.animation.ts b/src/app/modules/debug/recommendations-animation/shrink.animation.ts index 55713e135..312d1a5f6 100644 --- a/src/app/modules/debug/recommendations-animation/shrink.animation.ts +++ b/src/app/modules/debug/recommendations-animation/shrink.animation.ts @@ -20,7 +20,7 @@ export const shrinkTitleAnimation = trigger('shrinkTitle', [ transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)' }), animate( - 300, + '400ms ease-out', style({ transform: 'scale(1) translateX(0) translateY(0)' }) @@ -43,7 +43,7 @@ export const shrinkMainAnimation = trigger('shrinkMain', [ height: '*' }), animate( - '300ms ease-out', + '400ms ease-out', style({ visibility: 'hidden', height: '0', From d072972e3c872c93105cd4cc0cf764e555e1e176 Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Sat, 9 Feb 2019 12:50:27 +0100 Subject: [PATCH 4/4] [HIMA-61] - timing updates on customer search animation --- .../customer-search.component.html | 8 ++++---- .../customer-search/fade-in.animation.ts | 20 +++++++------------ .../customer-search/stagger.animation.ts | 4 ++-- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/app/modules/customer-search/components/customer-search/customer-search.component.html b/src/app/modules/customer-search/components/customer-search/customer-search.component.html index 0471213c9..0468e1e55 100644 --- a/src/app/modules/customer-search/components/customer-search/customer-search.component.html +++ b/src/app/modules/customer-search/components/customer-search/customer-search.component.html @@ -8,14 +8,14 @@ {{ titles[item] }} -
-
+
+
-
+
Not implemented
-
+
diff --git a/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts b/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts index b5bfe5621..cdd581767 100644 --- a/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts +++ b/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts @@ -7,19 +7,13 @@ import { } from '@angular/animations'; export const fadeInAnimation = trigger('fadeIn', [ - transition('* => *', [ - query(':enter', [style({ opacity: 0 })], { optional: true }), + transition(':leave', [ + style({ opacity: 1 }), + animate('0.3s ease-in', style({ opacity: 0 })) + ]), - query( - ':leave', - [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))], - { optional: true } - ), - - query( - ':enter', - [style({ opacity: 0 }), animate('0.2s', style({ opacity: 1 }))], - { optional: true } - ) + transition(':enter', [ + style({ opacity: 0 }), + animate('0.3s ease-out', style({ opacity: 1 })) ]) ]); diff --git a/src/app/modules/customer-search/components/customer-search/stagger.animation.ts b/src/app/modules/customer-search/components/customer-search/stagger.animation.ts index 23fc97767..4ef7ea30d 100644 --- a/src/app/modules/customer-search/components/customer-search/stagger.animation.ts +++ b/src/app/modules/customer-search/components/customer-search/stagger.animation.ts @@ -14,7 +14,7 @@ export const staggerAnimation = trigger('listAnimation', [ query(':leave', [ style({ height: '0', marginTop: '-56px', visibility: 'hidden' }) ]), - query('*', [stagger(20, [animate('0.15s', style({ opacity: 0 }))])]), - query('*', [stagger(-10, [animate('0.15s', style({ opacity: 1 }))])]) + query('*', [stagger(20, [animate('0.1s', style({ opacity: 0 }))])]), + query('*', [stagger(-10, [animate('0.1s', style({ opacity: 1 }))])]) ]) ]);