Merge pull request #2105 from cmgustavo/bug/address-book-modal

Bug/address book modal
This commit is contained in:
Matias Alejo Garcia 2014-12-11 02:33:56 -03:00
commit 6b623a3d57
8 changed files with 114 additions and 170 deletions

View file

@ -467,8 +467,6 @@ ul.tx-copayers {
background: #eee; background: #eee;
} }
.sign-action { .sign-action {
background: #E4E8EC; background: #E4E8EC;
width: 100%; width: 100%;
@ -535,6 +533,13 @@ a.button-setup {
display: block; display: block;
padding: 0.5rem; padding: 0.5rem;
background: transparent; background: transparent;
color: #A0A3A6;
}
a.button-setup:hover {
color: #666;
border-color: #666;
} }
.createProfile a.button-setup, .home a.button-setup, .settings a.button-setup, .import-profile a.button-setup { .createProfile a.button-setup, .home a.button-setup, .settings a.button-setup, .import-profile a.button-setup {
@ -938,28 +943,20 @@ label small.has-error {
} }
table { table {
border-collapse: collapse; text-align: left; width: 100%; border: none; border-collapse: collapse;
box-shadow: -2px 1px 9px 1px #DDDDDD; text-align: left;
-webkit-box-shadow: -2px 1px 5px 1px #DDDDDD; width: 100%;
-moz-box-shadow: -2px 1px 5px 1px #DDDDDD; border: none;
-o-box-shadow: -2px 1px 5px 1px #DDDDDD;
} }
thead tr{ thead tr{
text-transform: uppercase; text-transform: uppercase;
border-top: 1px solid #FFFFFF;
height: 46px
} }
table tr td, table tr th { table tr td, table tr th {
padding: 15px; padding: 15px;
} }
table.last-transactions-content tr td,
table.last-transactions-content tr th {
padding: 5px;
}
table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th { table tfoot tr td, table tfoot tr th, table thead tr td, table thead tr th {
background-color: #F5F5F8; background-color: #F5F5F8;
color:#949BAD; color:#949BAD;
@ -975,7 +972,7 @@ table tbody tr:last-child td {
border-bottom: none; border-bottom: none;
} }
table.manage-wallets tr:hover { table tr:hover {
background-color: #eee; background-color: #eee;
cursor: pointer; cursor: pointer;
} }
@ -1350,13 +1347,6 @@ a:hover .photo-container {
margin-left: 0; margin-left: 0;
} }
.addresses .list-addr i {
position: absolute;
top: -15px;
left: 0;
cursor: pointer;
}
.addresses .list-addr contact { .addresses .list-addr contact {
cursor: text; cursor: text;
} }
@ -1368,7 +1358,7 @@ a:hover .photo-container {
.copay-box { .copay-box {
width: 70px; width: 70px;
text-align: center; text-align: center;
margin-right: 20px; margin-right: 10px;
float: left; float: left;
} }
@ -1446,8 +1436,6 @@ a.text-warning:hover {color: #FD7262;}
.box-setup-copayers { .box-setup-copayers {
background: #F8F8FB; background: #F8F8FB;
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.20);
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.20);
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -1479,9 +1467,6 @@ a.text-warning:hover {color: #FD7262;}
.panel { .panel {
border-radius: 3px; border-radius: 3px;
background: #FFFFFF; background: #FFFFFF;
-moz-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
-o-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
border: none; border: none;
} }
@ -1510,19 +1495,6 @@ a.text-warning:hover {color: #FD7262;}
dialog.large, .reveal-modal.large { dialog.large, .reveal-modal.large {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: 1.25rem 0.25rem;
}
dialog.large span.address-size, .reveal-modal.large span.address-size {
font-size: 12px;
}
dialog.large table, .reveal-modal.large table {
margin: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
} }
} }
@ -1674,15 +1646,6 @@ a.text-warning:hover {color: #FD7262;}
text-align: center; text-align: center;
} }
.addressbook-entry td {
display: block;
cursor: pointer;
}
.addressbook-disabled td, .addressbook-disabled td a {
color: #8597A7;
}
/*/////////////////////////////////////////////////*/ /*/////////////////////////////////////////////////*/
.createProfile .icon-input { .createProfile .icon-input {

View file

@ -468,7 +468,7 @@ angular.module('copayApp.controllers').controller('SendController',
$modalInstance.close(addr); $modalInstance.close(addr);
}; };
$scope.cancel = function() { $scope.cancel = function(form) {
$scope.error = $scope.success = null; $scope.error = $scope.success = null;
$scope.toggleForm(); $scope.toggleForm();
}; };

View file

@ -37,7 +37,7 @@
</span> </span>
{{$root.wallet.settings.unitName}} {{$root.wallet.settings.unitName}}
</span> </span>
<span class="size-14 db m5t text-gray"> <span class="size-14 db m5t text-gray" ng-show="btx.alternativeAmount">
{{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}} {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
</span> </span>
</div> </div>

View file

@ -1,90 +1,92 @@
<div> <div class="text-right">
<h1 ng-show="!showForm">Address Book <a class="close-reveal-modal" ng-click="close()">Close</a>
<small><a class="text-success" href ng-click="toggleForm()"><i class="fi-plus"></i> Add entry</a></small> </div>
</h1> <div class="row m10t">
<h1 ng-show="showForm">Add a new entry</h1> <div class="large-12 columns">
<p translate class="text-gray m15b" ng-show="!showForm && !hasEntry()">Empty. Create an alias for your addresses</p> <h1 ng-show="!showForm">Address Book</h1>
<div class="box-notification" ng-show="success"> <h1 ng-show="showForm">Add a new entry</h1>
<div class="box-icon success"> <p translate class="text-gray m15b" ng-show="!showForm && !hasEntry()">Empty. Create an alias for your addresses</p>
<i class="size-24 fi-check"></i> <div class="box-notification" ng-show="success">
</div> <div class="box-icon success">
<span class="size-14 text-success"> <i class="size-24 fi-check"></i>
{{success}} </div>
</span> <span class="size-14 text-success">
</div> {{success}}
<table class="addressbook" ng-show="!showForm && hasEntry()"> </span>
<thead class="show-for-large-up"> </div>
<tr> <table class="addressbook line-t" ng-show="!showForm && hasEntry()">
<th translate>Entry</th> <thead class="show-for-large-up">
<th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th> <tr>
<th class="show-for-large-up" translate>Date</th> <th translate>Entry</th>
<th class="show-for-large-up">Visible</th> <th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
</tr> <th class="show-for-large-up" translate>Date</th>
</thead> <th class="show-for-large-up">Visible</th>
<tbody> </tr>
<tr </thead>
class="addressbook-entry" <tbody>
ng-repeat="(addr, info) in addressBook" <tr
ng-class="{'addressbook-disabled': info.hidden}"> ng-repeat="(addr, info) in addressBook"
<td ng-click="copyToSend(addr)"> ng-class="{'addressbook-disabled': info.hidden}">
<dl> <td ng-click="copyToSend(addr)">
<dt><b>{{info.label}}</b></dt> <b>{{info.label}}</b><br>
<dd><span class="address-size">{{::addr}}</span></dd> <span class="address-size">{{::addr}}</span>
</dl> </td>
</td> <td ng-click="copyToSend(addr)" ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td ng-click="copyToSend(addr)" ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td> <td ng-click="copyToSend(addr)" class="show-for-large-up"><time>{{::info.createdTs | amCalendar}}</time></td>
<td ng-click="copyToSend(addr)" class="show-for-large-up"><time>{{::info.createdTs | amCalendar}}</time></td> <td class="show-for-large-up text-center">
<td class="show-for-large-up text-center"> <a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address">
<a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address"> <i class="fi-checkbox size-21"
<i class="fi-checkbox size-21" ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i>
ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i> </a>
</a> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
<div class="row" ng-show="showForm">
<div class="row" ng-show="showForm"> <div class="large-6 medium-6 columns large-centered medium-centered">
<div class="large-6 medium-6 columns large-centered medium-centered"> <form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
<form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate> <div class="box-notification" ng-show="error">
<div class="box-notification" ng-show="error"> <div class="box-icon error">
<div class="box-icon error"> <i class="size-24 fi-x"></i>
<i class="size-24 fi-x"></i> </div>
</div> <span class="size-14 text-warning">
<span class="size-14 text-warning"> {{error}}
{{error}} </span>
</span> </div>
</div> <div class="row collapse">
<div class="row collapse"> <label for="newaddress" class="left"><span translate>Address</span>
<label for="newaddress" class="left"><span translate>Address</span> <small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
<small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small> </label>
</label> <span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
<span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress"> <span class="icon-input"><i class="fi-x"></i></span>
<span class="icon-input"><i class="fi-x"></i></span> Not valid
Not valid </span>
</span> <small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
<small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small> </div>
</div> <div class="input">
<div class="input"> <input type="text" name="newaddress"
<input type="text" name="newaddress" placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required> <i class="fi-address-book"></i>
<i class="fi-address-book"></i> </div>
</div>
<label for="newlabel"><span translate>Label</span>
<label for="newlabel"><span translate>Label</span> <small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
<small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small> <div class="input">
<div class="input"> <input type="text" name="newlabel"
<input type="text" name="newlabel" placeholder="{{'Label'|translate}}" ng-model="newlabel" required>
placeholder="{{'Label'|translate}}" ng-model="newlabel" required> <i class="icon-pricetag"></i>
<i class="icon-pricetag"></i> </div>
</div> </label>
</label> <a translate class="m0 button secondary small default" ng-click="cancel(addressBookForm)">Back</a>
<a translate class="m0 button secondary small default" ng-click="cancel()">Back</a> <input type="submit" class="m0 button small primary right"
<input type="submit" class="m0 button small primary right" ng-disabled="addressBookForm.$invalid || loading"
ng-disabled="addressBookForm.$invalid || loading" value="{{'Add'|translate}}">
value="{{'Add'|translate}}"> </form>
</form> </div>
</div> </div>
</div> </div>
<a class="close-reveal-modal" ng-click="close()">&#215;</a> <div class="large-12 columns" ng-show="!showForm">
<a class="button primary expand" ng-click="toggleForm()"><i class="fi-plus"></i> Add entry</a>
</div>
</div> </div>

View file

@ -1,4 +1,7 @@
<div class="text-center"> <div class="text-right">
<a class="close-reveal-modal" ng-click="cancel()">Close</a>
</div>
<div class="text-center m20t">
<qrcode size="220" data="{{address.address}}"></qrcode> <qrcode size="220" data="{{address.address}}"></qrcode>
<div class="m10t" ng-init="label = $root.wallet.addressBook[address.address].label"> <div class="m10t" ng-init="label = $root.wallet.addressBook[address.address].label">
@ -10,4 +13,3 @@
</b> </b>
</div> </div>
</div> </div>
<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>

View file

@ -12,7 +12,7 @@
<span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amount}} <span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amount}}
{{$root.wallet.settings.unitName}} {{$root.wallet.settings.unitName}}
</div> </div>
<div class="size-18 m5t text-gray"> <div class="size-18 m5t text-gray" ng-show="btx.alternativeAmount">
{{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}} {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="text-right"> <div class="text-right">
<a class="close-reveal-modal" ng-click="cancel()">Close</a> <a class="close-reveal-modal" ng-click="close()">Close</a>
</div> </div>
<div class="text-center" ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()"> <div class="text-center" ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()">

View file

@ -27,16 +27,14 @@
</div> </div>
<div class="row"> <div class="row">
<div class="large-12 columns" ng-if="addresses.length"> <div class="large-12 columns" ng-if="addresses.length">
<div ng-repeat="addr in addresses"> <div ng-repeat="addr in addresses" ng-click="openAddressModal(addr)" class="pointer">
<div class="panel"> <div class="panel">
<div class="row show-for-large-up"> <div class="row">
<div class="large-7 medium-9 columns"> <div class="large-8 medium-9 columns">
<div class="list-addr"> <contact address="{{::addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right">
<contact address="{{::addr.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"> <small translate class="label" ng-if="::addr.isChange">change</small>
<small translate class="label" ng-if="::addr.isChange">change</small>
</div>
</div> </div>
<div class="large-3 medium-3 columns text-right"> <div class="large-4 medium-3 columns text-right">
<span ng-show="$root.updatingBalance"> <span ng-show="$root.updatingBalance">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span> </span>
@ -44,41 +42,20 @@
<b>{{addr.balance || '0'}} {{$root.wallet.settings.unitName}}</b> <b>{{addr.balance || '0'}} {{$root.wallet.settings.unitName}}</b>
</span> </span>
</div> </div>
<div class="large-2 columns show-for-large-up text-right">
<a class="size-12" ng-click="openAddressModal(addr)"> Show QR</a>
</div>
</div>
<div class="row hide-for-large-up" ng-click="openAddressModal(addr)">
<div class="small-12 columns">
<div class="list-addr">
<div class="ellipsis">
<span><contact address="{{::addr.address}}"></span>
<small translate class="label" ng-if="::addr.isChange">change</small>
</div>
<div class="text-right m10t">
<span class="size-14" ng-show="$root.updatingBalance">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
</span>
<span class="size-14" ng-show="!$root.updatingBalance">
<b>{{addr.balance || '0'}} {{$root.wallet.settings.unitName}}</b>
</span>
</div>
</div>
</div>
</div> </div>
<!-- end of panel mobile --> <!-- end of panel mobile -->
</div> </div>
</div> </div>
<a class="button primary text-center right" ng-click="newAddr()" ng-disabled="loading"> <a class="button secondary tiny text-center right" ng-click="newAddr()" ng-disabled="loading">
Generate new address Generate new address
</a> </a>
<a class="button primary text-center" ng-click="toggleShowAll()" ng-disabled="loading"> <a class="button secondary tiny text-center" ng-click="toggleShowAll()" ng-disabled="loading">
<span translate ng-if="showAll">Hide them</span> <span translate ng-if="showAll">Hide them</span>
</a> </a>
</div> </div>
<div class="large-12 columns" ng-if="!showAll"> <div class="large-12 columns" ng-if="!showAll">
<div class="m20b"> <div class="m20b">
<a class="button primary text-center" ng-click="toggleShowAll()" ng-disabled="loading"> <a class="button secondary tiny text-center" ng-click="toggleShowAll()" ng-disabled="loading">
<span translate>Show all my addresses</span> <span translate>Show all my addresses</span>
</a> </a>
</div> </div>