sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

{HIMA-15} - Added signature lib and component

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-07 14:15:32 +01:00
parent 0f8b97500c
commit 182b358cdb
10 changed files with 251 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -20,6 +20,7 @@
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngxs/store": "^3.3.4",
"angular2-signaturepad": "^2.8.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",

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

@@ -1,3 +1,4 @@
import { NewsletterSignupModule } from './newsletter-signup/newsletter-signup.module';
import { NgModule } from '@angular/core';
import { HeaderComponent } from 'src/app/components/header/header.component';
import { ProcessHeaderComponent } from 'src/app/components/process-header/process-header.component';
@@ -37,7 +38,8 @@ import { FilterItemComponent } from '../components/filter-item/filter-item.compo
imports: [
CommonModule,
AppRoutingModule,
FormsModule
FormsModule,
NewsletterSignupModule
],
exports: [
HeaderComponent,
@@ -56,4 +58,4 @@ import { FilterItemComponent } from '../components/filter-item/filter-item.compo
FilterItemComponent
]
})
export class ComponentsModule { }
export class ComponentsModule {}

41
src/app/modules/newsletter-signup/components/signature-pad/signature-pad.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
@Component({
selector: 'app-signature-pad',
template: `
<signature-pad
[options]="signaturePadOptions"
(onBeginEvent)="drawStart()"
(onEndEvent)="drawComplete()"
></signature-pad>
`
})
export class SignaturePadComponent implements AfterViewInit {
@ViewChild(SignaturePad) signaturePad: SignaturePad;
public signaturePadOptions: Object = {
// passed through to szimek/signature_pad constructor
minWidth: 1,
canvasWidth: 550,
canvasHeight: 200
};
constructor() {}
ngAfterViewInit() {
// this.signaturePad is now available
this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
}
drawComplete() {
// will be notified of szimek/signature_pad's onEnd event
console.log(this.signaturePad.toDataURL());
}
drawStart() {
// will be notified of szimek/signature_pad's onBegin event
console.log('begin drawing');
}
}

29
src/app/modules/newsletter-signup/newsletter-signup.component.html Normal file
View File

@@ -0,0 +1,29 @@
<div class="container">
<div class="header">
<img class="icon" src="/assets/images/Empfehlungen_Icon_blue.svg" />
<span>Empfehlungen</span>
</div>
<h1>Passende Newsletter abonnieren?</h1>
<div class="options">
<span class="option" *ngFor="let opt of options">
<span class="checkbox" (click)="opt.selected = !opt.selected">
<i class="checked" *ngIf="opt.selected"></i>
</span>
<span class="text">{{ opt.text }}</span>
</span>
</div>
<app-signature-pad class="pad"></app-signature-pad>
<caption>
Signature
</caption>
<p class="muted">
Mit meiner Unterschrift erkläre ich mich damit einverstanden, dass die
Hugendubel mir regelmäßig Informationen zum Thema Versanstaltungen
zuschickt. Meine Einwilligung kann ich jederzeit gegenüber Hugendubel
widerrufen.
</p>
<a class="btn active" (click)="(false)">Abonnieren</a>
</div>

104
src/app/modules/newsletter-signup/newsletter-signup.component.scss Normal file
View File

@@ -0,0 +1,104 @@
.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 {
font-family: 'Open Sans';
font-size: 18px;
font-weight: 600;
color: rgba(0, 0, 0, 1);
margin: 0;
margin-bottom: 25px;
}
caption {
font-family: 'Open Sans';
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 1);
text-align: left;
line-height: 21px;
}
p.muted {
width: 70%;
font-family: 'Open Sans';
font-size: 16px;
font-weight: 600;
color: rgba(179, 195, 212, 1);
text-align: center;
line-height: 21px;
margin-top: 25px;
margin-bottom: 35px;
}
}
.header {
width: 100%;
text-align: left;
color: rgba(23, 32, 98, 1);
display: flex;
align-items: center;
margin-bottom: 30px;
.icon {
width: 22px;
height: 20px;
background-image: url(/assets/images/Empfehlungen_Icon.svg);
}
span {
font-family: 'Open Sans';
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
margin-left: 10px;
}
}
.options {
font-family: 'Open Sans';
font-size: 16px;
color: rgba(0, 0, 0, 1);
margin-bottom: 60px;
display: flex;
flex: row;
.option {
display: flex;
align-items: center;
flex: row;
}
.checkbox {
display: inline-block;
height: 22px;
width: 22px;
border: solid 1px #a3b4c8;
margin: 0 10px;
}
}
.pad {
display: block;
border: #e1ebf5 2px solid;
margin-bottom: 15px;
}
.btn {
font-family: 'Open Sans';
font-size: 18px;
font-weight: bold;
text-align: center;
border: none;
border-radius: 25px;
color: #ffffff;
background-color: #f70400;
width: 149px;
padding: 12px;
cursor: pointer;
bottom: 25px;
}

26
src/app/modules/newsletter-signup/newsletter-signup.component.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-newsletter-signup',
templateUrl: 'newsletter-signup.component.html',
styleUrls: ['newsletter-signup.component.scss']
})
export class NewsletterSignupComponent implements OnInit {
options = [
{
text: 'Neues von Inger-Maria Mahlke',
selected: false
},
{
text: 'Thema Fantasy',
selected: false
},
{
text: 'Veranstaltungen',
selected: false
}
];
constructor() {}
ngOnInit() {}
}

16
src/app/modules/newsletter-signup/newsletter-signup.module.ts Normal file
View File

@@ -0,0 +1,16 @@
import { SignaturePadModule } from 'angular2-signaturepad';
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],
exports: [NewsletterSignupComponent],
declarations: [NewsletterSignupComponent, SignaturePadComponent],
providers: []
})
export class NewsletterSignupModule {}

16
src/app/shared/routes/routes.ts
View File

@@ -5,13 +5,15 @@ import { SearchResultsComponent } from 'src/app/components/search-results/search
import { ProductDetailsComponent } from 'src/app/components/product-details/product-details.component';
import { CustomerSearchComponent } from 'src/app/components/customer-search/customer-search.component';
import { CustomerSearchResultComponent } from 'src/app/components/customer-search-result/customer-search-result.component';
import { NewsletterSignupComponent } from 'src/app/modules/newsletter-signup/newsletter-signup.component';
export const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'article-search', component: ArticleSearchComponent },
{ path: 'customer-search', component: CustomerSearchComponent },
{ path: 'customer-search-result', component: CustomerSearchResultComponent },
{ path: 'search-results', component: SearchResultsComponent },
{ path: 'product-details/:id', component: ProductDetailsComponent }
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'article-search', component: ArticleSearchComponent },
{ path: 'customer-search', component: CustomerSearchComponent },
{ path: 'customer-search-result', component: CustomerSearchResultComponent },
{ path: 'search-results', component: SearchResultsComponent },
{ path: 'product-details/:id', component: ProductDetailsComponent },
{ path: 'newsletter', component: NewsletterSignupComponent }
];

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

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="17px" viewBox="0 0 24 17" 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>Empfehlungen_Icon</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_02_01_Hugendubel_Instoreapp_Kunden_Info_#1" transform="translate(-41.000000, -680.000000)" fill="#172062" fill-rule="nonzero">
<path d="M57.6875824,680.006269 C57.6190893,680.014238 57.5519146,680.031038 57.4877309,680.05625 L49.6185866,683.205044 L43.1317469,683.205044 C41.9645868,683.205044 41,684.169979 41,685.337561 L41,689.602609 C41,690.770178 41.9645868,691.735108 43.1317469,691.735108 L43.6646839,691.735108 L43.6646839,694.933896 C43.6646839,695.315788 43.7804792,695.724773 44.0727135,696.041785 C44.3649479,696.358824 44.8187585,696.533276 45.2634941,696.533276 L46.3293677,696.533276 C46.7741034,696.533276 47.2279139,696.358824 47.520148,696.041785 C47.8123824,695.724773 47.928178,695.315788 47.928178,694.933896 L47.928178,691.735108 L49.6435681,691.735108 L57.4877309,694.875576 C57.7341537,694.975252 58.013984,694.945895 58.2343737,694.797245 C58.4547633,694.648596 58.5868897,694.400093 58.5869131,694.134192 L58.5869131,687.470076 L58.5869131,680.805962 C58.5886955,680.575367 58.490893,680.355224 58.3186007,680.20202 C58.1463084,680.048816 57.9162961,679.977463 57.6875824,680.006269 Z M64.1078047,680.797634 C63.9830366,680.811245 63.8632245,680.854051 63.7580649,680.922586 L59.494571,683.588232 C59.2516183,683.73979 59.1080699,684.009604 59.1180979,684.295852 C59.1281259,684.582099 59.2902034,684.841199 59.543166,684.975371 C59.7961285,685.109544 60.1014614,685.098361 60.3439388,684.946043 L64.6074329,682.280399 C64.9324497,682.088092 65.0786442,681.694519 64.958027,681.336559 C64.8374098,680.978599 64.482875,680.753872 64.1078047,680.797634 Z M56.9881029,681.988843 L56.9881029,687.470076 L56.9881029,692.94297 L50.5928616,690.385619 L50.5928616,684.546196 L56.9881029,681.988843 Z M43.1317469,684.804432 L46.3293677,684.804432 L46.3293677,690.135727 L44.3808174,690.135727 L43.1317469,690.135727 C42.8226732,690.135727 42.5988103,689.911781 42.5988103,689.602609 L42.5988103,685.337561 C42.5988103,685.028376 42.8226732,684.804432 43.1317469,684.804432 Z M47.928178,684.804432 L48.9940513,684.804432 L48.9940513,690.135727 L47.928178,690.135727 L47.928178,684.804432 Z M59.8359836,686.670383 C59.5503805,686.685263 59.2944081,686.851436 59.1644887,687.106305 C59.0345692,687.361173 59.0504407,687.666018 59.2061244,687.906007 C59.3618081,688.145996 59.633652,688.284668 59.9192551,688.269787 L64.1827489,688.269787 C64.4708951,688.273635 64.7388145,688.12206 64.8840095,687.87305 C65.0292044,687.624039 65.0292044,687.316131 64.8840095,687.06712 C64.7388145,686.81811 64.4708951,686.666535 64.1827489,686.670383 L59.9192551,686.670383 C59.8915168,686.668936 59.8637219,686.668936 59.8359836,686.670383 Z M59.8859464,689.860821 C59.5320777,689.871455 59.2273387,690.113636 59.1369571,690.456056 C59.0465755,690.798477 59.1920768,691.159585 59.494571,691.343589 L63.7580649,694.009233 C64.0005484,694.161789 64.3060334,694.173119 64.5591437,694.038943 C64.812254,693.904768 64.9744153,693.645535 64.9843821,693.359153 C64.994349,693.072771 64.8506024,692.802884 64.6074329,692.651424 L60.3439388,689.985781 C60.2074429,689.898702 60.0477366,689.855127 59.8859464,689.860821 Z M45.2634941,691.735108 L46.3293677,691.735108 L46.3293677,694.933896 L45.2634941,694.933896 L45.2634941,691.735108 Z" id="Empfehlungen_Icon"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1117
yarn.lock
View File

File diff suppressed because it is too large Load Diff