Merge pull request #1816 from cmgustavo/ux/paypro-layout-tables

Ux/paypro layout tables digest
This commit is contained in:
Matias Alejo Garcia 2014-11-15 11:18:00 -03:00
commit c8f1a44dff
8 changed files with 84 additions and 66 deletions

View file

@ -352,17 +352,9 @@ a:hover {
overflow: hidden; overflow: hidden;
} }
.last-transactions-content {
overflow: hidden;
padding: 1rem;
background: #CED3DB;
}
table.last-transactions-content { table.last-transactions-content {
padding: 0;
border: 0;
background-color: #F8F8FB; background-color: #F8F8FB;
margin: 10px 0; margin-bottom: 10px;
} }
.last-transactions-content .box-status { .last-transactions-content .box-status {
@ -542,6 +534,11 @@ a.button-setup {
margin: 0.7rem 0; margin: 0.7rem 0;
} }
.line-white {
border-top: 1px solid #fff;
margin: 0.7rem 0;
}
.line-t { .line-t {
border-top: 1px solid #F8F8FB; border-top: 1px solid #F8F8FB;
padding-top: 0.5rem; padding-top: 0.5rem;
@ -836,22 +833,42 @@ label small.has-error {
font-size: 11px; font-size: 11px;
} }
table { border-collapse: collapse; text-align: left; width: 100%; border: none; table {
border-collapse: collapse; text-align: left; width: 100%; border: none;
box-shadow: -2px 1px 9px 1px #DDDDDD; box-shadow: -2px 1px 9px 1px #DDDDDD;
-webkit-box-shadow: -2px 1px 5px 1px #DDDDDD; -webkit-box-shadow: -2px 1px 5px 1px #DDDDDD;
-moz-box-shadow: -2px 1px 5px 1px #DDDDDD; -moz-box-shadow: -2px 1px 5px 1px #DDDDDD;
-o-box-shadow: -2px 1px 5px 1px #DDDDDD; -o-box-shadow: -2px 1px 5px 1px #DDDDDD;
} }
thead tr{ text-transform: uppercase; border-top: 1px solid #FFFFFF; height: 46px}
table td, table th { padding: 15px 15px; height: 58px} }
table thead th {background-color: #F5F5F8; color:#949BAD; font-size: 13px; font-weight: normal; !important}
table tbody td { color: #000000; font-size: 14px;border-bottom: 1px solid #F1F1F3; }
table tbody tr:last-child td { border-bottom: none; }
thead tr{
text-transform: uppercase;
border-top: 1px solid #FFFFFF;
height: 46px
}
table tr.active { table tr td, table tr th {
background: #CBECE6; 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 {
background-color: #F5F5F8;
color:#949BAD;
font-weight: normal
}
table tbody td {
color: #666;
border-bottom: 1px solid #F1F1F3;
}
table tbody tr:last-child td {
border-bottom: none;
} }
table tr.deleting { table tr.deleting {
@ -1247,6 +1264,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
.text-secondary {color: #3498DB;} .text-secondary {color: #3498DB;}
.text-white {color: #fff;} .text-white {color: #fff;}
.text-warning {color: #CA5649;} .text-warning {color: #CA5649;}
.text-success {color: #1ABC9C;}
a.text-gray:hover {color: #2C3E50;} a.text-gray:hover {color: #2C3E50;}
a.text-black:hover {color: #213140;} a.text-black:hover {color: #213140;}

View file

@ -123,14 +123,6 @@
padding: 0 5px; padding: 0 5px;
} }
table.last-transactions-content td {
text-align: center;
}
table.last-transactions-content td.copayer-name {
text-align: left;
}
table.last-transactions-content .icon-status { table.last-transactions-content .icon-status {
border-radius: 0; border-radius: 0;
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;

View file

@ -5,6 +5,8 @@ var bitcore = require('bitcore');
angular.module('copayApp.controllers').controller('PaymentIntentController', function($rootScope, $scope, $modal, $location, controllerUtils) { angular.module('copayApp.controllers').controller('PaymentIntentController', function($rootScope, $scope, $modal, $location, controllerUtils) {
$scope.wallets = []; $scope.wallets = [];
$rootScope.title = 'Payment intent';
$rootScope.starting = true;
var wids = _.pluck($rootScope.iden.listWallets(), 'id'); var wids = _.pluck($rootScope.iden.listWallets(), 'id');
_.each(wids, function(wid) { _.each(wids, function(wid) {
@ -12,6 +14,7 @@ angular.module('copayApp.controllers').controller('PaymentIntentController', fun
if (w && w.isReady()) { if (w && w.isReady()) {
$scope.wallets.push(w); $scope.wallets.push(w);
$rootScope.starting = false;
controllerUtils.clearBalanceCache(w); controllerUtils.clearBalanceCache(w);
controllerUtils.updateBalance(w, function() { controllerUtils.updateBalance(w, function() {
$rootScope.$digest(); $rootScope.$digest();

View file

@ -2693,7 +2693,7 @@ Wallet.prototype.verifyAddressbookEntry = function(rcvEntry, senderId, key) {
Wallet.prototype.toggleAddressBookEntry = function(key) { Wallet.prototype.toggleAddressBookEntry = function(key) {
if (!key) throw new Error('Key is required'); if (!key) throw new Error('Key is required');
this.addressBook[key].hidden = !this.addressBook[key].hidden; this.addressBook[key].hidden = !this.addressBook[key].hidden;
this.emitAndKeepAlive('addressBookUpdated'); this.emitAndKeepAlive('addressBookUpdated', true);
}; };
/** /**

View file

@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<div ng-show="btx.showDetails"> <div ng-show="btx.showDetails" class="m10t">
<table class="last-transactions-content" ng-if="btx.actionList.0"> <table class="last-transactions-content" ng-if="btx.actionList.0">
<tbody> <tbody>
<tr ng-repeat="c in btx.actionList"> <tr ng-repeat="c in btx.actionList">
@ -99,17 +99,20 @@
</div> </div>
</div> </div>
</div> </div>
<div ng-if="generating" class="right size-12"> <div class="line-white"></div>
<i class="fi-bitcoin-circle icon-rotate spinner"></i> <div class="right size-12">
<span translate>Generating file...</span> <div ng-if="generating">
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
<span translate>Generating file...</span>
</div>
<div ng-if="!generating">
<a class="text-gray" href="#!/history" ng-click="downloadHistory();">
<i class="fi-page-export-csv"></i>
<span translate>Download CSV file</span>
</a>
</div>
</div> </div>
<div ng-if="!generating" class="right size-12"> <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
<a class="text-gray" href="#!/history" ng-click="downloadHistory();">
<i class="fi-download"></i>
<span translate>Download</span>
</a>
</div>
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
</div> </div>
</div> </div>
</div> </div>

View file

@ -24,7 +24,7 @@
<table class="last-transactions-content"> <table class="last-transactions-content">
<tbody> <tbody>
<tr ng-repeat="c in tx.actionList"> <tr ng-repeat="c in tx.actionList">
<td class="copayer-name" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}} <td width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td> </td>
<td> <td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i> <i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>

View file

@ -42,51 +42,49 @@
<div class="row" ng-init="getWallets()"> <div class="row" ng-init="getWallets()">
<div class="large-12 columns"> <div class="large-12 columns">
<h2>Manage wallets</h2> <h2>Manage wallets</h2>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Status</th> <th class="hide-for-small-only">Status</th>
<th>Balance</th> <th>Balance</th>
<th>Actions</th> <th class="text-right">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
data-ng-repeat="item in wallets | orderBy:'name'" data-ng-repeat="item in wallets | orderBy:'name'"
ng-init="isReady = item.isReady(); ng-init="isReady = item.isReady();
networkName = item.getNetworkName()" networkName = item.getNetworkName()"
ng-class="{'deleting':loading==item.id}"> ng-class="{'deleting':loading==item.id}">
<td>{{item.name || item.id }}</td> <td>{{item.name || item.id }}</td>
<td>{{item.requiredCopayers}} of {{item.totalCopayers}} - {{networkName}}</td> <td>{{item.requiredCopayers}} of {{item.totalCopayers}} - {{networkName}}</td>
<td>{{isReady ? 'Complete' : 'Waiting for copayers...'}}</td> <td class="hide-for-small-only">
{{isReady ? 'Complete' : 'Waiting for copayers...'}}
</td>
<td> <td>
<span ng-if="!isReady">-</span> <span ng-if="!isReady">-</span>
<span ng-if="isReady"> <span ng-if="isReady">
{{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}} {{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}}
</span> </span>
</td> </td>
<td class="text-center"> <td class="text-right">
<div ng-show="loading != item.id"> <div ng-show="loading != item.id">
<a title="Download Backup" class="text-gray" ng-click="downloadWalletBackup(item)" <a title="Download Backup" class="text-gray" ng-click="downloadWalletBackup(item)"
ng-show="!isSafari"><i class="fi-download size-18 m10r"></i></a> ng-show="!isSafari"><i class="fi-download size-18 m10r"></i></a>
<a title="View Backup" ng-click="viewWalletBackup(item)" <a title="View Backup" ng-click="viewWalletBackup(item)"
ng-show="isSafari"><i class="fi-eye"></i></a> ng-show="isSafari"><i class="fi-eye"></i></a>
&nbsp; &nbsp; &nbsp;
<a title="Delete Wallet" ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}" <a title="Delete Wallet" ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}"
ng-really-click="deleteWallet(item)" ng-really-click="deleteWallet(item)"
ng-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a> ng-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a>
</div> </div>
<span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span> <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>

View file

@ -194,7 +194,7 @@
<th translate>Address</th> <th translate>Address</th>
<th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th> <th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
<th class="hide-for-small-only" translate>Date</th> <th class="hide-for-small-only" translate>Date</th>
<th class="hide-for-small-only">&nbsp;</th> <th class="hide-for-small-only">Enable</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -205,8 +205,12 @@
<td class="size-12">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td> <td class="size-12">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
<td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td> <td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
<td class="hide-for-small-only"><time>{{info.createdTs | amCalendar}}</time></td> <td class="hide-for-small-only"><time>{{info.createdTs | amCalendar}}</time></td>
<td class="hide-for-small-only" width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ? <td class="hide-for-small-only">
'Enable' : 'Disable'}}</a></td> <a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address">
<i class="fi-checkbox"
ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i>
</a>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>