Merged in feature/HIMA-61-create-animation-recommendations (pull request #31)

Feature/HIMA-61 create animation recommendations

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';
 import { CartReviewComponent } from './modules/cart/components/cart-review/cart-review.component';
 
 const routes: Routes = [
@@ -23,9 +22,8 @@ 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' },
-  { path: 'cart', component: CartReviewComponent },
+  { path: 'cart', component: CartReviewComponent }
 ];
 
 @NgModule({

src/app/modules/customer-search/components/customer-search/customer-search.component.html

@@ -8,14 +8,14 @@
     <span class="customer-section-header">{{ titles[item] }}</span>
   </app-card>
 </div>
-<div class="content" [ngSwitch]="active" [@fadeIn]="active">
-  <div *ngSwitchCase="'search'">
+<div class="content" [ngSwitch]="active">
+  <div *ngSwitchCase="'search'" [@fadeIn]="active">
     <app-search-customer-card></app-search-customer-card>
   </div>
-  <div *ngSwitchCase="'scan'">
+  <div *ngSwitchCase="'scan'" [@fadeIn]="active">
     Not implemented
   </div>
-  <div *ngSwitchCase="'create'">
+  <div *ngSwitchCase="'create'" [@fadeIn]="active">
     <app-create-customer-card></app-create-customer-card>
   </div>
 </div>

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 }))
   ])
 ]);

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 }))])])
   ])
 ]);

src/app/modules/debug/debug.module.ts

@@ -4,18 +4,38 @@ 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';
+import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component';
 
 const routes: Routes = [
   {
     path: 'card-stack',
     component: CardStackAnimationComponent
   },
+  {
+    path: 'newsletter',
+    component: NewsletterDebugComponent
+  },
+  {
+    path: 'recom',
+    component: RecommendationDebugComponent
+  },
   { path: '**', redirectTo: 'card-stack' }
 ];
 
 @NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule.forChild(routes),
+    NewsletterSignupModule
+  ],
   exports: [],
-  declarations: [CardStackAnimationComponent]
+  declarations: [
+    RecommendationDebugComponent,
+    CardStackAnimationComponent,
+    NewsletterDebugComponent
+  ]
 })
 export class DebugModule {}

src/app/modules/debug/newsletter-debug/newsletter-debug.component.html

@@ -0,0 +1,3 @@
+<app-card style="padding: 36px;">
+  <app-newsletter-signup></app-newsletter-signup>
+</app-card>

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 {}
+}

src/app/modules/debug/recommendations-animation/recommendations-animation.component.html

@@ -0,0 +1,13 @@
+<app-card style="padding:20px 36px;">
+  <h1 class="tabtitle" [@shrinkTitle]="expanded" (click)="expand()">
+    Rechnungsadresse
+  </h1>
+  <div class="placeholder" *ngIf="expanded" [@shrinkMain]="'second'">
+    <img
+      src="https://via.placeholder.com/500x400.png?text=Rechnungsadresse+component"
+    />
+  </div>
+</app-card>
+<app-card class="newsletter">
+  <app-newsletter-signup></app-newsletter-signup>
+</app-card>

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;
+}

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;
+  }
+}

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(
+      '400ms ease-out',
+      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(
+      '400ms ease-out',
+      style({
+        visibility: 'hidden',
+        height: '0',
+        paddingTop: '0px'
+      })
+    )
+  ])
+]);

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: '*',

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 {

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: []