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

merge with develop

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-09 17:02:28 +01:00
parent b13ccf6977 2828479fc1
commit 2ab9425ac8
19 changed files with 490 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@@ -37,6 +37,7 @@ import { FilterState } from './core/store/state/filter.state';
import { CheckoutComponent } from './components/checkout/checkout.component';
import { ModalComponent } from './shared/components/modal/modal.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from './shared/shared.module';
const states = [FeedState, ProcessState, BreadcrumbsState, FilterState];
@@ -70,7 +71,7 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
ProductCardComponent,
ProductDetailsComponent,
CheckoutComponent,
ModalComponent,
ModalComponent
],
imports: [
BrowserModule,
@@ -84,7 +85,8 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
CatServiceModule,
FeedServiceModule,
FormsModule,
ReactiveFormsModule
ReactiveFormsModule,
SharedModule
],
providers: [
{

98
src/app/components/article-search/article-search.component.html
View File

@@ -1,40 +1,64 @@
<div class="article-search-container">
<div class="article-section article-scan">
<div><span class="article-scan-header">Artikel scannen</span></div>
<div class="article-section article-scan">
<div><span class="article-scan-header">Artikel scannen</span></div>
</div>
<div class="article-section article-search">
<div class="align-center">
<span class="article-search-title">Artikelsuche</span>
</div>
<div class="article-section article-search">
<div class="align-center">
<span class="article-search-title">Artikelsuche</span>
</div>
<div class="align-center">
<span class="article-search-description">Welchen Artikel suchen Sie?</span>
</div>
<div class="align-center search-wrapper">
<input [(ngModel)]="searchParams" (keypress)="keyHandler($event)" class="search-box" placeholder="Titel, Autor, Verlag, Schlagwort, ..."
type="text" />
<img (click)="search()" class="search-icon" src="../../../assets/images/search.svg">
<img (click)="clear()" *ngIf="searchParams" class="clear-icon" src="../../../assets/images/close.svg">
</div>
<div *ngIf="searchParams">
<app-filter></app-filter>
</div>
<div class="recent-search-continer align-center">
<div class="recent-search-header">
<div class="align-left">
<span class="recent-searches-label">Deine letzten Suchanfragen</span>
</div>
<div class="align-right">
<span class="show-all-label">Alle ansehen</span>
</div>
</div>
<div class="recent-search-content">
<div *ngFor="let article of recentArticles" class="recent-article">
<div class="recent-article-container align-left">
<div (click)="showRecentSearchResults(article)"><img class="lupe-icon" src="../../../assets/images/Lupe_Icon.svg"></div>
<div class="recent-article-label">{{article.name}}</div>
</div>
</div>
</div>
</div>
<div class="align-center">
<span class="article-search-description"
>Welchen Artikel suchen Sie?</span
>
</div>
</div>
<div class="align-center search-container">
<div class="search-wrapper">
<input
[(ngModel)]="searchParams"
(keypress)="keyHandler($event)"
class="search-box"
placeholder="Titel, Autor, Verlag, Schlagwort, ..."
type="text"
autofocus
/>
<img
(click)="clear()"
*ngIf="searchParams"
class="clear-icon"
src="/assets/images/close.svg"
/>
<img
(click)="search()"
class="search-icon"
src="/assets/images/search.svg"
/>
</div>
</div>
<div *ngIf="searchParams">
<app-filter></app-filter>
</div>
<div class="recent-search-continer align-center">
<div class="recent-search-header">
<div class="align-left">
<span class="recent-searches-label">Deine letzten Suchanfragen</span>
</div>
<div class="align-right">
<span class="show-all-label">Alle ansehen</span>
</div>
</div>
<div class="recent-search-content">
<div *ngFor="let article of recentArticles" class="recent-article">
<div class="recent-article-container align-left">
<div (click)="showRecentSearchResults(article)">
<img
class="lupe-icon"
src="../../../assets/images/Lupe_Icon.svg"
/>
</div>
<div class="recent-article-label">{{ article.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>

241
src/app/components/article-search/article-search.component.scss
View File

@@ -1,200 +1,175 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.article-search-container {
background-color: white;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
// width: 97%;
-moz-box-shadow: 0 0 3px $hima-content-shadow-color;
-webkit-box-shadow: 0 0 3px $hima-content-shadow-color;
box-shadow: 0 0 3px $hima-content-shadow-color;
border-radius: 4px;
background-color: white;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
// width: 97%;
-moz-box-shadow: 0 0 3px $hima-content-shadow-color;
-webkit-box-shadow: 0 0 3px $hima-content-shadow-color;
box-shadow: 0 0 3px $hima-content-shadow-color;
border-radius: 4px;
}
@media screen and (max-width: 485px) {
.article-search-container {
width: 95%;
}
.article-search-container {
width: 95%;
}
}
.article-section {
box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
-moz-box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
-webkit-box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
padding: 10px;
border-radius: 4px;
box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
-moz-box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
-webkit-box-shadow: 0px -2px 6px 0px $hima-content-shadow-color;
padding: 10px;
border-radius: 4px;
}
.article-scan {
display: grid;
grid-template-columns: auto;
height: 40px;
padding-top: 28px
display: grid;
grid-template-columns: auto;
height: 40px;
padding-top: 28px;
}
.article-scan-header {
font-size: 20px;
font-weight: bold;
color: #5a728a;
text-align: left;
line-height: 21px;
font-size: 20px;
font-weight: bold;
color: #5a728a;
opacity: 0.8;
text-align: left;
line-height: 21px;
}
.article-scan-content {
font-size: 10pt;
font-size: 10pt;
}
.article-scan-content-div {
margin-top: 2px;
margin-top: 2px;
}
.article-search {
display: grid;
grid-template-columns: auto;
padding-top: 30px;
display: grid;
grid-template-columns: auto;
padding-top: 30px;
}
.article-search-title {
font-weight: bold;
font-size: 14pt;
font-weight: bold;
font-size: 26px;
}
.article-search-description {
font-size: 13pt;
font-size: 22px;
}
.search-box {
width: 62%;
height: 35px;
border-radius: 40px;
border: 1px solid $color-inactive;
outline: none;
padding-left: 15px;
padding-right: 90px;
padding-top: 5px;
padding-bottom: 5px;
color: black;
font-weight: bold;
font-size: 12pt;
width: 100%;
height: 49px;
outline: none;
border: none;
background-color: transparent;
margin-left: 20px;
padding-top: 5px;
text-overflow: ellipsis;
padding-bottom: 5px;
color: black;
font-weight: bold;
font-size: 21px;
caret-color: $hima-button-color;
}
.search-icon {
position: absolute;
top: 13px;
right: 16%;
z-index: 2;
width: 20px;
top: calc(50% - 10px);
z-index: 2;
width: 20px;
margin: 20px;
}
.clear-icon {
position: absolute;
top: 13px;
right: 19%;
z-index: 2;
width: 20px;
z-index: 2;
width: 20px;
margin: 20px;
}
@media screen and (max-width: 964px) {
.search-icon {
right: 14%;
}
.clear-icon {
right: 18%;
}
}
@media screen and (max-width: 663px) {
.search-icon {
right: 12%;
}
.clear-icon {
right: 17%;
}
}
@media screen and (max-width: 495px) {
.search-icon {
right: 10%;
}
}
@media screen and (max-width: 389px) {
.search-icon {
right: 8%;
}
}
@media screen and (max-width: 331px) {
.search-icon {
right: 6%;
}
}
.search-box::placeholder {
color: black;
color: black;
}
.search-wrapper {
margin-top: 20px;
position: relative;
}
.recent-search-continer {
display: grid;
grid-template-columns: auto;
width: 68%;
padding-left: 16%;
padding-top: 40px;
.search-container {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 1190px) {
.recent-search-continer {
width: 72%;
padding-left: 14%;
}
.search-wrapper {
width: 62%;
}
}
.search-wrapper {
margin-top: 20px;
width: 75%;
position: relative;
height: 60px;
border-radius: 40px;
border: 1px solid $color-inactive;
outline: none;
display: flex;
}
.recent-search-continer {
display: grid;
grid-template-columns: auto;
width: 68%;
padding-left: 16%;
padding-top: 40px;
}
@media screen and (max-width: 1190px) {
.recent-search-continer {
width: 72%;
padding-left: 14%;
}
}
.recent-search-header {
display: grid;
grid-template-columns: auto auto
display: grid;
grid-template-columns: auto auto;
}
.recent-search-content {
display: grid;
grid-template-columns: auto;
display: grid;
grid-template-columns: auto;
}
.recent-searches-label {
font-size: 15px;
font-weight: 600;
font-size: 15px;
font-weight: 600;
}
.show-all-label {
font-size: 16px;
font-weight: bold;
color: #f70400;
font-size: 16px;
font-weight: bold;
color: #f70400;
}
.recent-article-container {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 3vh;
margin-top: 20px;
display: grid;
grid-template-columns: min-content auto;
grid-gap: 12px;
margin-top: 20px;
}
.lupe-icon {
width: 32px;
width: 32px;
}
.recent-article-label {
font-size: 16px;
line-height: 21px;
margin-top: 6px
}
font-size: 16px;
line-height: 21px;
margin-top: 6px;
}

21
src/app/components/header/header.component.html
View File

@@ -2,32 +2,35 @@
<div class="three-col-grid-container">
<div class="align-left">
<a routerLink="/dashboard">
<img class="logo-icon" src="/assets/images/Hugendubel_Logo-3x.png">
<img class="logo-icon" src="/assets/images/Hugendubel_Logo-3x.png" />
</a>
</div>
<div class="align-center">
<div class="two-col-grid-container pt-5">
<div class="align-right">
<img class="header-icon" src="/assets/images/Infoboard.svg">
</div>
<a class="align-right" routerLink="/dashboard">
<img class="header-icon" src="/assets/images/Infoboard.svg" />
</a>
<div class="align-left">
<img class="header-icon" src="/assets/images/Notifictation.svg">
<img class="header-icon" src="/assets/images/Notifictation.svg" />
</div>
</div>
</div>
<div class="align-right">
<div class="three-col-grid-container-fixed pt-5">
<div class="align-right">
<img class="header-icon profile-icon" src="/assets/images/Icon_Kundensuche.svg">
<img
class="header-icon profile-icon"
src="/assets/images/Icon_Kundensuche.svg"
/>
</div>
<div class="align-right pt-3">
<span class="profile-name">{{customer}}</span>
<span class="profile-name">{{ customer }}</span>
</div>
<div class="align-right pt-3 pr-4">
<img class="header-icon" src="/assets/images/Dots.svg">
<img class="header-icon" src="/assets/images/Dots.svg" />
</div>
</div>
</div>
</div>
<app-process-header></app-process-header>
</div>
</div>

41
src/app/components/menu/menu.component.scss
View File

@@ -1,36 +1,39 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.menu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: white;
z-index: 100;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
background-color: white;
z-index: 100;
box-shadow: 0px -2px 6px 0px #dde5ec;
}
.menu-grid {
display: grid;
grid-template-columns: auto auto auto auto auto;
padding-top: 10px;
display: grid;
grid-template-columns: auto auto auto auto auto;
padding-top: 20px;
}
.menu-item-grid {
display: grid;
grid-template-columns: auto;
outline: none;
display: grid;
grid-template-columns: auto;
outline: none;
}
.menu-item {
font-size: 10pt;
font-weight: bold;
color: $color-inactive;
font-size: 15px;
line-height: 21px;
font-weight: 600;
color: $color-inactive;
}
.selected {
color: $color-active;
color: $color-active;
}
.menu-icon {
width: 20px;
}
width: 34px;
height: 24px;
}

11
src/app/components/process-header/process-header.component.html
View File

@@ -12,13 +12,16 @@
<div class="align-right">
<div class="grid-container-fix-width-last-col">
<div class="align-right add-process-label">
<span *ngIf="processes.length == 0" class="process-span">{{
startProcessLabel
}}</span>
<span
*ngIf="processes.length == 0"
class="process-span"
(click)="addProcess()"
>{{ startProcessLabel }}</span
>
</div>
<div class="add-process">
<a (click)="addProcess()"
><img class="process-icon" src="/assets/images/add-process.png"
><img class="process-icon" src="/assets/images/add-red.svg"
/></a>
</div>
</div>

32
src/app/components/process-tab/process-tab.component.html
View File

@@ -1,28 +1,32 @@
<div class="grid-item" id="{{process.id}}">
<div class="grid-container" [ngClass]="{'selected-process': process.selected}">
<div class="grid-item" id="{{ process.id }}">
<div
class="grid-container"
[ngClass]="{ 'selected-process': process.selected }"
>
<div (click)="selectProcess(process)">
<img class="process-leading-icon" src="/assets/images/{{process.icon}}.png">
<img
class="process-leading-icon"
src="/assets/images/{{ process.icon }}.png"
/>
</div>
<div class="pt-3" (click)="selectProcess(process)">
<span class="process-name">{{ process.name }}</span>
</div>
<ng-container *ngIf="process.cart">
<div (click)="openCart()">
<img class="process-cart-icon" src="../../../assets/images/Shopping_Cart.svg">
</div>
<div class="pt-3">
<span class="process-cart-number">{{ cartCount }}</span>
</div>
</ng-container>
<ng-container *ngIf="!process.cart">
<div (click)="openCart()">
<img
class="process-cart-icon"
src="../../../assets/images/Shopping_Cart.svg"
/>
</div>
<div class="pt-3">
<span class="">&nbsp;</span>
<span class="process-cart-number">{{ cartCount }}</span>
</div>
</ng-container>
<div>
<a (click)="deleteProcess(process)">
<img class="process-delete-icon" src="/assets/images/close.svg">
<img class="process-delete-icon" src="/assets/images/close.svg" />
</a>
</div>
</div>
</div>
</div>

54
src/app/components/process-tab/process-tab.component.scss
View File

@@ -1,54 +1,58 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.process-tab {
border-bottom: 2px solid black;
border-bottom: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: min-content max-content max-content max-content min-content;
grid-column-gap: 1vh;
height: 36px;
padding-top: 2px;
display: flex;
flex-direction: row;
height: 36px;
padding-top: 2px;
& > * {
margin-left: 3px;
margin-right: 3px;
}
}
.process-delete-icon {
width: 14px;
margin-top: 6px;
width: 14px;
margin-left: 5px;
margin-top: 6px;
}
.process-cart-icon {
margin-top: 6px;
width: 19px;
margin-top: 6px;
width: 19px;
}
.process-leading-icon {
width: 25px;
width: 25px;
}
.grid-item {
display: inline-block;
padding-right: 20px;
display: inline-block;
padding-right: 20px;
}
.selected-process {
border-bottom: 3px solid $hima-color-red;
border-bottom: 3px solid $hima-color-red;
}
.not-selected-process {
border-bottom: 3px solid white;
border-bottom: 3px solid white;
}
.process-name {
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}
.process-cart-number {
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}

154
src/app/components/product-card/product-card.component.html
View File

@@ -1,70 +1,92 @@
<div class="card-container" [ngClass]="{'recommanded': product.recommandation}" (click)="productDetails(product)">
<div class="icon-container">
<img class="product-icon" [src]="imageUrl$ | async">
<div
class="card-container"
[ngClass]="{ recommanded: product.recommandation }"
(click)="productDetails(product)"
>
<div class="icon-container">
<img class="product-icon" [src]="imageUrl$ | async" />
</div>
<div class="content-container">
<div class="author align-left">
<span>{{ product.author }}</span>
</div>
<div class="content-container">
<div class="author align-left">
<span>{{product.author}}</span>
<div class="title-price">
<div
class="title align-left"
[ngClass]="{ 'title-grid': product.recommandation }"
>
<div class="rec-icon-container" *ngIf="product.recommandation">
<img src="../../../assets/images/Empfehlungen_Icon.svg" />
</div>
<div class="title-price">
<div class="title align-left" [ngClass]="{'title-grid': product.recommandation}">
<div class="rec-icon-container" *ngIf="product.recommandation">
<img src="../../../assets/images/Empfehlungen_Icon.svg">
</div>
<div>
<span>{{product.title}}</span>
</div>
</div>
<div class="price align-right">
<span>{{product.price}}</span>
<span class="currency">{{product.currency}}</span>
</div>
</div>
<div class="type-stock">
<div class="type align-left">
<div class="type-icon-container align-left">
<img class="type-icon" src="../../../assets/images/Icon_{{product.typeIcon}}.svg">
</div>
<div class="type-text align-left">
<span>{{product.type}}</span>
</div>
</div>
<div class="stock-container align-right">
<div *ngIf="product.availability" class="available-stock">
<div class="available-icon-container">
<img class="available-icon" src="../../../assets/images/Check.svg">
</div>
<div class="available-text">
<span>Lieferbar</span>
</div>
<div class="stock-icon-wraper">
<img *ngIf="!product.recommandation" class="stock-icon" src="../../../assets/images/Icon_House.svg">
<img *ngIf="product.recommandation" class="stock-icon" src="../../../assets/images/Icon_House_recommended.svg">
</div>
<div class="stock">
<span>{{product.itemsInStock}}x</span>
</div>
</div>
<div *ngIf="!product.availability" class="not-available-stock">
<span>{{product.notAvailableReason}}</span>
</div>
</div>
</div>
<div class="publisher-order">
<div class="publisher-serial">
<div class="publisher align-left wrap-text-more">
<span>{{product.publisher}}</span>
</div>
<div class="align-left">
<span>|</span>
</div>
<div class="serial align-left">
<span>{{product.serial}}</span>
</div>
</div>
<div class="order">
<span>{{product.category}}</span>
</div>
<div>
<span>{{ product.title }}</span>
</div>
</div>
<div class="price align-right">
<span>{{ product.price }}</span>
<span class="currency">{{ product.currency }}</span>
</div>
</div>
</div>
<div class="type-stock">
<div class="type align-left">
<div class="type-icon-container align-left">
<img
class="type-icon"
src="../../../assets/images/Icon_{{ product.typeIcon }}.svg"
*ngIf="!!product.typeIcon && product.typeIcon != '--'"
/>
</div>
<div class="type-text align-left">
<span>{{ product.type }}</span>
</div>
</div>
<div class="stock-container align-right">
<div *ngIf="product.availability" class="available-stock">
<div class="available-icon-container">
<img
class="available-icon"
src="../../../assets/images/Check.svg"
/>
</div>
<div class="available-text">
<span>Lieferbar</span>
</div>
<div class="stock-icon-wraper">
<img
*ngIf="!product.recommandation"
class="stock-icon"
src="../../../assets/images/Icon_House.svg"
/>
<img
*ngIf="product.recommandation"
class="stock-icon"
src="../../../assets/images/Icon_House_recommended.svg"
/>
</div>
<div class="stock">
<span>{{ product.itemsInStock }}x</span>
</div>
</div>
<div *ngIf="!product.availability" class="not-available-stock">
<span>{{ product.notAvailableReason }}</span>
</div>
</div>
</div>
<div class="publisher-order">
<div class="publisher-serial">
<div class="publisher align-left wrap-text-more">
<span>{{ product.publisher }}</span>
</div>
<div class="align-left">
<span>|</span>
</div>
<div class="serial align-left">
<span>{{ product.serial }}</span>
</div>
</div>
<div class="order">
<span>{{ product.category }}</span>
</div>
</div>
</div>
</div>

16
src/app/components/search-results/search-results.component.html
View File

@@ -1,7 +1,19 @@
<div class="result-container">
<app-filter></app-filter>
<div id="start" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="true">
<div
id="start"
infiniteScroll
[infiniteScrollDistance]="1"
[infiniteScrollThrottle]="50"
(scrolled)="onScroll()"
[scrollWindow]="true"
>
<app-product-card *ngFor="let product of products" [product]="product">
</app-product-card>
</div>
</div>
<app-loading
[style.padding.px]="30"
loading="true"
text="Inhalte werden geladen"
></app-loading>
</div>

1
src/app/modules/components.module.ts
View File

@@ -20,6 +20,7 @@ import { NewsletterSignupModule } from './newsletter-signup/newsletter-signup.mo
import { ContentPageComponent } from '../pages/content/content.component';
import { CustomerSearchModule } from './customer-search/customer-search.module';
import { CartModule } from './cart/cart-modul';
import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [

6
src/app/modules/debug/debug.module.ts
View File

@@ -7,6 +7,7 @@ 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';
import { LoadingAnimationComponent } from './loading-animation/loading-animation.component';
const routes: Routes = [
{
@@ -21,6 +22,10 @@ const routes: Routes = [
path: 'recom',
component: RecommendationDebugComponent
},
{
path: 'loading',
component: LoadingAnimationComponent
},
{ path: '**', redirectTo: 'card-stack' }
];
@@ -35,6 +40,7 @@ const routes: Routes = [
declarations: [
RecommendationDebugComponent,
CardStackAnimationComponent,
LoadingAnimationComponent,
NewsletterDebugComponent
]
})

18
src/app/modules/debug/loading-animation/loading-animation.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-loading-animation',
template: `
<app-loading
[loading]="isLoading"
(click)="isLoading = !isLoading"
text="Animation loading text"
></app-loading>
`
})
export class LoadingAnimationComponent implements OnInit {
isLoading = true;
constructor() {}
ngOnInit() {}
}

27
src/app/shared/components/loading/loading.component.scss Normal file
View File

@@ -0,0 +1,27 @@
:host() {
display: flex;
position: relative;
width: 100%;
height: 100%;
flex-direction: column;
min-height: 40px;
align-items: center;
justify-content: center;
}
span {
margin-top: 16px;
font-family: 'Open Sans';
font-weight: 600;
font-size: 16px;
color: rgba(90, 114, 138, 1);
}
.rotate {
margin-top: 10px;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}

47
src/app/shared/components/loading/loading.component.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Component, OnInit, Input } from '@angular/core';
import {
trigger,
transition,
query,
stagger,
animate,
style,
state
} from '@angular/animations';
@Component({
selector: 'app-loading',
template: `
<ng-container *ngIf="loading" [@loading]="loading">
<img
src="/assets/images/Icon_Loading.svg"
class="rotate"
[@loading]="loading"
/>
<span>{{ text }}</span>
</ng-container>
`,
styleUrls: ['loading.component.scss'],
animations: [
trigger('loading', [
state('void', style({ opacity: 0, transform: 'translateY(-100%)' })),
transition(':enter', [
animate('0.2s ease-in'),
style({ opacity: 1, transform: 'translateY(0)' })
]),
transition(':leave', [
animate(
'0.2s ease-in',
style({ opacity: 0, transform: 'translateY(-100%)' })
)
])
])
]
})
export class LoadingComponent implements OnInit {
@Input() loading = false;
@Input() text = '';
constructor() {}
ngOnInit() {}
}

3
src/app/shared/shared.module.ts
View File

@@ -1,8 +1,9 @@
import { CardComponent } from './components/card/card.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { LoadingComponent } from './components/loading/loading.component';
const components = [CardComponent];
const components = [CardComponent, LoadingComponent];
@NgModule({
imports: [CommonModule],
exports: [...components],

11
src/assets/images/Icon_Loading.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Icon_Loading</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_07_Hugendubel_Instoreapp_Kunden_Artikelrecherche_Ergebnisse_2_loadmore" transform="translate(-364.000000, -831.000000)" fill="#5A728A">
<path d="M375.296923,859.703077 C375.897692,860.303846 375.897692,861.277692 375.296923,861.878462 L372.033077,865.142308 C371.432308,865.743077 370.458462,865.743077 369.857692,865.142308 C369.256923,864.541538 369.256923,863.567692 369.857692,862.966923 L373.121538,859.703077 C373.722308,859.102308 374.696154,859.102308 375.296923,859.703077 Z M398.142308,836.857692 C398.743077,837.458462 398.743077,838.432308 398.142308,839.033077 L394.878462,842.296923 C394.277692,842.897692 393.303846,842.897692 392.703077,842.296923 C392.102308,841.696154 392.102308,840.722308 392.703077,840.121538 L395.966923,836.857692 C396.566923,836.256923 397.541538,836.256923 398.142308,836.857692 Z M371.692308,851 C371.692308,851.85 371.003846,852.538462 370.153846,852.538462 L365.538462,852.538462 C364.688462,852.538462 364,851.85 364,851 C364,850.15 364.688462,849.461538 365.538462,849.461538 L370.153846,849.461538 C371.003846,849.461538 371.692308,850.15 371.692308,851 Z M404,851 C404,851.85 403.311538,852.538462 402.461538,852.538462 L397.846154,852.538462 C396.996154,852.538462 396.307692,851.85 396.307692,851 C396.307692,850.15 396.996154,849.461538 397.846154,849.461538 L402.461538,849.461538 C403.311538,849.461538 404,850.15 404,851 Z M375.296923,842.296923 C374.696154,842.897692 373.722308,842.897692 373.121538,842.296923 L369.857692,839.033077 C369.256923,838.432308 369.256923,837.458462 369.857692,836.857692 C370.458462,836.256923 371.432308,836.256923 372.033077,836.857692 L375.296923,840.121538 C375.897692,840.722308 375.897692,841.696154 375.296923,842.296923 Z M398.142308,865.142308 C397.541538,865.743077 396.567692,865.743077 395.966923,865.142308 L392.703077,861.878462 C392.102308,861.277692 392.102308,860.303846 392.703077,859.703077 C393.303846,859.102308 394.277692,859.102308 394.878462,859.703077 L398.142308,862.966923 C398.743077,863.566923 398.743077,864.541538 398.142308,865.142308 Z M384,838.692308 C383.15,838.692308 382.461538,838.003846 382.461538,837.153846 L382.461538,832.538462 C382.461538,831.688462 383.15,831 384,831 C384.85,831 385.538462,831.688462 385.538462,832.538462 L385.538462,837.153846 C385.538462,838.003846 384.85,838.692308 384,838.692308 Z M384,871 C383.15,871 382.461538,870.311538 382.461538,869.461538 L382.461538,864.846154 C382.461538,863.996154 383.15,863.307692 384,863.307692 C384.85,863.307692 385.538462,863.996154 385.538462,864.846154 L385.538462,869.461538 C385.538462,870.311538 384.85,871 384,871 Z" id="Icon_Loading"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

50
src/assets/images/add-red.svg
View File

@@ -1,36 +1,14 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 459.739 459.739" style="enable-background:new 0 0 459.739 459.739;" xml:space="preserve" width="512px" height="512px">
<path d="M229.869,0C102.917,0,0,102.917,0,229.87c0,126.952,102.917,229.869,229.869,229.869s229.87-102.918,229.87-229.869 C459.739,102.917,356.821,0,229.869,0z M313.677,260.519h-53.158v53.158c0,16.925-13.724,30.649-30.649,30.649 c-16.926,0-30.649-13.724-30.649-30.649v-53.158h-53.156c-16.926,0-30.65-13.723-30.65-30.649c0-16.927,13.724-30.65,30.65-30.65 h53.156v-53.156c0-16.927,13.724-30.65,30.649-30.65c16.926,0,30.649,13.724,30.649,30.65v53.156h53.158 c16.924,0,30.648,13.723,30.648,30.65C344.325,246.796,330.601,260.519,313.677,260.519z" fill="#ea0000"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Vorgang</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_19_Hugendubel_Instoreapp_Kunden_Warenkorb_1" transform="translate(-719.000000, -100.000000)">
<g id="+Vorgang" transform="translate(719.000000, 100.000000)">
<circle id="Oval" fill="#F70400" cx="17" cy="17" r="17"></circle>
<path d="M17,9.53333333 C16.5581867,9.53333333 16.2,9.89150667 16.2,10.3333333 L16.2,15.66668 L10.8666667,15.66668 C10.4248267,15.66668 10.0666667,16.0248373 10.0666667,16.4666773 C10.0666667,16.9084907 10.4248267,17.2666773 10.8666667,17.2666773 L16.2,17.2666773 L16.2,22.6000107 C16.2,23.041824 16.5581867,23.4000107 17,23.4000107 C17.44184,23.4000107 17.8,23.041824 17.8,22.6000107 L17.8,17.2666773 L23.1333333,17.2666773 C23.5751467,17.2666773 23.9333333,16.9084907 23.9333333,16.4666773 C23.9333333,16.0248373 23.5751467,15.66668 23.1333333,15.66668 L17.8,15.66668 L17.8,10.3333333 C17.8,9.89150667 17.44184,9.53333333 17,9.53333333 Z" id="Plus" stroke="#FFFFFF" stroke-width="0.7" fill="#FFFFFF" transform="translate(17.000000, 16.466672) rotate(-360.000000) translate(-17.000000, -16.466672) "></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
src/assets/images/search.svg
View File

@@ -1,2 +1,2 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000" stroke-width="10" stroke="#ea0000"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 641 B

After

Width:  |  Height:  |  Size: 676 B