sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-58] - stagger animation on customer search

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-09 00:17:07 +01:00
parent c482718996
commit cc9a75ed29
10 changed files with 143 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.scss
View File

@@ -1,4 +1,4 @@
@import "../../../../../assets/scss/variables";
@import '../../../../../assets/scss/variables';
.customer-section-create {
border-radius: 4px;
@@ -7,14 +7,11 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
height: 700px;
padding-bottom: 30px;
background-image: -webkit-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: -moz-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: -o-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
box-shadow: 0px -2px 24px 0px #dce2e9;
background-image: linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
}
.customer-section-create-title {
@@ -40,7 +37,7 @@
align-items: center;
.error-message {
animation: shake 0.3s cubic-bezier(.7,.07,.19,.97) both;
animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
position: absolute;
left: 45%;
@@ -65,12 +62,8 @@
}
// OLD IPADS
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
.create-wrapper {
.error-visible {
width: 65%;
}
@@ -81,7 +74,7 @@ and (-webkit-min-device-pixel-ratio: 1){
}
.city-label {
left:294px;
left: 294px;
}
.invalid-feedback-under-start {
@@ -91,13 +84,8 @@ and (-webkit-min-device-pixel-ratio: 1){
}
// OLD IPADS LANDSCAPE
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
.create-wrapper {
.error-message {
left: 58%;
}
@@ -118,13 +106,8 @@ and (-webkit-min-device-pixel-ratio: 1) {
}
// RETINA IPADS LANDSCAPE
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.create-wrapper {
.invalid-feedback {
width: 49%;
}
@@ -141,12 +124,8 @@ and (-webkit-min-device-pixel-ratio: 2) {
}
// RETINA IPADS
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
.create-wrapper {
.error-message {
left: 56%;
}
@@ -157,8 +136,7 @@ and (-webkit-min-device-pixel-ratio: 2) {
}
}
@media screen
and (max-width: 768px) {
@media screen and (max-width: 768px) {
.error-message {
left: 45% !important;
}
@@ -168,7 +146,7 @@ and (max-width: 768px) {
10% {
transform: translate3d(-1px, 0, 0);
}
50% {
transform: translate3d(2px, 0, 0);
}
@@ -187,7 +165,7 @@ and (max-width: 768px) {
top: 13px;
left: 51%;
text-align: right;
animation: shake 0.3s cubic-bezier(.7,.07,.19,.97) both;
animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
position: absolute;
font-size: 14px;
@@ -241,7 +219,6 @@ and (max-width: 768px) {
outline: none;
}
.form {
display: flex;
flex-direction: column;
@@ -271,7 +248,7 @@ and (max-width: 768px) {
input:focus {
outline: none;
border:none;
border: none;
}
label {
@@ -280,4 +257,4 @@ label {
color: #000000;
text-align: left;
line-height: 21px;
}
}

34
src/app/modules/customer-search/components/customer-search/customer-search.component.html
View File

@@ -1,15 +1,21 @@
<div class="customer-search-container">
<div class="customer-section" (click)="changeCard()">
<ng-container *ngIf="displayUserSearch">
<div><span class="customer-section-header">Kundendaten erfassen</span></div>
</ng-container>
<ng-container *ngIf="!displayUserSearch">
<div><span class="customer-section-header">Kundensuche</span></div>
</ng-container>
</div>
<div class="customer-section">
<div><span class="customer-section-header">Kundenkarte scannen</span></div>
</div>
<app-search-customer-card *ngIf="displayUserSearch"></app-search-customer-card>
<app-create-customer-card *ngIf="!displayUserSearch"></app-create-customer-card>
<div class="spacer"></div>
<div [@listAnimation]="active">
<app-card
*ngFor="let item of navigation"
(click)="switch(item)"
class="header"
>
<span class="customer-section-header">{{ titles[item] }}</span>
</app-card>
</div>
<div class="content" [ngSwitch]="active" [@fadeIn]="active">
<div *ngSwitchCase="'search'">
<app-search-customer-card></app-search-customer-card>
</div>
<div *ngSwitchCase="'scan'">
Not implemented
</div>
<div *ngSwitchCase="'create'">
<app-create-customer-card></app-create-customer-card>
</div>
</div>

41
src/app/modules/customer-search/components/customer-search/customer-search.component.scss
View File

@@ -1,14 +1,14 @@
@import "../../../../../assets/scss/variables";
@import '../../../../../assets/scss/variables';
.customer-search-container {
background-color: white;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
width: 99%;
border-radius: 5px;
font-family: 'Open Sans';
line-height: 21px;
background-color: white;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
width: 99%;
border-radius: 5px;
font-family: 'Open Sans';
line-height: 21px;
}
.customer-section {
@@ -34,4 +34,25 @@
color: #5a728a;
text-align: left;
line-height: 21px;
}
}
.spacer {
height: 20px;
}
.header {
padding-left: 10px;
padding-bottom: 28px;
padding-top: 28px;
margin-top: -10px;
}
.content {
min-height: 400px;
position: relative;
margin-top: -5px;
}
.content > * {
position: absolute;
width: 100%;
height: 100%;
}

22
src/app/modules/customer-search/components/customer-search/customer-search.component.ts
View File

@@ -1,15 +1,25 @@
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Store } from '@ngxs/store';
import { fadeInAnimation } from './fade-in.animation';
import { staggerAnimation } from './stagger.animation';
@Component({
selector: 'app-customer-search',
templateUrl: './customer-search.component.html',
styleUrls: ['./customer-search.component.scss']
styleUrls: ['./customer-search.component.scss'],
animations: [fadeInAnimation, staggerAnimation]
})
export class CustomerSearchComponent implements OnInit {
displayUserSearch = true;
animate = false;
titles = {
search: 'Kundensuche',
scan: 'Kundenkarte scannen',
create: 'Kundendaten erfassen'
};
navigation = ['create', 'scan'];
active = 'search';
constructor(private store: Store) { }
constructor(private store: Store) {}
ngOnInit() {}
@@ -19,4 +29,12 @@ export class CustomerSearchComponent implements OnInit {
this.animate = false;
}
switch(newItem: string) {
if (newItem === 'scan') {
return;
}
const index = this.navigation.indexOf(newItem);
this.navigation[index] = this.active;
this.active = newItem;
}
}

25
src/app/modules/customer-search/components/customer-search/fade-in.animation.ts Normal file
View File

@@ -0,0 +1,25 @@
import {
trigger,
style,
transition,
animate,
query
} from '@angular/animations';
export const fadeInAnimation = trigger('fadeIn', [
transition('* => *', [
query(':enter', [style({ opacity: 0 })], { optional: true }),
query(
':leave',
[style({ opacity: 1 }), animate('0.4s', style({ opacity: 0 }))],
{ optional: true }
),
query(
':enter',
[style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
{ optional: true }
)
])
]);

20
src/app/modules/customer-search/components/customer-search/stagger.animation.ts Normal file
View File

@@ -0,0 +1,20 @@
import {
trigger,
transition,
stagger,
animate,
style,
query
} from '@angular/animations';
export const staggerAnimation = trigger('listAnimation', [
transition(':enter, * => 0, * => -1', []),
transition('* => *', [
// each time the binding value changes
query(':leave', [
style({ height: '0', marginTop: '-56px', visibility: 'hidden' })
]),
query('*', [stagger(40, [animate('0.3s', style({ opacity: 0 }))])]),
query('*', [stagger(-20, [animate('0.3s', style({ opacity: 1 }))])])
])
]);

42
src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.scss
View File

@@ -1,4 +1,4 @@
@import "../../../../../assets/scss/variables";
@import '../../../../../assets/scss/variables';
.customer-section-search {
border-radius: 4px;
@@ -9,9 +9,6 @@
align-items: center;
height: 45vh;
background-image: -webkit-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: -moz-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: -o-linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
background-image: linear-gradient(-180deg, #ffffff 0%, #ffffff 100%);
box-shadow: 0px -2px 24px 0px #dce2e9;
}
@@ -50,7 +47,7 @@
font-weight: bold;
font-size: 21px;
caret-color: $hima-button-color;
&::placeholder {
padding-left: 15px;
color: #000;
@@ -75,7 +72,7 @@
}
.error-message {
animation: shake 0.3s cubic-bezier(.7,.07,.19,.97) both;
animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
position: absolute;
left: 45%;
@@ -90,12 +87,8 @@
}
// OLD IPADS
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
.search-wrapper {
.clear-icon {
right: 12%;
}
@@ -111,13 +104,8 @@ and (-webkit-min-device-pixel-ratio: 1){
}
// OLD IPADS LANDSCAPE
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
.search-wrapper {
.clear-icon {
right: 10%;
}
@@ -129,13 +117,8 @@ and (-webkit-min-device-pixel-ratio: 1) {
}
// RETINA IPADS LANDSCAPE
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.search-wrapper {
.clear-icon {
right: 9%;
}
@@ -151,12 +134,8 @@ and (-webkit-min-device-pixel-ratio: 2) {
}
// RETINA IPADS
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
.search-wrapper {
.clear-icon {
right: 11%;
}
@@ -171,8 +150,7 @@ and (-webkit-min-device-pixel-ratio: 2) {
}
}
@media screen
and (max-width: 768px) {
@media screen and (max-width: 768px) {
.error-message {
left: 45% !important;
}
@@ -182,7 +160,7 @@ and (max-width: 768px) {
10% {
transform: translate3d(-1px, 0, 0);
}
50% {
transform: translate3d(2px, 0, 0);
}
@@ -194,4 +172,4 @@ and (max-width: 768px) {
90% {
transform: translate3d(3px, 0, 0);
}
}
}

3
src/app/modules/customer-search/customer-search.module.ts
View File

@@ -7,6 +7,7 @@ import { EditCustomerCardComponent } from './components/edit-customer-card/edit-
import { CustomerSearchComponent } from './components/customer-search/customer-search.component';
import { SearchCustomerCardComponent } from './components/search-customer-card/search-customer-card.component';
import { SearchCustomerResultComponent } from './components/search-customer-result/search-customer-result.component';
import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
declarations: [
@@ -23,6 +24,6 @@ import { SearchCustomerResultComponent } from './components/search-customer-resu
CustomerSearchComponent,
EditCustomerCardComponent
],
imports: [CommonModule, FormsModule, ReactiveFormsModule]
imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule]
})
export class CustomerSearchModule {}

2
src/app/modules/debug/card-stack-animation/fade-in.animation.ts
View File

@@ -1,12 +1,10 @@
import {
trigger,
state,
style,
transition,
animate,
query
} from '@angular/animations';
import { isAbsolute } from 'path';
export const fadeInAnimation = trigger('fadeIn', [
transition('* => *', [

2
src/app/shared/components/card/card.component.scss
View File

@@ -4,8 +4,6 @@
display: block;
position: relative;
background-color: white;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
-moz-box-shadow: 0 0 3px $hima-content-shadow-color;
-webkit-box-shadow: 0 0 3px $hima-content-shadow-color;