Merge pull request #200 from cmgustavo/ref/design-55

Ref/design 55
2016-09-27 14:18:14 -03:00 · 2016-09-27 14:18:14 -03:00 · c8633bc18b
commit c8633bc18b
parent 12bcf8bac4 2efe47c016
7 changed files with 104 additions and 92 deletions
--- a/public/views/modals/tx-details.html
+++ b/public/views/modals/tx-details.html
@ -3,7 +3,7 @@
    <button class="button button-clear" ng-click="cancel()">
      {{'Close' | translate}}
    </button>
-    <div class="title" translate>
+    <div class="title">
      {{title}}
    </div>
  </ion-header-bar>
@ -16,25 +16,26 @@
          <img src="img/icon-wallet.svg" ng-style="{'background-color': color}" class="bg"/>
        </i>

-        <div class="size-36" copy-to-clipboard="btx.amountStr">
-          <span class="enable_text_select">{{btx.amountStr}}</span>
+        <div class="size-36 m20t" copy-to-clipboard="btx.amountStr">
+          {{btx.amountStr}}
        </div>

-        <div class="alternative-amount" ng-click="showRate =! showRate">
-          <span class="label gray radius" ng-show="!showRate && alternativeAmountStr">
+        <div class="m10t" style="height:20px;" ng-click="showRate =! showRate">
+          <span ng-show="!showRate && alternativeAmountStr">
            {{alternativeAmountStr}}
          </span>
-          <span class="size-12" ng-show="showRate && alternativeAmountStr">
+          <span ng-show="showRate && alternativeAmountStr">
            {{rateStr}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
          </span>
        </div>
      </div>

      <div ng-show="btx.action == 'sent'">
-        <span translate>Sent from</span> {{wallet.credentials.walletName}}
-        <div class="padding-vertical">
-          <i class="icon ion-ios-arrow-thin-down size-24"></i>
+        <div>
+          <span translate>Sent from</span>
+          <strong ng-style="{'color': color}">{{wallet.credentials.walletName}}</strong>
        </div>
+        <i class="icon ion-ios-arrow-thin-down size-24"></i>
      </div>

      <div ng-show="btx.action == 'received'">
@ -63,27 +64,26 @@
          </span>
          <span ng-if="!btx.merchant">
            <span ng-show="btx.labelTo">{{btx.labelTo}}</span>
-            <contact ng-show="!btx.labelTo" class="enable_text_select" address="{{btx.addressTo}}"></contact>
+            <contact ng-show="!btx.labelTo" address="{{btx.addressTo}}"></contact>
          </span>
        </div>
      </div>

-      <div class="item item-icon-left" ng-click="openExternalLink('https://' +
-        (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
+      <div class="item item-icon-left"
+        ng-click="openExternalLink('https://' + (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
        <i class="icon ion-ios-upload-outline"></i>
        <span class="text-gray" translate>View transaction on the blockchain</span>
      </div>

      <div class="item">
-        <div ng-if="btx.action == 'received' || 'moved'">
-          <span translate>Date</span>
+        <div ng-if="btx.action == 'received' || btx.action == 'moved'">
+          {{'Date'|translate}}
          <span class="item-note">
            <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
          </span>
        </div>
        <div ng-if="btx.action == 'sent'">
-          <div translate>Created by</div>
-          <span>{{btx.creatorName}}</span>
+          {{'Created by'|translate}} <strong>{{btx.creatorName}}</strong>
          <span class="item-note">
            <time>{{ btx.createdOn * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
          </span>
@ -91,9 +91,8 @@
      </div>

      <div class="item" ng-if="btx.action != 'received' && btx.feeLevel" copy-to-clipboard="btx.feeStr">
-        <div translate>Fee</div>
-        <span class="enable_text_select">{{btx.feeLevel}} ({{btx.feeStr}})</span>
-        <span class="right">
+        {{'Fee'|translate}}: {{btx.feeStr}}
+        <span class="item-note">
          <span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>
            Unconfirmed
          </span>
@ -108,20 +107,23 @@
      </div>

      <div class="item" ng-if="btx.message && btx.action != 'received'" copy-to-clipboard="btx.message">
-        <div translate>Description</div>
-        <span class="enable_text_select">{{btx.message}}</span>
+        {{'Description'|translate}}
+        <span class="item-note">
+          {{btx.message}}
+        </span>
      </div>

      <div ng-if="btx.merchant" class="item" copy-to-clipboard="btx.merchant.pr.pd.memo">
-        <div translate>Merchant message</div>
-        <span class="enable_text_select">
+        {{'Merchant message'|translate}}
+        <span class="item-note">
          {{btx.merchant.pr.pd.memo}}
        </span>
      </div>

      <div ng-show="btx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
-        <div translate>Recipients</div>
-        <span class="right">{{btx.recipientCount}}
+        {{'Recipients'|translate}}
+        <span class="item-note">
+          {{btx.recipientCount}}
          <i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
          <i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
        </span>
@ -138,21 +140,22 @@
        </span>
      </div>

-      <div class="item item-icon-right" ng-click="showCommentPopup()">
-        <span class="text-gray" translate ng-if="!btx.note">Add Memo</i></span>
-        <span class="text-gray" translate ng-if="btx.note">Memo</span>
-        <div ng-if="btx.note && btx.note.body">
-          <span class="enable_text_select">{{btx.note.body}}</span><br>
-          <span class="text-italic item-note size-12">
-            <span translate>Edited by</span> <span>{{btx.note.editedByName}}</span>,
-            <time>{{btx.note.editedOn * 1000 | amTimeAgo}}</time></span>
-          </span>
-        </div>
+      <div class="item" ng-click="showCommentPopup()">
+        {{'Memo'|translate}}
+        <span class="item-note" translate ng-if="!btx.note">
+          <i class="icon ion-ios-plus-empty"></i>
+        </span>
+        <span class="item-note" ng-if="btx.note && btx.note.body">
+          {{btx.note.body}}
+          <div>
+            <span translate>Edited by</span> {{btx.note.editedByName}},
+            <time>{{btx.note.editedOn * 1000 | amTimeAgo}}</time>
+          </div>
+        </span>
      </div>

      <div ng-if="actionList[0]">
        <div class="item item-divider" translate>Timeline</div>
-
        <div class="item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
          <div class="row">
            <div class="col col-10">
--- a/public/views/modals/txp-details.html
+++ b/public/views/modals/txp-details.html
@ -22,32 +22,30 @@
          <div class="amount">{{tx.amountStr}}</div>
          <div class="alternative" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
        </div>
-      </div>

-      <div class="row" ng-if="tx.removed">
-        <div class="column m20t text-center text-warning size-12" translate>
+        <div class="text-center m10t assertive" ng-if="tx.removed" translate>
          The payment was removed by creator
        </div>
+
+        <div class="text-center m10t" ng-show="tx.status != 'pending'">
+          <div ng-show="tx.status == 'accepted' && !tx.isGlidera">
+            <div class="m10b positive" translate>Payment accepted, but not yet broadcasted</div>
+
+            <button class="button button-positive button-block" ng-click="broadcast(tx)" ng-disabled="loading">
+              <i class="icon ion-ios-cloud-upload-outline"></i>
+              <span translate>Broadcast Payment</span>
+            </button>
+          </div>
+          <div ng-show="tx.status == 'accepted' && tx.isGlidera" >
+            <div class="m10h" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
+          </div>
+          <div class="balanced" ng-show="tx.status == 'broadcasted'" translate>Payment Sent</div>
+          <div class="assertive" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
+        </div>
      </div>

-      <div ng-show="tx.status != 'pending'">
-        <div ng-show="tx.status=='accepted' && !tx.isGlidera">
-          <div class="m10b" translate>Payment accepted, but not yet broadcasted</div>
-
-          <button class="button button-balanced button-block" ng-style="{'background-color':color}" ng-click="broadcast(tx)" ng-disabled="loading">
-            <i class="fi-upload-cloud"></i>
-            <span translate>Broadcast Payment</span>
-          </button>
-        </div>
-        <div ng-show="tx.status=='accepted' && tx.isGlidera" >
-          <div class="m10h" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
-        </div>
-        <div class="balanced" ng-show="tx.status == 'broadcasted'" translate>Payment Sent</div>
-        <div class="assertive" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
-      </div>
-
-      <div class="item" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
-        <span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
+      <div class="item assertive text-center" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs" translate>
+        Warning: this transaction has unconfirmed inputs
      </div>

      <div class="info">
@ -55,7 +53,7 @@
          <span translate>To</span>
          <span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
            <i class="icon ion-social-bitcoin"></i>
-            <contact ng-if="!tx.hasMultiplesOutputs" class="enable_text_select ellipsis" address="{{tx.toAddress}}"></contact>
+            <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{tx.toAddress}}"></contact>
            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
          </span>
        </div>
@ -73,61 +71,61 @@
        </div>

        <div class="item">
-          <span translate>From</span>
-          <i class="icon big-icon-svg">
-            <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
-          </i>
-          <span>
-            {{wallet.name}}
+          {{'From'|translate}}
+          <span class="item-note">
+            <i class="icon big-icon-svg right">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+            </i>
+            <div class="m10t m55r">{{wallet.name}}</div>
          </span>
        </div>
        <div class="item">
-          <span translate>Created by</span>
-          <span>
+          {{'Created by'|translate}}
+          <span class="item-note">
            {{tx.creatorName}} <time>{{ (tx.ts || tx.createdOn ) * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
          </span>
        </div>
        <div class="item" ng-show="tx.message">
-          <span translate>Memo</span>
-          <span>
+          {{'Memo'|translate}}
+          <span class="item-note">
            {{tx.message}}
          </span>
        </div>
        <div class="item">
-          <span translate>Fee</span>
-          <span>
+          {{'Fee'|translate}}
+          <span class="item-note">
            {{tx.feeStr}}
          </span>
        </div>

        <div ng-if="tx.paypro">
          <div class="item item-divider" translate>Payment details</div>
-          <li class="item">
-            <span class="text-gray" translate>To</span>
-            <span class="right">
+          <div class="item">
+            {{'To'|translate}}
+            <span class="item-note">
              <span>
                <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.paypro.domain}}</span>
                <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.paypro.domain}}</span>
              </span>
              <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"></contact>
            </span>
-          </li>
-          <li class="item" ng-if="paymentExpired">
-            <span class="text-gray" translate>Expired</span>
-            <span class="right text-alert">
+          </div>
+          <div class="item" ng-if="paymentExpired">
+            {{'Expired'|translate}}
+            <span class="item-note">
              <time>{{tx.paypro.expires * 1000 | amTimeAgo }}</time>
            </span>
-          </li>
-          <li class="item" ng-if="!paymentExpired">
-            <span class="text-gray" translate>Expires</span>
-            <span class="right">
+          </div>
+          <div class="item" ng-if="!paymentExpired">
+            {{'Expires'|translate}}
+            <span class="item-note">
              <time>{{expires}}</time>
            </span>
-          </li>
-          <li class="item">
-            <span class="text-gray" translate>Merchant Message</span>
-            <span class="db">{{tx.paypro.pr.pd.memo}}</span>
-          </li>
+          </div>
+          <div class="item">
+            {{'Merchant Message'|translate}}
+            <span class="item-note">{{tx.paypro.pr.pd.memo}}</span>
+          </div>
        </div>
        <div ng-if="actionList[0]">
          <div class="item item-divider" translate>Timeline</div>
@ -151,16 +149,20 @@
        </div>
      </div>
    </div>
-    <div class="m20t" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
+    <button class="button button-block button-positive"
+            ng-click="sign()"
+            ng-if="tx.pendingForUs && canSign && !loading && !paymentExpired && !isCordova" translate>
+      Click to accept
+    </button>
+    <div class="m30t text-center" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
      <div class="size-12 padding" ng-show="!tx.isGlidera && isShared" translate>
        * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
      </div>
-      <button class="button button-assertive button-block" ng-click="remove()" ng-disabled="loading">
+      <button class="button button-assertive button-clear" ng-click="remove()" ng-disabled="loading">
        <i class="fi-trash size-14 m5r"></i>
        <span translate>Delete Payment Proposal</span>
      </button>
    </div>
-    <button class="button button-block button-positive" ng-click="sign()" ng-if="tx.pendingForUs && canSign && !loading && !paymentExpired && !isCordova" translate>Click to pay</button>
  </ion-content>
  <accept class="accept-slide" ng-if="tx.pendingForUs && canSign && !loading && !paymentExpired && isCordova"></accept>
 </ion-modal-view>
--- a/public/views/tab-home.html
+++ b/public/views/tab-home.html
@ -26,7 +26,7 @@
        Payment Proposals
        <i class="icon nav-item-arrow-right"></i>

-        <span class="badge badge-assertive" ng-show="txpsN>3" translate> {{txpsN}}</span>
+        <span class="badge badge-assertive m5t m10r" ng-show="txpsN>3" translate> {{txpsN}}</span>
      </a>

      <a ng-repeat="tx in txps" class="item" ng-click="openTxpModal(tx)">
--- a/src/js/controllers/modals/txDetails.js
+++ b/src/js/controllers/modals/txDetails.js
@ -126,6 +126,9 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
        $scope.rateDate = res.fetchedOn;
        $scope.rateStr = res.rate + ' ' + $scope.alternativeIsoCode;
        $scope.alternativeAmountStr = $filter('formatFiatAmount')(alternativeAmountBtc * res.rate) + ' ' + $scope.alternativeIsoCode;
+        $timeout(function() {
+          $scope.$apply();
+        });
      }
    });
  };
--- a/src/js/controllers/modals/txpDetails.js
+++ b/src/js/controllers/modals/txpDetails.js
@ -7,6 +7,7 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
  var isGlidera = $scope.isGlidera;
  var GLIDERA_LOCK_TIME = 6 * 60 * 60;
  var now = Math.floor(Date.now() / 1000);
+  var countDown;

  $scope.init = function() {
    $scope.loading = null;
@ -18,6 +19,7 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
    $scope.data = {};

    initActionList();
+    checkPaypro();
  }

  function initActionList() {
@ -53,8 +55,6 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
    $scope.sign();
  });

-  checkPaypro();
-
  // ToDo: use tx.customData instead of tx.message
  if (tx.message === 'Glidera transaction' && isGlidera) {
    tx.isGlidera = true;
@ -154,7 +154,7 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
    $scope.paymentExpired = false;
    setExpirationTime();

-    self.countDown = $interval(function() {
+    countDown = $interval(function() {
      setExpirationTime();
    }, 1000);

@ -162,7 +162,7 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
      var now = Math.floor(Date.now() / 1000);
      if (now > expirationTime) {
        $scope.paymentExpired = true;
-        if (self.countDown) $interval.cancel(self.countDown);
+        if (countDown) $interval.cancel(countDown);
        return;
      }
      var totalSecs = expirationTime - now;
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@ -594,6 +594,10 @@ ul.wallet-selection.wallets {
  margin-right: 40px;
 }

+.m55r {
+  margin-right: 55px;
+}
+
 .m25r {
  margin-right: 25px;
 }
--- a/src/sass/views/includes/txp-details.scss
+++ b/src/sass/views/includes/txp-details.scss
@ -3,7 +3,7 @@
    bottom: 100px;
  }
  .head {
-    padding-bottom: 55px;
+    padding-bottom: 30px;
    .sending-label{
      line-height: 70px;
      font-size: 25px;