Skip to content

Commit

Permalink
send feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@pciavald
pciavald committed Jun 9, 2017
1 parent ea2dbd1 commit fb8e3d0
Show file tree
Hide file tree
Showing 4 changed files with 360 additions and 5 deletions.
4 changes: 3 additions & 1 deletion src/app/settings/settings.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

/* card element */
.card {
position: relative;
background-color: white;
padding: 20px;
margin: 20px 0 20px 0;
Expand Down Expand Up @@ -51,8 +52,9 @@ button:active {
}

/* Particl inputs */
input[type=text] {
input[type="text"] {
background-color: #FBFBFB;
border: 1px solid #EDEDED;
border-radius: 3px;
padding: 4px;
}
176 changes: 173 additions & 3 deletions src/app/wallet/send/send.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,173 @@
<p>
send works!
</p>
<app-header>
<div class="container-fluid header">
<ul class="header-nav">
<li [class.active]="type == 'sendPayment'">
<a href="javascript:void(0)" (click)="sendTab('sendPayment')">
Send payment
</a>
</li>
<li [class.active]="type == 'balanceTransfer'">
<a href="javascript:void(0)" (click)="sendTab('balanceTransfer')">
Balance transfer
</a>
</li>
</ul>
<div class="pull-right header-option"
(click)="toggleAdvanced()"
[ngClass]="{selected: advanced}">
<div class="header-option-container">
<div class="header-option-text">
<span class="icon fa fa-cog header-option-icon"></span>
<span>
Advanced options
</span>
</div>
</div>
</div>
</div>
</app-header>



<div class="container-fluid">

<div *ngIf="type == 'sendPayment'">

<div *ngIf="advanced" class="card row">
<div class="input-label col-xs-3">From account</div>
<span class="col-xs-4 public-private">
<input type="radio" name="from" id="fromPublic"
[(ngModel)]="send.fromType" value="public">
<label for="fromPublic" class="input-info-label">Public account</label>
<input type="radio" name="from" id="fromPrivate"
[(ngModel)]="send.fromType" value="private">
<label for="fromPrivate" class="input-info-label">Private account</label>
</span>
<span class="separator"></span>
<span class="col-xs-4 balance">
<span class="balance-label">Balance: </span>
<span class="balance-amount">{{getBalance(send.fromType)}} PART</span>
</span>
</div>

<div class="card row">
<div class="input-label col-xs-3">Pay to</div>
<input class="col-xs-4" type="text"
placeholder="The address to send the payment to"
[(ngModel)]="send.toAddress">
<input class="col-xs-2" type="text" placeholder="Enter a label"
[(ngModel)]="send.toLabel">
<span class="separator"></span>
<span class="col-xs-2">
<span class="icon fa fa-users"></span>
<span class="icon fa fa-clone"></span>
<span class="icon fa fa-times"></span>
</span>
</div>

<div class="card row">
<div class="input-label col-xs-3">Narration</div>
<input class="col-xs-4" type="text"
placeholder="Enter a short note to send with a payment"
maxlength="24"
[(ngModel)]="send.note">
</div>

<div class="card row">
<div class="input-label col-xs-3">Amount</div>
<input class="col-xs-4" type="text"
placeholder="0.0000000000000000"
[(ngModel)]="send.amount">
<select [(ngModel)]="send.currency">
<option value="part">PART</option>
</select>
</div>

<div *ngIf="advanced" class="card row">
<div class="input-label col-xs-3">Privacy level</div>
<div class="col-xs-4 nopadding">
<div class="progress">
<div id="privacy" class="progress-bar" role="progressbar"
[ngStyle]="{ 'width': send.privacy + '%' }">
</div>
</div>
<div class="privacy-labels">
<span class="privacy-label" (click)="send.privacy = 10">Normal</span>
<span class="privacy-label" (click)="send.privacy = 50">Medium</span>
<span class="privacy-label" (click)="send.privacy = 100">High</span>
</div>
</div>
</div>

</div>



<div *ngIf="type == 'balanceTransfer'">

<div class="card row">
<div class="input-label col-xs-3">From account</div>
<span class="col-xs-4 public-private">
<input type="radio" name="from" id="fromPublic"
[(ngModel)]="send.fromType" value="public">
<label for="fromPublic" class="input-info-label">Public account</label>
<input type="radio" name="from" id="fromPrivate"
[(ngModel)]="send.fromType" value="private">
<label for="fromPrivate" class="input-info-label">Private account</label>
</span>
<span class="separator"></span>
<span class="col-xs-4 balance">
<span class="balance-label">Balance: </span>
<span class="balance-amount">{{getBalance(send.fromType)}} PART</span>
</span>
</div>

<div *ngIf="advanced" class="card row">
<div class="input-label col-xs-3">To account</div>
<span class="col-xs-4 public-private">
<input type="radio" name="to" id="toPublic"
[(ngModel)]="send.toType" value="public">
<label for="toPublic" class="input-info-label">Public account</label>
<input type="radio" name="to" id="toPrivate"
[(ngModel)]="send.toType" value="private">
<label for="toPrivate" class="input-info-label">Private account</label>
</span>
<span class="separator"></span>
<span class="col-xs-4 balance">
<span class="balance-label">Balance: </span>
<span class="balance-amount">{{getBalance(send.toType)}} PART</span>
</span>
</div>

<div *ngIf="advanced" class="card row">
<div class="input-label col-xs-3">Pay to</div>
<input class="col-xs-4" type="text"
placeholder="The address to send the payment to"
[(ngModel)]="send.toAddress">
<input class="col-xs-2" type="text" placeholder="Enter a label" [(ngModel)]="send.toLabel">
<span class="separator"></span>
<span class="col-xs-2">
<span class="icon fa fa-users"></span>
<span class="icon fa fa-clone"></span>
<span class="icon fa fa-times"></span>
</span>
</div>

<div class="card row">
<div class="input-label col-xs-3">Amount</div>
<input class="col-xs-4" type="text"
placeholder="0.0000000000000000"
[(ngModel)]="send.amount">
<select [(ngModel)]="send.currency">
<option value="part">PART</option>
</select>
</div>

</div>

<div class="pull-right">
<button (click)="clear()">Clear all</button>
<button class="validate" (click)="pay()">Make payment</button>
</div>

</div>
143 changes: 143 additions & 0 deletions src/app/wallet/send/send.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
// TODO vertical-center 50% logic as a class
// TODO global colors

.balance-label {
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
}

span {
padding: 0;
}

input[type="text"] {
margin-right: 20px;
}

// TODO replace with nomargin class
.row {
margin: 0;
}

.nopadding {
padding: 0;
}

.public-private {
display: flex;
flex-direction: row;
justify-content: space-between;
}

span.icon {
margin-right: 8px;
}

span.icon:hover {
cursor: pointer;
}

.privacy-labels {
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

.privacy-label {
text-transform: uppercase;
font-weight: bold;
color: #9aa2ab;
font-size: 0.8em;
}

.privacy-label:hover {
color: black;
cursor: pointer;
}

/* Particl progress bar */
.progress {
height: 10px;
}

.progress-bar {
background-color: #00e8af;
}

/* Particl Card view */
.separator {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0px;
height: 60%;
border: 1px solid #efefef;
}

.separator + span {
margin-left: 20px;
}

.input-info-label {
font-weight: normal;
font-size: 0.9em;
margin: 0 10px 0 10px;
text-transform: uppercase;
color: #9aa2ab;
}

/* Particl Header | Header option */
// TODO integrate to header component
.header {
position: relative;
}

.header-option {
position: absolute;
right: 0;
top: 0;
height: 100%;
}

.header-option:hover {
color: black;
cursor: pointer;
}

.header-option-icon {
color: #00e8af;
background-color: transparent;
padding: 4px;
border-radius: 5px;
margin: 0 8px 0 15px;
}

.header-option.selected .header-option-icon {
color: white;
background-color: #00e8af;
}

.header-option-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.header-option.selected .header-option-text {
color: black;
}

.header-option-container {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 60%;
width: 200px;
border-left: 2px solid #efefef;
}
42 changes: 41 additions & 1 deletion src/app/wallet/send/send.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,53 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-send',
templateUrl: './send.component.html',
styleUrls: ['./send.component.scss']
// TODO merge / globalize styles
styleUrls: ['./send.component.scss', '../../settings/settings.component.scss']
})
export class SendComponent implements OnInit {

type: string = 'sendPayment';
advanced: boolean = false;
send: Object = {
fromType: 'public',
toType: 'public',
currency: 'part',
privacy: 50
};

constructor() { }

ngOnInit() {
}

sendTab(type: string) {
this.type = type;
}

toggleAdvanced() {
this.advanced = !this.advanced;
}

getBalance(account: string) {
if (account === 'public') {
return (12345);
}
if (account === 'private') {
return (54321);
}
}

clear() {
this.send = {
fromType: 'public',
toType: 'public',
currency: 'part',
privacy: 50
};
}

pay() {
console.log(this.type, this.send);
}

}

0 comments on commit fb8e3d0

Please sign in to comment.