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

Ux/paypro layout tables digest
2014-11-15 11:18:00 -03:00 · 2014-11-15 11:18:00 -03:00 · c8f1a44dff
commit c8f1a44dff
parent b9d66b3a12 40572e2908
8 changed files with 84 additions and 66 deletions
--- a/css/src/main.css
+++ b/css/src/main.css
@ -352,17 +352,9 @@ a:hover {
  overflow: hidden;
 }

-.last-transactions-content {
-  overflow: hidden;
-  padding: 1rem;
-  background: #CED3DB;
-}
-
 table.last-transactions-content {
-  padding: 0;
-  border: 0;
  background-color: #F8F8FB;
-  margin: 10px 0;
+  margin-bottom: 10px;
 }

 .last-transactions-content .box-status {
@ -542,6 +534,11 @@ a.button-setup {
  margin: 0.7rem 0;
 }

+.line-white {
+  border-top: 1px solid #fff;
+  margin: 0.7rem 0;
+}
+
 .line-t {
  border-top: 1px solid #F8F8FB;
  padding-top: 0.5rem;
@ -836,22 +833,42 @@ label small.has-error {
  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;
-webkit-box-shadow: -2px 1px 5px 1px #DDDDDD;
-moz-box-shadow: -2px 1px 5px 1px #DDDDDD;
-o-box-shadow: -2px 1px 5px 1px #DDDDDD;
-
+  -webkit-box-shadow: -2px 1px 5px 1px #DDDDDD;
+  -moz-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 {
-  background: #CBECE6;
+table tr td, table tr th { 
+  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 {
@ -1247,6 +1264,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 .text-secondary {color: #3498DB;}
 .text-white {color: #fff;}
 .text-warning {color: #CA5649;}
+.text-success {color: #1ABC9C;}

 a.text-gray:hover {color: #2C3E50;}
 a.text-black:hover {color: #213140;}
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@ -123,14 +123,6 @@
    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 { 
    border-radius: 0;
    padding: 0.1rem 0.3rem;
--- a/js/controllers/paymentIntent.js
+++ b/js/controllers/paymentIntent.js
@ -5,6 +5,8 @@ var bitcore = require('bitcore');
 angular.module('copayApp.controllers').controller('PaymentIntentController', function($rootScope, $scope, $modal, $location, controllerUtils) {

  $scope.wallets = [];
+  $rootScope.title = 'Payment intent';
+  $rootScope.starting = true;

  var wids = _.pluck($rootScope.iden.listWallets(), 'id');
  _.each(wids, function(wid) {
@ -12,6 +14,7 @@ angular.module('copayApp.controllers').controller('PaymentIntentController', fun
    if (w && w.isReady()) {

      $scope.wallets.push(w);
+      $rootScope.starting = false;
      controllerUtils.clearBalanceCache(w);
      controllerUtils.updateBalance(w, function() {
        $rootScope.$digest();
--- a/js/models/Wallet.js
+++ b/js/models/Wallet.js
@ -2693,7 +2693,7 @@ Wallet.prototype.verifyAddressbookEntry = function(rcvEntry, senderId, key) {
 Wallet.prototype.toggleAddressBookEntry = function(key) {
  if (!key) throw new Error('Key is required');
  this.addressBook[key].hidden = !this.addressBook[key].hidden;
-  this.emitAndKeepAlive('addressBookUpdated');
+  this.emitAndKeepAlive('addressBookUpdated', true);
 };

 /**
--- a/views/history.html
+++ b/views/history.html
@ -70,7 +70,7 @@
            </div>

          </div>
-          <div ng-show="btx.showDetails">
+          <div ng-show="btx.showDetails" class="m10t">
            <table class="last-transactions-content" ng-if="btx.actionList.0">
              <tbody>
              <tr ng-repeat="c in btx.actionList">
@ -99,17 +99,20 @@
            </div>
          </div>
        </div>
-        <div ng-if="generating" class="right size-12">
-          <i class="fi-bitcoin-circle icon-rotate spinner"></i> 
-          <span translate>Generating file...</span>
+        <div class="line-white"></div>
+        <div class="right size-12">
+          <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 ng-if="!generating" class="right size-12">
-          <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" />
+        <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="selectPage(page)" max-size="10" />
      </div>
    </div>
  </div>
--- a/views/includes/transaction.html
+++ b/views/includes/transaction.html
@ -24,7 +24,7 @@
 <table class="last-transactions-content">
  <tbody>
  <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>
      <i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
--- a/views/profile.html
+++ b/views/profile.html
@ -42,51 +42,49 @@
  <div class="row" ng-init="getWallets()">
    <div class="large-12 columns">
      <h2>Manage wallets</h2>
-
-
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
-            <th>Status</th>
+            <th class="hide-for-small-only">Status</th>
            <th>Balance</th>
-            <th>Actions</th>
+            <th class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr 
-                data-ng-repeat="item in wallets | orderBy:'name'" 
-                ng-init="isReady = item.isReady(); 
-                networkName = item.getNetworkName()"
-                ng-class="{'deleting':loading==item.id}">
+              data-ng-repeat="item in wallets | orderBy:'name'" 
+              ng-init="isReady = item.isReady();
+              networkName = item.getNetworkName()"
+              ng-class="{'deleting':loading==item.id}">
            <td>{{item.name || item.id }}</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>
              <span ng-if="!isReady">-</span>
              <span ng-if="isReady">
                  {{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}}
              </span>
            </td>
-            <td class="text-center">
-
+            <td class="text-right">
              <div ng-show="loading != item.id">
                <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)"
-                    ng-show="isSafari"><i class="fi-eye"></i></a> 
-                  &nbsp; &nbsp;
+                  ng-show="isSafari"><i class="fi-eye"></i></a> 
+                &nbsp; 
                <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-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a>
+                  ng-really-click="deleteWallet(item)"
+                  ng-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a>
              </div>
-                <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
+              <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
    </div>
  </div> 
 </div>
--- a/views/send.html
+++ b/views/send.html
@ -194,7 +194,7 @@
              <th translate>Address</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">&nbsp;</th>
+              <th class="hide-for-small-only">Enable</th>
            </tr>
          </thead>
          <tbody>
@ -205,8 +205,12 @@
            <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 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 ?
-                'Enable' : 'Disable'}}</a></td>
+            <td class="hide-for-small-only">
+              <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>
          </tbody>
        </table>