BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(send): polish send view

This commit is contained in:
Jason Dreyzehner 2016-10-21 03:48:41 -04:00
parent 0ab8195395
commit fb154b2ac3
5 changed files with 92 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/controllers/amount.js
View File

@ -7,7 +7,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
var unitDecimals;
var satToBtc;
var self = $scope.self;
var SMALL_FONT_SIZE_LIMIT = 13;
var SMALL_FONT_SIZE_LIMIT = 10;
var LENGTH_EXPRESSION_LIMIT = 19;
$scope.$on('$ionicView.leave', function() {
@ -197,18 +197,18 @@ angular.module('copayApp.controllers').controller('amountController', function($
amount: amountUSD,
currency: 'USD'
};
ongoingProcess.set('Processing Transaction...', true);
ongoingProcess.set('Preparing transaction...', true);
$timeout(function() {
bitpayCardService.topUp($scope.cardId, dataSrc, function(err, invoiceId) {
if (err) {
ongoingProcess.set('Processing Transaction...', false);
ongoingProcess.set('Preparing transaction...', false);
popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
return;
}
bitpayCardService.getInvoice(invoiceId, function(err, data) {
ongoingProcess.set('Processing Transaction...', false);
ongoingProcess.set('Preparing transaction...', false);
if (err) {
popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
return;

4
src/sass/shame.scss
View File

@ -132,8 +132,8 @@ input[type=number] {
.postfix {
position: absolute;
right: 10px;
background-color: #f8f8f8;
color: #444;
background-color: $subtle-gray;
color: $dark-gray;
border-radius: 4px;
padding: 2px 10px;
cursor: pointer;

81
src/sass/views/amount.scss
View File

@ -1,4 +1,9 @@
#view-amount {
.recipient-label {
font-size: 14px;
padding-bottom: 0;
color: $mid-gray;
}
.item-no-bottom-border + .item {
border-top: 0;
}
@ -19,7 +24,7 @@
box-shadow: none;
}
}
font-size: 11px;
font-size: 13px;
padding-left: 48px;
}
}
@ -30,7 +35,7 @@
}
.amount-pane {
position: absolute;
top: 125px;
top: 95px;
bottom: 0;
width: 100%;
background-color: #fff;
@ -42,6 +47,8 @@
.title {
float: left;
padding-top: 10px;
color: $dark-gray;
font-weight: bold;
}
}
.amount {
@ -53,11 +60,60 @@
bottom: 254px;
top: 66px;
.light {
color: #A4A4A4;
color: $light-gray;
}
}
}
.amount {
&__editable {
margin-bottom: 1rem;
&--minimize {
font-size: 22px;
}
&--standard {
font-size: 42px;
}
&--placeholder {
color: $light-gray;
}
}
&__number {
color: $dark-gray;
}
&__currency-toggle {
border: 1px solid $subtle-gray;
color: $dark-gray;
border-radius: 3px;
padding: 0 10px;
cursor: pointer;
font-size: .6em;
position: relative;
top: -3px;
line-height: 1;
}
&__results {
&--minimize {
font-size: 12px;
}
&--standard {
font-size: 18px;
}
&--placeholder {
color: $light-gray;
}
}
&__result {
color: $light-gray;
font-size: .9em;
margin-bottom: -.9em;
line-height: 1;
}
&__result-equiv {
color: $mid-gray;
font-size: 1.2em;
margin-top: 2rem;
}
}
.keypad {
text-align: center;
font-size: 24px;
@ -65,6 +121,7 @@
position: absolute;
bottom: 0;
width: 100%;
color: $mid-gray;
.row {
padding: 0 !important;
@ -72,23 +129,23 @@
}
.col {
line-height: 40px;
line-height: 45px;
}
.operator {
background-color: #eaeaea;
background-color: $subtle-gray;
font-weight: normal;
cursor: pointer;
&:active {
background-color: #f8f8f8;
background-color: $light-gray;
}
}
.operator-send {
font-weight: bolder;
color: #f8f8f8;
background-color: #1e3186;
color: #fff;
background-color: $positive;
font-size: 36px;
cursor: pointer;
@ -99,10 +156,10 @@
.digit{
cursor: pointer;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
border-top: 1px solid $subtle-gray;
border-left: 1px solid $subtle-gray;
&:active {
background-color: #eaeaea;
background-color: $subtle-gray;
}
}

2
src/sass/views/tab-send.scss
View File

@ -12,7 +12,7 @@
padding-bottom: .5rem;
@media(max-width: 480px) {
input {
font-size: 12px;
font-size: 14px;
}
}
.icon {

28
www/views/amount.html
View File

@ -10,7 +10,7 @@
<ion-content scroll="false">
<div>
<div class="item item-no-bottom-border" translate>Recipient</div>
<div class="item item-no-bottom-border recipient-label" translate>Recipient</div>
<div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':cardId}">
<i class="icon big-icon-svg" ng-if="isWallet">
@ -30,17 +30,21 @@
<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, 'light': !amount}"><span>{{amount || "0.00" }}</div>
<div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont, 'light': !amountResult}" ng-show="!showAlternativeAmount">
{{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
<div class="amount__editable" ng-class="{'amount__editable--minimize': smallFont, 'amount__editable--standard': !smallFont, 'amount__editable--placeholder': !amount}">
<span class="amount__number">{{amount || "0.00" }}</span>
<a class="amount__currency-toggle" ng-click="toggleAlternative()" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a>
<a class="amount__currency-toggle" ng-click="toggleAlternative()" ng-show="!showAlternativeAmount">{{unitName}}</a>
</div>
<div class="text-light text-black size-17" ng-show="showAlternativeAmount">
{{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
<div ng-class="{'amount__results--minimize': smallFont, 'amount__results--standard': !smallFont, 'amount__results--placeholder': !amountResult}" ng-show="!showAlternativeAmount">
<div class="amount__result" ng-show="globalResult">{{globalResult}} {{unitName}}</div>
<div class="amount__result-equiv">&asymp; {{amountResult || '0.00'}} {{alternativeIsoCode}}</div>
</div>
<div ng-class="{'amount__results--minimize': smallFont, 'amount__results--standard': !smallFont, 'amount__results--placeholder': !amountResult}" ng-show="showAlternativeAmount">
<div class="amount__result" ng-show="globalResult">{{globalResult}} {{alternativeIsoCode}}</div>
<div class="amount__result-equiv">{{alternativeResult || '0.00'}} {{unitName}}</div>
</div>
</div>
</div>
@ -56,28 +60,28 @@
<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 class="col operator" ng-click="pushOperator('/')">&divide;</div>
</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 class="col operator" ng-click="pushOperator('x')">&times;</div>
</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 class="col operator" ng-click="pushOperator('+')">&plus;</div>
</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 class="col operator" ng-click="pushOperator('-')">&minus;</div>
</div>
</div>
</ion-content>