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

Merge pull request #391 from bitjson/wip/design

Browse source 
Send tab clean up
This commit is contained in:
Matias Alejo Garcia 2016-10-11 18:47:31 -03:00 • committed by GitHub
commit 8f9d99d505
8 changed files with 133 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/js/controllers/tab-send.js
View file

@ -6,6 +6,7 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
var CONTACTS_SHOW_LIMIT;
var currentContactsPage;
var updateList = function() {
CONTACTS_SHOW_LIMIT = 10;
currentContactsPage = 0;
@ -103,11 +104,56 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
});
};
var updateHasFunds = function() {
$scope.hasFunds = null;
var wallets = profileService.getWallets({
onlyComplete: true,
});
if (!wallets || !wallets.length) {
$scope.hasFunds = false;
}
var index = 0;
lodash.each(wallets, function(w) {
walletService.getStatus(w, {}, function(err, status) {
++index;
if (err || !status) {
$log.error(err);
return;
}
if (status.availableBalanceSat) {
$scope.hasFunds = true;
}
if (index == wallets.length) {
$scope.hasFunds = $scope.hasFunds || false;
}
});
});
};
$scope.$on("$ionicView.beforeEnter", function(event, data) {
$scope.formData = {
search: null
};
updateList();
updateHasFunds();
});
// This could probably be enhanced refactoring the routes abstract states
$scope.createWallet = function() {
$state.go('tabs.home').then(function() {
$state.go('tabs.add.create-personal');
});
};
$scope.buyBitcoin = function() {
$state.go('tabs.home').then(function() {
$state.go('tabs.buyandsell.glidera');
});
};
});

3
src/sass/buttons.scss
View file

@ -38,6 +38,9 @@ $button-secondary-active-border: transparent;
&.button-secondary {
&.button-standard {
@extend %button-standard;
& + .button-standard {
margin-top: 1rem;
}
}
}
}

44
src/sass/views/tab-scan.scss
View file

@ -7,51 +7,13 @@ $scannerBackgroundColor: #060d2d;
.bar-header {
opacity: .9;
}
.zero-state-cta {
padding-bottom: 6vh;
}
&-has-problems,
&-loading-camera {
background-color: $scannerBackgroundColor;
}
&-has-problems {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.zero-state {
&-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 13px;
box-shadow: $subtle-box-shadow;
background-color: #fff;
}
&-heading {
font-size: 20px;
margin: 1rem;
}
&-description {
margin: 0 2rem 120px;
opacity: .6;
max-width: 300px;
}
&-tldr {
margin: 1rem auto;
}
&-description,
&-tldr {
max-width: 300px;
}
&-cta {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 6vh;
}
}
}
&-loading-camera {
height: 100%;
width: 100%

10
src/sass/views/tab-send.scss
View file

@ -1,5 +1,15 @@
#tab-send {
.zero-state-cta {
padding-bottom: 3vh;
}
.send-heading {
font-size: 14px;
font-weight: bold;
padding-bottom: 0;
}
.bitcoin-address {
border-top: none;
padding-bottom: .5rem;
@media(max-width: 480px) {
input {
font-size: 12px;

1
src/sass/views/views.scss
View file

@ -15,6 +15,7 @@
@import "address-book";
@import "wallet-backup-phrase";
@import "address-book";
@import "zero-state";
@import "onboarding/onboarding";
@import "includes/walletActivity";
@import "includes/wallets";

45
src/sass/views/zero-state.scss Normal file
View file

@ -0,0 +1,45 @@
.zero-state {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
&-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 13px;
box-shadow: $subtle-box-shadow;
background-color: #fff;
img {
height: 100%;
width: 100%;
}
}
&-heading {
font-size: 20px;
margin: 1rem;
}
&-description {
margin-top: 0;
margin-left: 2rem;
margin-right: 2rem;
margin-bottom: 120px;
opacity: .6;
max-width: 300px;
}
&-tldr {
margin: 1rem auto;
}
&-description,
&-tldr {
max-width: 300px;
}
&-cta {
position: absolute;
bottom: 0;
width: 100%;
}
}

2
www/views/tab-scan.html
View file

@ -8,7 +8,7 @@
</ion-nav-buttons>
</ion-nav-bar>
<ion-content scroll="false">
<div class="ng-hide" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
<div class="ng-hide zero-state" id="tab-scan-has-problems" ng-show="currentState === scannerStates.unauthorized || currentState === scannerStates.denied || currentState === scannerStates.unavailable">
<i class="icon zero-state-icon">
<img src="img/tab-icons/ico-receive.svg"/>
</i>

35
www/views/tab-send.html
View file

@ -2,25 +2,38 @@
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Send' | translate}}</ion-nav-title>
</ion-nav-bar>
<ion-content>
<div class="item item-heading" translate>Recipient</div>
<ion-content scroll="false">
<div class="ng-hide zero-state" ng-show="!hasFunds">
<i class="icon zero-state-icon">
<img src="img/tab-icons/ico-send-selected.svg"/>
</i>
<div class="zero-state-heading" translate>Start sending bitcoin</div>
<div class="zero-state-description" ng-show="hasWallets" translate>To get started, buy bitcoin or share your address. You can receive bitcoin from any wallet or service.</div>
<div class="zero-state-description" ng-show="!hasWallets" translate>To get started, you'll need to create a bitcoin wallet and get some bitcoin.</div>
<div class="zero-state-cta">
<button class="button button-standard button-primary" ng-click="buyBitcoin()" ng-show="hasWallets">Buy Bitcoin</button>
<button class="button button-standard button-primary" ng-click="createWallet()" ng-show="!hasWallets">Create bitcoin wallet</button>
<button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets">Show bitcoin address</button>
</div>
</div>
</ion-content>
<ion-content class="ng-hide has-funds" ng-show="hasFunds">
<div class="item item-heading send-heading" translate>Recipient</div>
<label class="item item-input bitcoin-address">
<i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
<div class="qr-scan-icon" ng-style="{'width': '100%'}">
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}"><i class="icon ion-qr-scanner"></i></a>
<input type="text"
placeholder="{{'Search or enter bitcoin address' | translate}}"
ng-model="formData.search"
ng-change="findContact(formData.search)"
ng-model-onblur>
<a ui-sref="tabs.scan" ng-style="{'top': '6px'}">
<i class="icon ion-qr-scanner"></i>
</a>
<input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>
</div>
</label>
<div class="card">
<div class="item item-icon-right item-heading">
<span translate>Contacts</span>
<a ng-if="hasContacts" ui-sref="tabs.send.addressbook"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
<a ng-if="hasContacts" ui-sref="tabs.send.addressbook">
<i class="icon ion-ios-plus-empty list-add-button"></i>
</a>
</div>
<div class="list">
<a class="item item-icon-left item-icon-right" ng-if="!hasContacts" ui-sref="tabs.send.addressbook">