Merge pull request #201 from cmgustavo/ref/design-07

Addressbook
This commit is contained in:
Matias Alejo Garcia 2016-08-18 19:36:59 -03:00 committed by GitHub
commit b949aae19e
9 changed files with 244 additions and 324 deletions

View File

@ -1,130 +1,96 @@
<ion-modal-view ng-controller="addressbookController">
<div ng-init="wallets[0] ? setSelectedWalletsOpt(true) : etSelectedWalletsOpt(false); checkClipboard()">
<ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
<div class="left-small">
<a ng-show="!editAddressbook && !addAddressbookEntry" ng-click="cancelAddress()" class="p10">
<span class="text-close" translate>Close</span>
<ion-modal-view>
<ion-header-bar align-title="center" class="bar-stable">
<button class="button button-clear button-positive"
ng-click="closeAddressbookModal()">
Close
</button>
<div class="h1 title">
<span ng-show="!addAddressbookEntry" translate>Addressbook</span>
<span ng-show="addAddressbookEntry" translate>Add entry</span>
</div>
<button class="button button-clear button-positive"
ng-click="toggleAddAddressbookEntry()">
<i ng-show="!addAddressbookEntry" class="icon ion-ios-plus-empty"></i>
<span ng-show="addAddressbookEntry">Cancel</span>
</button>
</ion-header-bar>
<ion-content>
<div class="bar bar-header item-input-inset" ng-show="!addAddressbookEntry && !isEmptyList">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search"
placeholder="Search"
ng-model="search"
ng-change="findContact(search, {onlyContacts: true})" ng-model-onblur>
</label>
</div>
<div ng-show="!addAddressbookEntry">
<ion-list>
<ion-item ng-repeat="addrEntry in list" class="item-icon-left" ng-show="!addrEntry.isWallet" ng-click="goToAmount(addrEntry)">
<i class="icon ion-ios-person-outline"></i>
<h2>{{addrEntry.label}}</h2>
<p>{{addrEntry.address}}</p>
<ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
<i class="icon ion-minus-circled"></i>
</ion-option-button>
</ion-item>
<ion-list>
<div class="list" ng-show="isEmptyList">
<a class="item item-icon-left" ng-click="toggleAddAddressbookEntry()">
<i class="icon ion-person-add"></i>
<span translate>Add a new entry</span>
</a>
</div>
<h1 class="title ellipsis">{{walletName}}</h1>
<div class="right-small" ng-show="!selectedWalletsOpt && !isEmptyList" ng-click="toggleEditAddressbook()">
<a ng-show="!editAddressbook && !addAddressbookEntry" href class="p10">
<span class="text-close" translate>Edit</span>
</a>
<a ng-show="editAddressbook && !addAddressbookEntry" href class="p10">
<span class="text-close" translate>Done</span>
</a>
</div>
<form name="addressbookForm" ng-show="addAddressbookEntry" no-validate>
<div class="padding-vertical assertive" ng-show="error">{{error|translate}}</div>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Address</span>
<div class="input-notification">
<i class="icon ion-checkmark-circled balanced"
ng-show="!addressbookForm.address.$invalid"></i>
<i class="icon ion-close-circled assertive"
ng-show="addressbookForm.address.$invalid && addressbookEntry.address"></i>
</div>
<div class="qr-scan-icon">
<qr-scanner on-scan="onQrCodeScanned(data, addressbookForm)"></qr-scanner>
<input type="text"
id="address"
name="address"
ng-model="addressbookEntry.address"
valid-address required>
</div>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Label</span>
<input type="text"
id="label"
name="label"
ng-model="addressbookEntry.label"
required>
</label>
</div>
</ion-header-bar>
<ion-content ng-style="{'background-color': '#f6f7f9'}">
<div class="modal-content p20b">
<div class="create-tab small-only-text-center" ng-show="!editAddressbook && !addAddressbookEntry">
<div class="row">
<div class="tab-container small-6 medium-6 large-6"
ng-class="{'selected':selectedWalletsOpt}"
ng-style="{'border-color':selectedWalletsOpt ? color : 'inherit'}"
ng-click="setSelectedWalletsOpt(true)">
<a href ng-style="{'color':selectedWalletsOpt ? color : 'inherit'}" translate> My wallets</a>
</div>
<div class="tab-container small-6 medium-6 large-6"
ng-class="{'selected':!selectedWalletsOpt}"
ng-style="{'border-color':!selectedWalletsOpt ? color : 'inherit'}"
ng-click="setSelectedWalletsOpt(false)">
<a href ng-style="{'color':!selectedWalletsOpt ? color : 'inherit'}" translate>My contacts</a>
</div>
</div>
</div>
<div ng-show="selectedWalletsOpt">
<div class="onGoingProcess" ng-if="gettingAddress">
<div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
<ion-spinner class="spinner-stable" icon="lines"></ion-spinner>
<span translate> Getting address for wallet {{selectedWalletName}} ...</span>
</div>
</div>
<div ng-if="!gettingAddress">
<ul class="no-bullet">
<li class="line-b" ng-repeat="w in wallets">
<a ng-click="selectWallet(w.id, w.name)" class="db oh">
<div class="avatar-wallet"
ng-style="{'background-color':w.color}">
<i class="icon-wallet size-21"></i>
</div>
<div class="ellipsis name-wallet text-bold">{{w.name || w.id}}
<span class="has-error right text-light size-12" ng-show="errorSelectedWallet[w.id]">
<i class="icon-close-circle size-14"></i>
<span class="vm">{{errorSelectedWallet[w.id] }}</span>
</span>
</div>
<div class="size-12">{{w.m}} of {{w.n}}
<span ng-show="w.network=='testnet'">[Testnet]</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div ng-show="!selectedWalletsOpt" class="m20b">
<ul ng-show="!addAddressbookEntry" class="no-bullet m0" ng-init="contactList()">
<li class="p10 line-b" ng-repeat="(addr, label) in list">
<a ng-show="selectedAddressbook[addr]" class="removeAddressbook" ng-click="remove(addr)" translate>Remove</a>
<a ng-show="editAddressbook" class="selectAddressbook" ng-click="toggleSelectAddressbook(addr)">
<i class="fi-trash"></i></a>
<div ng-click="selectAddressbook(addr)">
<i class="icon-contact left size-42 m10r text-gray"></i>
<div class="">
<span>{{label}}</span>
<div class="size-12 text-gray ellipsis">{{addr}}</div>
</div>
</div>
</li>
<li class="p10" ng-show="!editAddressbook">
<a ng-click="toggleAddAddressbookEntry()" class="p0i">
<i class="fi-plus size-24 m20r lh icon"></i>
<span class="size-12 tu text-bold" translate>Add a new entry</span>
</a>
</li>
</ul>
<div ng-show="addAddressbookEntry">
<h4 translate>Add a new entry</h4>
<form name="addressbookForm" class="p10" no-validate>
<div class="text-warning size-12 m10b" ng-show="error">{{error|translate}}</div>
<span ng-hide="addressbookForm.address.$pristine">
<span class="has-error right size-12" ng-show="addressbookForm.address.$invalid && addressbook.address">
<i class="icon-close-circle size-14"></i>
<span class="vm" translate>Not valid</span>
</span>
<small class="right text-primary" ng-show="!addressbookForm.address.$invalid">
<i class="icon-checkmark-circle size-14"></i>
</small>
</span>
<label translate>Address</label>
<div class="input">
<input type="text" id="address" name="address" ng-model="addressbook.address" valid-address required>
<div class="qr-scanner-input">
<qr-scanner on-scan="onQrCodeScanned(data, addressbookForm)" before-scan="beforeQrCodeScann()"></qr-scanner>
</div>
</div>
<label translate>Label</label>
<input type="text" id="label" name="label" ng-model="addressbook.label" required>
<div class="row">
<div class="columns large-6 medium-6 small-6">
<input type="button" class="button expand outline dark-gray round" ng-click="toggleAddAddressbookEntry()" value="{{'Cancel'|translate}}">
</div>
<div class="columns large-6 medium-6 small-6">
<input type="submit" class="button expand round black" ng-click="add(addressbook)" value="{{'Save'|translate}}"
ng-disabled="!addressbookForm.$valid" ng-style="{'background-color':color}">
</div>
</div>
</form>
</div>
</div>
<div class="padding">
<button type="submit"
class="button button-block button-positive"
ng-click="add(addressbookEntry)"
ng-disabled="!addressbookForm.$valid" translate>
Save
</button>
</div>
</ion-content>
</div>
</form>
</ion-content>
</ion-modal-view>

View File

@ -1,10 +1,8 @@
<ion-modal-view>
<ion-header-bar align-title="center" class="tab-bar">
<div class="left-small">
<a ng-click="cancel()" class="p10">
<span class="text-close" translate>Close</span>
</a>
</div>
<ion-header-bar align-title="center" class="bar-stable">
<button ng-click="cancel()" class="button button-clear button-positive" translate>
Close
</button>
<h1 class="title ellipsis" translate>QR-Scanner</h1>
</ion-header-bar>
<ion-content ng-controller="tabScanController" ng-init="init()">

View File

@ -36,6 +36,7 @@
</li>
</ul>
<div ng-show="lockedBalanceSat">
<span translate>Total Locked Balance</span>:
<b>{{lockedBalanceStr}} </b>
@ -45,12 +46,13 @@
</div>
<div class="row">
<div class="col col-90">
<h3>Wallets </h3>
<div class="col col-80">
<h2>Wallets </h2>
</div>
<div class="col text-center">
<a href="#/add" class="add-icon"><i class="ion-plus size-21 right"></i></a>
<div class="col col-20 text-right">
<a class="button button-light" href="#/add">
<i class="size-36 icon ion-ios-plus-outline"></i>
</a>
</div>
</div>

View File

@ -1,4 +1,4 @@
<ion-view cache-view="false">
<ion-view cache-view="false">
<ion-nav-bar class="bar-stable">
<ion-nav-title>Send</ion-nav-title>
@ -7,25 +7,33 @@
<ion-content class="send" ng-controller="tabSendController" ng-init="init()">
<h2>Recipient</h2>
<div class="padding">
<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>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="search" ng-model-onblur ng-change="findContact(search)">
</label>
</div>
<h3>Contacts & Wallets</h3>
<div class="row">
<div class="col col-80">
<h3>Contacts & Wallets</h3>
</div>
<div class="col col-20 text-right">
<a class="button button-light" ng-click="openAddressbookModal(list)">
<i class="size-36 icon ion-person-add"></i>
</a>
</div>
</div>
<div class="list card">
<ul class="pr">
<li class="item item-icon-left" ng-repeat="item in list" ng-click="goToAmount(item)">
<i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
<i ng-show="!item.isWallet" class="icon ion-ios-person-outline"></i>
{{item.label}}
</li>
</ul>
<a class="item item-icon-left" ng-repeat="item in list" ng-click="goToAmount(item)">
<i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
<i ng-show="!item.isWallet" class="icon ion-ios-person-outline"></i>
{{item.label}}
</a>
</div>
</ion-content>
</ion-view>

View File

@ -1,162 +0,0 @@
'use strict';
angular.module('copayApp.controllers').controller('addressbookController', function($rootScope, $scope, $timeout, lodash, profileService, addressService, addressbookService, bwcError) {
var self = $scope.self;
var fc = profileService.focusedClient;
self.lockAddress = false;
self._address = null;
$scope.editAddressbook = false;
$scope.addAddressbookEntry = false;
$scope.selectedAddressbook = {};
$scope.newAddress = address;
$scope.walletName = fc.credentials.walletName;
$scope.color = fc.backgroundColor;
$scope.addressbook = {
'address': ($scope.newAddress || ''),
'label': ''
};
$scope.checkClipboard = function() {
if (!$scope.newAddress) {
getClipboard(function(value) {
$scope.newAddress = value;
});
}
};
$scope.beforeQrCodeScann = function() {
$scope.error = null;
$scope.addAddressbookEntry = true;
$scope.editAddressbook = false;
};
$scope.onQrCodeScanned = function(data, addressbookForm) {
$timeout(function() {
var form = addressbookForm;
if (data && form) {
data = data.replace('bitcoin:', '');
form.address.$setViewValue(data);
form.address.$isValid = true;
form.address.$render();
}
$scope.$digest();
}, 100);
};
$scope.toggleEditAddressbook = function() {
$scope.editAddressbook = !$scope.editAddressbook;
$scope.selectedAddressbook = {};
$scope.addAddressbookEntry = false;
};
$scope.selectAddressbook = function(addr) {
self.setForm(addr);
$scope.cancel();
};
$scope.toggleSelectAddressbook = function(addr) {
$scope.selectedAddressbook[addr] = $scope.selectedAddressbook[addr] ? false : true;
};
$scope.toggleAddAddressbookEntry = function() {
$scope.error = null;
$scope.addressbook = {
'address': '',
'label': ''
};
$scope.addAddressbookEntry = !$scope.addAddressbookEntry;
};
$scope.contactList = function() {
$scope.error = null;
addressbookService.list(function(err, ab) {
if (err) {
$scope.error = err;
return;
}
$scope.list = ab;
$scope.isEmptyList = lodash.isEmpty($scope.list);
$timeout(function() {
$scope.$digest();
});
});
};
$scope.setSelectedWalletsOpt = function(val) {
$scope.selectedWalletsOpt = val;
};
$scope.add = function(addressbook) {
$scope.error = null;
$timeout(function() {
addressbookService.add(addressbook, function(err, ab) {
if (err) {
$scope.error = err;
return;
}
$rootScope.$emit('Local/AddressbookUpdated', ab);
$scope.list = ab;
$scope.isEmptyList = lodash.isEmpty($scope.list);
$scope.editAddressbook = true;
$scope.toggleEditAddressbook();
$scope.$digest();
});
}, 100);
};
$scope.remove = function(addr) {
$scope.error = null;
$timeout(function() {
addressbookService.remove(addr, function(err, ab) {
if (err) {
$scope.error = err;
return;
}
$rootScope.$emit('Local/AddressbookUpdated', ab);
$scope.list = ab;
$scope.isEmptyList = lodash.isEmpty($scope.list);
if ($scope.isEmptyList)
$scope.editAddressbook = false;
$scope.$digest();
});
}, 100);
};
$scope.selectWallet = function(walletId, walletName) {
var client = profileService.getClient(walletId);
$scope.errorSelectedWallet = {};
profileService.isReady(client, function(err) {
if (err) $scope.errorSelectedWallet[walletId] = bwcError.msg(err);
else {
$scope.gettingAddress = true;
$scope.selectedWalletName = walletName;
addressService.getAddress(walletId, false, function(err, addr) {
$scope.gettingAddress = false;
if (err) {
self.error = err;
$scope.cancelAddress();
return;
}
self.setForm(addr);
$scope.cancel();
});
}
$timeout(function() {
$scope.$apply();
});
});
};
$scope.cancelAddress = function() {
self.resetForm();
$scope.cancel();
};
$scope.cancel = function() {
$scope.addressbookModal.hide();
};
});

View File

@ -180,7 +180,7 @@ angular.module('copayApp.controllers').controller('tabScanController', function(
};
}
localMediaStream = null;
video.src = '';
if (video && video.src) video.src = '';
};
qrcode.callback = function(data) {

View File

@ -2,12 +2,10 @@
angular.module('copayApp.controllers').controller('tabSendController', function($scope, $ionicModal, $log, $timeout, addressbookService, profileService, configService, lodash, $state, walletService) {
var originalList = [];
$scope.search = '';
var originalList;
$scope.init = function() {
originalList = [];
var wallets = profileService.getWallets({onlyComplete: true});
@ -17,7 +15,6 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
label: v.name,
isWallet: true,
getAddress: function(cb) {
console.log('[tab-send.js.20] get ADDRESS at wallet!!!', v.name); //TODO
walletService.getAddress(v, false, cb);
},
});
@ -26,12 +23,15 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
addressbookService.list(function(err, ab) {
if (err) $log.error(err);
$scope.isEmptyList = lodash.isEmpty(ab);
var contacts = [];
lodash.each(ab, function(v, k) {
contacts.push({
label: k,
label: v,
address: k,
getAddress: function(cb) {
return cb(null,v);
return cb(null,k);
},
});
});
@ -41,9 +41,10 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
});
};
$scope.findContact = function() {
$scope.findContact = function(search, opts) {
opts = opts || {};
if (!$scope.search || $scope.search.length < 2) {
if (!search || search.length < 2) {
$scope.list = originalList;
$timeout(function() {
$scope.$apply();
@ -52,8 +53,9 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
}
var result = lodash.filter($scope.list, function(item) {
if (opts && opts.onlyContacts && item.isWallet) return;
var val = item.label || item.alias || item.name;
return lodash.includes(val.toLowerCase(), $scope.search.toLowerCase());
return lodash.includes(val.toLowerCase(), search.toLowerCase());
});
$scope.list = result;
@ -69,4 +71,82 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
return $state.transitionTo('amount', { toAddress: addr, toName: item.label})
});
};
/*
* Modal Addressbook
*/
$ionicModal.fromTemplateUrl('views/modals/addressbook.html', {
scope: $scope
}).then(function(modal) {
$scope.addressbookModal = modal;
});
$scope.openAddressbookModal = function() {
$scope.addressbookModal.show();
};
$scope.closeAddressbookModal = function() {
$scope.cleanAddressbookEntry();
$scope.addAddressbookEntry = false;
$scope.addressbookModal.hide();
};
$scope.onQrCodeScanned = function(data, addressbookForm) {
$timeout(function() {
var form = addressbookForm;
if (data && form) {
data = data.replace('bitcoin:', '');
form.address.$setViewValue(data);
form.address.$isValid = true;
form.address.$render();
}
$scope.$digest();
}, 100);
};
$scope.cleanAddressbookEntry = function() {
$scope.addressbookEntry = {
'address': '',
'label': ''
};
};
$scope.toggleAddAddressbookEntry = function() {
$scope.cleanAddressbookEntry();
$scope.addAddressbookEntry = !$scope.addAddressbookEntry;
};
$scope.add = function(addressbook) {
$timeout(function() {
addressbookService.add(addressbook, function(err, ab) {
if (err) {
$log.error(err);
return;
}
$scope.init();
$scope.toggleAddAddressbookEntry();
$scope.$digest();
});
}, 100);
};
$scope.remove = function(addr) {
$timeout(function() {
addressbookService.remove(addr, function(err, ab) {
if (err) {
$scope.error = err;
return;
}
$scope.init();
$scope.$digest();
});
}, 100);
};
$scope.$on('$destroy', function() {
$scope.addressbookModal.remove();
});
});

View File

@ -11,6 +11,6 @@ angular.module('copayApp.directives')
},
controller: 'tabScanController',
replace: true,
template: '<a ng-click="openScanner()"><i class="icon ion-qr-scanner"></i></a>'
template: '<a on-tap="openScanner()"><i class="icon ion-qr-scanner"></i></a>'
}
});

View File

@ -548,6 +548,26 @@ ul.wallet-selection.wallets {
margin: 0 auto;
}
// INPUT CAMERA / VALID / INVALID ICONS
.input-notification {
float: right;
margin-right: 10px;
}
.qr-scan-icon {
position: relative;
}
.qr-scan-icon a {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0 10px;
font-size: 24px;
cursor: pointer;
}
// General purpose
.dn {
display: none;
@ -948,6 +968,14 @@ input[type=file] {
line-height: 0px;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
/*
* Calculator
*/