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

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

View File

@ -1,4 +1,4 @@
<ion-view>
<ion-view id="view-amount">
<ion-nav-bar class="bar-royal">
<ion-nav-buttons side="primary">
<button class="button back-button" ng-click="$ionicGoBack()">
@ -7,24 +7,26 @@
</ion-nav-buttons>
</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 class="item item-divider" translate>Recipient</div>
<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>
{{toName || toAddress}}
<span>{{toName || toAddress}}</span>
</div>
</div>
<div class="card">
<div class="item item-divider" translate>Amount</div>
<div class="amount-pane">
<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">{{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" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">
{{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>
</div>
</div>
</div>
<div class="button-calc">
<div class="row m5b">
<button class="col columns col-25 text-center m0 operator" ng-click="resetAmount()">
AC
</button>
<button class="col columns text-center text-white m0"
ng-style="{'background-color':recipientColor || '#4b6178'}"
<div class="keypad">
<div class="row">
<div class="col col-25 col-offset-75 operator-send"
ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()">
OK
</button>
<i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
<div class="row text-center">
<div class="col columns" ng-click="pushDigit('7')">7</div>
<div class="col columns" ng-click="pushDigit('8')">8</div>
<div class="col columns" ng-click="pushDigit('9')">9</div>
<div class="col columns operator" ng-click="pushOperator('/')">/</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('7')">7</div>
<div class="col digit" ng-click="pushDigit('8')">8</div>
<div class="col digit" ng-click="pushDigit('9')">9</div>
<div class="col operator" ng-click="pushOperator('/')">/</div>
</div>
<div class="row text-center">
<div class="col columns" ng-click="pushDigit('4')">4</div>
<div class="col columns" ng-click="pushDigit('5')">5</div>
<div class="col columns" ng-click="pushDigit('6')">6</div>
<div class="col columns operator" ng-click="pushOperator('x')">x</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('4')">4</div>
<div class="col digit" ng-click="pushDigit('5')">5</div>
<div class="col digit" ng-click="pushDigit('6')">6</div>
<div class="col operator" ng-click="pushOperator('x')">x</div>
</div>
<div class="row text-center">
<div class="col columns" ng-click="pushDigit('1')">1</div>
<div class="col columns" ng-click="pushDigit('2')">2</div>
<div class="col columns" ng-click="pushDigit('3')">3</div>
<div class="col columns operator" ng-click="pushOperator('+')">+</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('1')">1</div>
<div class="col digit" ng-click="pushDigit('2')">2</div>
<div class="col digit" ng-click="pushDigit('3')">3</div>
<div class="col operator" ng-click="pushOperator('+')">+</div>
</div>
<div class="row text-center">
<div class="col columns operator" ng-click="pushDigit('.')">.</div>
<div class="col columns" ng-click="pushDigit('0')">0</div>
<div class="col columns operator icon ion-arrow-left-a" ng-click="removeDigit()"></div>
<div class="col columns operator" ng-click="pushOperator('-')">-</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('.')">.</div>
<div class="col digit" ng-click="pushDigit('0')">0</div>
<div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
<div class="col operator" ng-click="pushOperator('-')">-</div>
</div>
</div>
</ion-content>

View File

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

View File

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

View File

@ -901,44 +901,6 @@ input[type=file] {
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
input[type="number"] {
&[readonly] {
@ -998,8 +960,10 @@ input[type=number] {
@import "forms";
@import 'mixins/mixins';
@import "views/add";
@import "views/amount";
@import "views/tab-home";
@import "views/tab-receive";
@import "views/tab-send";
@import "views/walletDetails";
@import "views/bitpayCard";
@import 'views/onboarding/onboarding';

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;
}
}
}
}

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;
}
}
}