anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'feature/send' of github.com:nacardin/bitpay-wallet into nacardin-feature/send

Browse source
This commit is contained in:
Jason Dreyzehner 2016-09-08 14:25:58 -04:00
commit dbf2bf93e9
6 changed files with 158 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

75
public/views/amount.html
View file

@ -1,4 +1,4 @@
<ion-view> <ion-view id="view-amount">
<ion-nav-bar class="bar-royal"> <ion-nav-bar class="bar-royal">
<ion-nav-buttons side="primary"> <ion-nav-buttons side="primary">
<button class="button back-button" ng-click="$ionicGoBack()"> <button class="button back-button" ng-click="$ionicGoBack()">
@ -7,24 +7,26 @@
</ion-nav-buttons> </ion-nav-buttons>
</ion-nav-bar> </ion-nav-bar>
<ion-content class="calculator" scroll="false" class="amount" ng-controller="amountController" ng-init="init()"> <ion-content scroll="false" class="amount" ng-controller="amountController" ng-init="init()">
<div class="card"> <div>
<div class="item item-divider" translate>Recipient</div> <div class="item item-no-bottom-border" translate>Recipient</div>
<div class="item item-text-wrap item-icon-left"> <div class="item item-text-wrap item-icon-left bitcoin-address">
<i class="icon ion-ios-person-outline"></i> <i class="icon ion-ios-person-outline"></i>
{{toName || toAddress}} <span>{{toName || toAddress}}</span>
</div> </div>
</div> </div>
<div class="card"> <div class="amount-pane">
<div class="item item-divider" translate>Amount</div>
<div class="item item-text-wrap item-button-right"> <div class="amount-bar">
<div class="title" translate>Amount</div>
<a class="postfix" ng-click="toggleAlternative()" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a> <a class="postfix" ng-click="toggleAlternative()" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a>
<a class="postfix" ng-click="toggleAlternative()" ng-show="!showAlternativeAmount">{{unitName}}</a> <a class="postfix" ng-click="toggleAlternative()" ng-show="!showAlternativeAmount">{{unitName}}</a>
</div>
<div class="amount">
<div class="text-light text-black m15b" ng-class="{'size-28': smallFont, 'size-36': !smallFont}"><span> {{amount || "0.00" }}</div> <div class="text-light text-black m15b" ng-class="{'size-28': smallFont, 'size-36': !smallFont}"><span> {{amount || "0.00" }}</div>
<div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount"> <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">
{{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span> {{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
@ -33,45 +35,42 @@
{{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span> {{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="button-calc"> <div class="keypad">
<div class="row m5b"> <div class="row">
<button class="col columns col-25 text-center m0 operator" ng-click="resetAmount()"> <div class="col col-25 col-offset-75 operator-send"
AC
</button>
<button class="col columns text-center text-white m0"
ng-style="{'background-color':recipientColor || '#4b6178'}"
ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()"> ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()">
OK <i class="icon ion-ios-arrow-thin-right"></i>
</button> </div>
</div> </div>
<div class="row text-center"> <div class="row">
<div class="col columns" ng-click="pushDigit('7')">7</div> <div class="col digit" ng-click="pushDigit('7')">7</div>
<div class="col columns" ng-click="pushDigit('8')">8</div> <div class="col digit" ng-click="pushDigit('8')">8</div>
<div class="col columns" ng-click="pushDigit('9')">9</div> <div class="col digit" ng-click="pushDigit('9')">9</div>
<div class="col columns operator" ng-click="pushOperator('/')">/</div> <div class="col operator" ng-click="pushOperator('/')">/</div>
</div> </div>
<div class="row text-center"> <div class="row">
<div class="col columns" ng-click="pushDigit('4')">4</div> <div class="col digit" ng-click="pushDigit('4')">4</div>
<div class="col columns" ng-click="pushDigit('5')">5</div> <div class="col digit" ng-click="pushDigit('5')">5</div>
<div class="col columns" ng-click="pushDigit('6')">6</div> <div class="col digit" ng-click="pushDigit('6')">6</div>
<div class="col columns operator" ng-click="pushOperator('x')">x</div> <div class="col operator" ng-click="pushOperator('x')">x</div>
</div> </div>
<div class="row text-center"> <div class="row">
<div class="col columns" ng-click="pushDigit('1')">1</div> <div class="col digit" ng-click="pushDigit('1')">1</div>
<div class="col columns" ng-click="pushDigit('2')">2</div> <div class="col digit" ng-click="pushDigit('2')">2</div>
<div class="col columns" ng-click="pushDigit('3')">3</div> <div class="col digit" ng-click="pushDigit('3')">3</div>
<div class="col columns operator" ng-click="pushOperator('+')">+</div> <div class="col operator" ng-click="pushOperator('+')">+</div>
</div> </div>
<div class="row text-center"> <div class="row">
<div class="col columns operator" ng-click="pushDigit('.')">.</div> <div class="col digit" ng-click="pushDigit('.')">.</div>
<div class="col columns" ng-click="pushDigit('0')">0</div> <div class="col digit" ng-click="pushDigit('0')">0</div>
<div class="col columns operator icon ion-arrow-left-a" ng-click="removeDigit()"></div> <div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
<div class="col columns operator" ng-click="pushOperator('-')">-</div> <div class="col operator" ng-click="pushOperator('-')">-</div>
</div> </div>
</div> </div>
</ion-content> </ion-content>

27
public/views/tab-send.html
View file

@ -1,26 +1,23 @@
<ion-view> <ion-view id="tab-send">
<ion-nav-bar class="bar-royal"> <ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Send' | translate}}</ion-nav-title> <ion-nav-title>{{'Send' | translate}}</ion-nav-title>
</ion-nav-bar> </ion-nav-bar>
<ion-content ng-controller="tabSendController" ng-init="init()"> <ion-content ng-controller="tabSendController" ng-init="init()">
<div class="card"> <div>
<div class="item item-divider" translate>Recipient</div> <div class="item item-heading" translate>Recipient</div>
<label class="item item-input bitcoin-address">
<div class="list list-inset"> <i class="icon ion-search placeholder-icon"></i>
<label class="item item-input"> <input type="text"
<i class="icon ion-search placeholder-icon"></i> placeholder="Search or enter bitcoin address"
<input type="text" ng-model="search"
placeholder="Search or enter bitcoin address" ng-change="findContact(search)"
ng-model="search" ng-model-onblur>
ng-change="findContact(search)" </label>
ng-model-onblur>
</label>
</div>
</div> </div>
<div class="card" ng-if="list[0]"> <div class="card" ng-if="list[0]">
<div class="item item-divider item-icon-right"> <div class="item item-heading item-icon-right">
<span translate>Contacts & Wallets</span> <span translate>Contacts & Wallets</span>
<i class="icon ion-person-add" ng-click="openAddressbookModal()"></i> <i class="icon ion-person-add" ng-click="openAddressbookModal()"></i>
</div> </div>

6
src/sass/common.scss
View file

@ -21,6 +21,10 @@
padding-left: 74px; padding-left: 74px;
} }
.item-no-bottom-border + .item {
border-top: 0;
}
.icon.big-icon-svg { .icon.big-icon-svg {
padding: 0 7px; padding: 0 7px;
> img { > img {
@ -30,7 +34,7 @@
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
} }
} }
.overlay{ .overlay {
position: absolute; position: absolute;
top:0; top:0;
left:0; left:0;

40
src/sass/main.scss
View file

@ -901,44 +901,6 @@ input[type=file] {
font-size: 16px; font-size: 16px;
} }
/*
* Calculator
*/
.calculator .header-calc {
position: absolute;
width: 100%;
text-align: center;
}
.calculator .button-calc {
position: absolute;
width: 100%;
bottom: 0;
}
.calculator .button-calc .row {
padding: 0 !important;
}
.calculator .button-calc .columns {
cursor: pointer;
text-align: center;
}
.calculator .button-calc .operator {
color: #2C3E50;
background-color: #eee;
}
.calculator .button-calc .columns:active {
background-color: #eee;
}
.calculator .button-calc .operator:active {
background-color: #f8f8f8;
}
// No looks likes locked // No looks likes locked
input[type="number"] { input[type="number"] {
&[readonly] { &[readonly] {
@ -998,8 +960,10 @@ input[type=number] {
@import "forms"; @import "forms";
@import 'mixins/mixins'; @import 'mixins/mixins';
@import "views/add"; @import "views/add";
@import "views/amount";
@import "views/tab-home"; @import "views/tab-home";
@import "views/tab-receive"; @import "views/tab-receive";
@import "views/tab-send";
@import "views/walletDetails"; @import "views/walletDetails";
@import "views/bitpayCard"; @import "views/bitpayCard";
@import 'views/onboarding/onboarding'; @import 'views/onboarding/onboarding';

88
src/sass/views/amount.scss Normal file
View file

@ -0,0 +1,88 @@
#view-amount {
@media(max-width: 480px) {
.bitcoin-address {
.icon {
left: 8px;
font-size: 24px;
}
font-size: 11px;
padding-left: 48px;
}
}
.amount-pane {
position: absolute;
top: 125px;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 0 16px;
.amount-bar {
padding: 24px 0;
font-size: 18px;
.title {
float: left;
padding-top: 10px;
}
}
.amount {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
position: absolute;
bottom: 254px;
top: 66px;
}
}
.keypad {
text-align: center;
font-size: 24px;
font-weight: lighter;
position: absolute;
bottom: 0;
width: 100%;
.row {
padding: 0 !important;
margin: 0 !important;
}
.col {
line-height: 40px;
}
.operator {
background-color: #eaeaea;
font-weight: normal;
cursor: pointer;
&:active {
background-color: #f8f8f8;
}
}
.operator-send {
font-weight: bolder;
background-color: #f7f7f7;
font-size: 36px;
cursor: pointer;
&:active {
background-color: #eaeaea;
}
}
.digit{
cursor: pointer;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
&:active {
background-color: #eaeaea;
}
}
}
}

14
src/sass/views/tab-send.scss Normal file
View file

@ -0,0 +1,14 @@
#tab-send {
.bitcoin-address {
@media(max-width: 480px) {
input {
font-size: 12px;
}
}
.icon {
line-height: 31px;
padding-top: 2px;
padding-bottom: 1px;
}
}
}