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

Merge branch 'ref/design' of github.com:matiu/copay into ref/design

Browse source
This commit is contained in:
Matias Alejo Garcia 2016-08-15 10:26:35 -03:00
commit 5357f30a0e
No known key found for this signature in database
GPG key ID: 02470DB551277AB3
9 changed files with 354 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/index.html
View file

@ -20,6 +20,7 @@
<!-- <ion&#45;nav&#45;back&#45;button class="button&#45;icon ion&#45;arrow&#45;left&#45;c"> -->
<!-- </ion&#45;nav&#45;back&#45;button> -->
<!-- </ion&#45;nav&#45;bar> -->
<ion-nav-bar class="bar-stable"></ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
<script src="lib/ionic.bundle.js"></script>

137
public/views/modals/inputAmount.html
View file

@ -1,15 +1,16 @@
<ion-modal-view ng-controller="inputAmountController" ng-style="{'background-color':'#F6F7F9'}" ng-init=init()>
<ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
<div class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>
<ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':recipientColor}">
<div class="buttons m3t" ng-click="cancel()">
<button class="button text-white transform-none" ng-style="{'background-color':'transparent'}" translate>Close</button>
</div>
<h1 class="title ellipsis" translate>Enter amount</h1>
<div class="buttons m5r m3t" ng-if="!specificAmount" ng-click="toggleAlternative()">
<h1 class="title ellipsis text-white" translate>Enter amount</h1>
<div class="buttons m5r m3t" ng-if="!specificAmount && !sending" ng-click="toggleAlternative()">
<button class="button black" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</button>
<button class="button" ng-style="{'background-color':color}" ng-show="!showAlternativeAmount">{{unitName}}</button>
<button class="button text-whit transform-none" ng-show="!showAlternativeAmount">{{unitName}}</button>
</div>
<div class="right-small m10r" ng-if="specificAmount">
<a ng-click="init()">
<span class="text-close" translate>Cancel</span>
@ -18,64 +19,68 @@
</ion-header-bar>
<ion-pane>
<ion-content class="calculator" scroll="false" ng-show="!specificAmount">
<ion-content class="calculator" scroll="false" ng-show="!specificAmount && !sending">
<div class="m5t">
<label class="m15l">Recipient</label>
<a class="item item-icon-left item-icon-right">
<i class="icon ion-ios-person-outline"></i>
{{recipientName}}
<i class="icon ion-ios-close-empty"></i>
</a>
</div>
<div class="header-calc">
<div class="text-light text-black" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
<div class="text-light text-black m15b" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
<div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">
{{globalResult}} <span class="label gray radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
{{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
</div>
<div class="text-light text-black size-17" ng-show="showAlternativeAmount">
{{globalResult}} <span class="label gray radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
{{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
</div>
</div>
<div class="button-calc">
<div class="oh">
<div class="left large-3 medium-3 small-3">
<button class="button expand text-center m0 operator"
ng-click="resetAmount()">
AC
</button>
</div>
<div class="left large-9 medium-9 small-9">
<button class="button expand text-center m0"
ng-style="{'background-color':index.backgroundColor}"
ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
OK
</button>
</div>
<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'}"
ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
OK
</button>
</div>
<div class="row collapse">
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('7')">7</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('8')">8</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('9')">9</div>
<div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('/')">/</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>
<div class="row collapse">
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('4')">4</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('5')">5</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('6')">6</div>
<div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('x')">x</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>
<div class="row collapse">
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('1')">1</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('2')">2</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('3')">3</div>
<div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('+')">+</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>
<div class="row collapse">
<div class="columns large-3 medium-3 small-3 operator" ng-click="pushDigit('.')">.</div>
<div class="columns large-3 medium-3 small-3" ng-click="pushDigit('0')">0</div>
<div class="columns large-3 medium-3 small-3 operator icon ion-arrow-left-a" ng-click="removeDigit()"></div>
<div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('-')">-</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>
</div>
</ion-content>
<ion-content ng-show="specificAmount" ng-style="{'background-color':'#f6f7f9'}">
<ion-content ng-show="specificAmount && !sending" ng-style="{'background-color':'#f6f7f9'}">
<section class="modal-content m20b">
<h4 class="title m10l" translate>QR Code</h4>
<ul class="no-bullet size-14 m0">
@ -110,5 +115,43 @@
<div class="extra-margin-bottom"></div>
</section>
</ion-content>
<ion-content ng-show="sending">
<div class="card">
<div class="item item-text-wrap">
<i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
<div class="text-bold size-28 m15t">{{sendingAmount}} {{unitName}}</div>
<div class="text-light size-20 m5t">{{sendingAlternativeAmount}} {{alternativeIsoCode}}</div>
</div>
</div>
<div class="list card">
<span class="item">Fee: Economy (97 bits)</span>
<span class="item item-icon-left">
<i class="icon ion-ios-person-outline"></i>
<label translate>To</label>
<p>{{recipientName}}</p>
</span>
<span class="item item-icon-left">
<i class="icon icon-wallet size-21" ng-style="{'color':recipientColor}"></i>
<label translate>From</label>
<p>Focused Wallet (Default Wallet)</p>
</span>
<span class="item item-icon-right">
Add Memo
<i class="icon ion-ios-arrow-right size-21"></i>
</span>
</div>
<div class="card">
<div class="item item-text-wrap item-icon-right" ng-click="cancel()">
Slide to complete
<i class="icon ion-ios-arrow-thin-right size-21"></i>
</div>
</div>
</ion-content>
</ion-pane>
</ion-modal-view>

45
public/views/tab-receive.html
View file

@ -1,5 +1,42 @@
<ion-view view-title="Home">
<ion-content class="receive">
<h2>Welcome to Receive</h2>
<ion-view ng-controller="tabReceiveController" cache-view="false">
<ion-nav-title>Receive</ion-nav-title>
<ion-content ng-init="init()">
<div class="text-center" ng-click="copyToClipboard(addr, $event)" ng-show="addr || generatingAddress">
<qrcode size="220" data="bitcoin:{{addr}}"></qrcode>
<div ng-show="home.generatingAddress" style="position:relative; top:-226px; height:0px">
<div style="height:220px; width:220px; margin:auto; background: white">
<ion-spinner class="spinner-stable" icon="lines" style="margin-top: 85px"></ion-spinner>
</div>
</div>
</div>
<div class="item item-icon-left" ng-click="shareAddress(addr)" ng-show="index.isCordova && home.addr" ng-disabled="generatingAddress">
<i class="icon ion-ios-upload-outline"></i>
<span translate>Share address</span>
</div>
<div class="item item-icon-left" ng-click="setAddress(true)" ng-show="!home.generatingAddress">
<i class="icon ion-ios-loop"></i>
<span translate>Next Address</span>
</div>
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
{{generatingAddress ? '...' : addr}}
</div>
<div class="item item-text-wrap" ng-style="{'height' : '200px'}">
<ion-slides class="slides" options="options" slider="data.slider">
<ion-slide-page ng-repeat="item in wallets track by $index" >
<div class="list card">
<ul class="pr">
<li ng-show="wallets[0]" class="item item-icon-left">
<i class="icon icon-wallet size-21" ng-style="{'color':item.color}"></i>
{{item.name || item.id}}
<span class="item-note" ng-show="item.n > 1">
{{item.m}}-of-{{item.n}}
</span>
</li>
</ul>
</div>
</ion-slide-page>
</ion-slides>
</div>
</ion-content>
</ion-view>
</ion-view>

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

@ -1,5 +1,29 @@
<ion-view view-title="Home">
<ion-content class="send">
<h2>Welcome to Send</h2>
<ion-content class="send" ng-controller="tabSendController" ng-init="init()">
<h2>Recipient</h2>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="search" ng-change="findContact()">
</label>
<h2>Contacts</h2>
<div class="list card">
<a class="item item-icon-left" ng-repeat="item in list" ng-click="openInputAmountModal(item)">
<div ng-show="!item.id">
<i class="icon ion-ios-person-outline"></i>
{{item.label}}
</div>
<div ng-show="item.id">
<i class="icon icon-wallet size-21" ng-style="{'color':item.color}"></i>
{{item.name || item.alias}}
<span class="item-note">
{{item.balance || '123,999.91 bits'}}
</span>
</div>
</a>
</div>
</ion-content>
</ion-view>
</ion-view>

32
src/css/ionic-migration.css
View file

@ -12,10 +12,6 @@
/* Conflicting styles that are customized as a compromise. These styles are a merge or compromise of foundation.css and ionic.css. */
.row {
display: inherit;
}
.behind {
z-index: -1;
}
@ -28,6 +24,10 @@
display: none !important;
}
.swiper-container-horizontal>.swiper-pagination{
display: none;
}
.bar .title {
font-size: 14px;
line-height: 48px;
@ -88,30 +88,6 @@
font-size: 14px;
}
.button.button-light:hover {
background-color: #fff;
border: 1px solid #E9E9EC;
}
.button.button-light:active {
background-color: #ababab;
border: 1px solid #E9E9EC;
}
.button.button-stable:hover {
background-color: transparent;
border: 1px solid #E9E9EC;
}
.button.button-stable:active {
background-color: #ababab;
border: 1px solid #E9E9EC;
}
.button-amount {
text-transform: none;
}
button, .button {
min-width: inherit;
min-height: inherit;

5
src/js/controllers/modals/inputAmount.js
View file

@ -160,8 +160,9 @@ angular.module('copayApp.controllers').controller('inputAmountController', funct
$ionicScrollDelegate.resize();
}, 100);
} else {
self.setAmount(amount, $scope.showAlternativeAmount);
$scope.cancel();
$scope.sending = true;
$scope.sendingAmount = profileService.formatAmount(amount * unitToSatoshi, true);
$scope.sendingAlternativeAmount = $filter('formatFiatAmount')(alternativeAmount);
}
};

112
src/js/controllers/tab-receive.js Normal file
View file

@ -0,0 +1,112 @@
'use strict';
angular.module('copayApp.controllers').controller('tabReceiveController', function($scope, $ionicPopover, $timeout, platformInfo, nodeWebkit, addressService, profileService, configService, lodash) {
$scope.init = function() {
$scope.index = 0;
$scope.isCordova = platformInfo.isCordova;
$scope.isNW = platformInfo.isNW;
$scope.setWallets();
$scope.setAddress(false);
$scope.options = {
loop: false,
effect: 'flip',
speed: 500,
spaceBetween: 100
}
$scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data) {
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
$scope.index = data.slider.activeIndex;
$scope.setAddress(false);
});
}
$scope.copyToClipboard = function(addr, $event) {
var showPopover = function() {
$ionicPopover.fromTemplateUrl('views/includes/copyToClipboard.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
$scope.popover.show($event);
});
$scope.close = function() {
$scope.popover.hide();
}
$timeout(function() {
$scope.popover.hide(); //close the popover after 0.7 seconds
}, 700);
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
};
if ($scope.isCordova) {
window.cordova.plugins.clipboard.copy(addr);
window.plugins.toast.showShortCenter(gettextCatalog.getString('Copied to clipboard'));
} else if ($scope.isNW) {
nodeWebkit.writeToClipboard(addr);
showPopover($event);
}
};
$scope.shareAddress = function(addr) {
if ($scope.isCordova) {
window.plugins.socialsharing.share('bitcoin:' + addr, null, null, null);
}
};
$scope.setAddress = function(forceNew) {
$scope.addrError = null;
$scope.generatingAddress = true;
$timeout(function() {
addressService.getAddress($scope.wallets[$scope.index].id, forceNew, function(err, addr) {
$scope.generatingAddress = false;
if (err) {
$scope.addrError = err;
} else {
if (addr)
$scope.addr = addr;
}
$scope.$digest();
});
});
};
$scope.setWallets = function() {
if (!profileService.profile) return;
var config = configService.getSync();
config.colorFor = config.colorFor || {};
config.aliasFor = config.aliasFor || {};
// Sanitize empty wallets (fixed in BWC 1.8.1, and auto fixed when wallets completes)
var credentials = lodash.filter(profileService.profile.credentials, 'walletName');
var ret = lodash.map(credentials, function(c) {
return {
m: c.m,
n: c.n,
name: config.aliasFor[c.walletId] || c.walletName,
id: c.walletId,
color: config.colorFor[c.walletId] || '#4A90E2',
};
});
$scope.wallets = lodash.sortBy(ret, 'name');
};
});

69
src/js/controllers/tab-send.js Normal file
View file

@ -0,0 +1,69 @@
'use strict';
angular.module('copayApp.controllers').controller('tabSendController', function($scope, $ionicModal, $log, addressbookService, profileService, configService, lodash) {
var completeList;
$scope.init = function() {
addressbookService.list(function(err, ab) {
if (err) $log.error(err);
// $scope.contactList = lodash.isEmpty(ab) ? null : ab;
$scope.contactList = [{
label: 'Javier',
address: '123456'
}, {
label: 'Javier 2',
address: '654321'
}, {
label: 'Javier 3',
address: '7891011'
}, {
label: 'Javier 4',
address: '1101987'
}];
});
var config = configService.getSync();
config.colorFor = config.colorFor || {};
config.aliasFor = config.aliasFor || {};
var credentials = lodash.filter(profileService.profile.credentials, 'walletName');
var ret = lodash.map(credentials, function(c) {
return {
m: c.m,
n: c.n,
name: config.aliasFor[c.walletId] || c.walletName,
id: c.walletId,
color: config.colorFor[c.walletId] || '#4A90E2',
};
});
$scope.wallets = lodash.sortBy(ret, 'name');
$scope.list = completeList = $scope.contactList.concat($scope.wallets);
};
$scope.findContact = function() {
var result = lodash.filter($scope.list, function(item) {
var val = item.label || item.alias || item.name;
return lodash.includes(val.toLowerCase(), $scope.search.toLowerCase());
});
if (lodash.isEmpty(result) || lodash.isEmpty($scope.search)) {
$scope.list = completeList;
return;
}
$scope.list = result;
};
$scope.openInputAmountModal = function(recipient) {
$scope.recipientName = recipient.name || recipient.label;
$scope.recipientColor = recipient.color;
$ionicModal.fromTemplateUrl('views/modals/inputAmount.html', {
scope: $scope
}).then(function(modal) {
$scope.inputAmountModal = modal;
$scope.inputAmountModal.show();
});
};
});

10
src/sass/main.scss
View file

@ -1981,6 +1981,10 @@ to prevent collapsing during animation*/
color: #fff;
}
.transform-none {
text-transform: none;
}
/*** modals ***/
.hideModal {
@ -2189,16 +2193,16 @@ input[type="number"] {
@media all and (max-height: 480px) {
.calculator .button-calc .columns { padding: 10px; }
.calculator .header-calc { top: 11%; }
.calculator .header-calc { top: 30%; }
}
@media (min-height: 481px) and (max-height: 670px) {
.calculator .button-calc .columns { padding: 15px; }
.calculator .header-calc { top: 15%; }
.calculator .header-calc { top: 30%; }
}
@media all and (min-height: 671px) {
.calculator .button-calc .columns { padding: 20px; }
.calculator .header-calc { top: 18%; }
.calculator .header-calc { top: 32%; }
}