Merge pull request #139 from gabrielbazan7/ref/txpdetails

refactor txp details

public/views/modals/txp-details.html

@@ -1,43 +1,35 @@
-<ion-modal-view ng-controller="txpDetailsController">
+<ion-modal-view id="txp-details" ng-controller="txpDetailsController" ng-init="init()">
-  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color':color}">
+  <ion-header-bar align-title="center" class="bar-royal">
     <button class="button button-clear" ng-click="close()">
       Close
     </button>
     <div class="title" translate>
       Payment Proposal
     </div>
+    <button class="button button-clear" ng-click="reject()" ng-disabled="loading" ng-if="isShared && tx.pendingForUs">
+      Reject
+    </button>
   </ion-header-bar>
 
-  <ion-content ng-init="updateCopayerList()">
+  <ion-content ng-init="updateCopayerList()" ng-class="{'bottom': tx.pendingForUs && canSign}">
-      <div class="payment-proposal-head" ng-style="{'background-color':color}">
+    <div class="list">
-        <div class="size-36">{{tx.amountStr}}</div>
+      <div class="item head">
-        <div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
+        <div class="sending-label">
-        <i class="icon ion-ios-arrow-thin-down"></i>
+          <i class="icon ion-arrow-up-c"></i>
-        <span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
+          <span translate>Sending</span>
-          <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b size-14" address="{{tx.toAddress}}"></contact>
+        </div>
-          <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
+        <div class="amount-label">
-        </span>
+          <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>
           The payment was removed by creator
         </div>
       </div>
 
-      <div class="button-bar"  ng-if="tx.pendingForUs">
-        <button class="button  button-assertive button-block" ng-click="reject()" ng-disabled="loading" ng-show="isShared">
-          <i class="fi-x"></i>
-          <span translate>Reject</span>
-        </button>
-        <button class="button button-balanced button-block" ng-click="sign()" ng-style="{'background-color':color}" ng-disabled="loading || paymentExpired" ng-show="canSign">
-          <i class="fi-check"></i>
-          <span translate>Accept</span>
-        </button>
-      </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>
@@ -54,44 +46,55 @@
         <div class="assertive" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
       </div>
 
-      <ul class="list">
+      <div class="item" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
-        <div class="item item-divider" translate>Details</div>
+        <span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
-        <li class="item" ng-show="tx.message">
+      </div>
-          <span class="text-gray" translate>Description</span>
-          <span class="right">{{tx.message}}</span>
-        </li>
 
-        <li ng-show="tx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
+      <div class="info">
+        <div class="item">
+          <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>
+            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
+          </span>
+        </div>
+
+        <div ng-show="tx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
           <span class="text-gray" translate>Recipients</span>
           <span class="right">{{tx.recipientCount}}
             <i ng-show="showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
             <i ng-show="!showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
           </span>
-        </li>
+        </div>
 
         <div class="item" ng-show="tx.hasMultiplesOutputs && showMultiplesOutputs"
           ng-repeat="output in tx.outputs" ng-include="'views/includes/output.html'">
         </div>
 
-        <li class="item">
+        <div class="item">
-          <span class="text-gray" translate>Fee</span>
+          <span translate>From</span>
-          <span class="right">{{tx.feeStr}}</span>
+          <span>
-        </li>
+            {{wallet.name}}
-
+          </span>
-        <li class="item">
+        </div>
-          <span class="text-gray" translate>Time</span>
+        <div class="item">
-          <span class="right">
+          <span translate>Created by</span>
-            <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
+          <span>
+            {{tx.creatorName}} <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
+          </span>
+        </div>
+        <div class="item" ng-show="tx.message">
+          <span translate>Memo</span>
+          <span>
+            {{tx.message}}
+          </span>
+        </div>
+        <div class="item">
+          <span translate>Fee</span>
+          <span>
+            {{tx.feeStr}}
           </span>
-        </li>
-
-        <li class="item">
-          <span class="text-gray" translate>Created by</span>
-          <span class="right">{{tx.creatorName}}</span>
-        </li>
-
-        <div class="item" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
-          <span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
         </div>
 
         <div ng-if="tx.paypro">
@@ -123,23 +126,28 @@
             <span class="db">{{tx.paypro.pr.pd.memo}}</span>
           </li>
         </div>
+        <div ng-if="actionList[0]">
+          <div class="item item-divider" translate>Timeline</div>
 
-        <div ng-if="tx.actions[0] && !txRejected && !txBroadcasted">
+          <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="item item-divider">
+            <div class="row">
-            <div class="right size-12 text-gray m10r">
+              <div class="col col-10">
-              {{tx.requiredSignatures}}/{{tx.walletN}}
+                <span id="timeline-icon">{{$index + 1}}</span>
+              </div>
+              <div class="col">
+                <div>{{a.description}}</div>
+                <div>
+                  <span>{{a.by}}</span>
+                  <span class="item-note">
+                    <time>{{ a.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
+                  </span>
+                </div>
+              </div>
             </div>
-            <span translate>Participants</span>
           </div>
-          <li class="item" ng-repeat="ac in tx.actions">
-            <span class="item-note">
-              <i ng-if="ac.type == 'reject'" class="icon ion-ios-close-empty"></i>
-              <i ng-if="ac.type == 'accept'" class="icon ion-ios-checkmark-empty"></i>
-            </span>
-            {{ac.copayerName}} <span ng-if="ac.copayerId == copayerId">({{'Me'|translate}})</span>
-          </li>
         </div>
-      </ul>
+      </div>
+    </div>
     <div class="m20t" 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.
@@ -150,4 +158,13 @@
       </button>
     </div>
   </ion-content>
+  <div class="accept-slide" ng-disabled="loading || paymentExpired" ng-if="tx.pendingForUs && canSign && !hideSlider">
+    <ion-slides  options="options" slider="data.slider">
+      <ion-slide-page>
+      </ion-slide-page>
+      <ion-slide-page>
+        <div><h1>Slide to accept</h1><i class="icon-arrow-right3 size-24 right"></i></div>
+      </ion-slide-page>
+    </ion-slides>
+  </div>
 </ion-modal-view>

src/js/controllers/modals/txpDetails.js

@@ -1,19 +1,75 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $ionicModal, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, fingerprintService, bwcError, gettextCatalog, lodash,  walletService, popupService) {
+angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $ionicModal, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, fingerprintService, bwcError, gettextCatalog, lodash, walletService, popupService) {
   var self = $scope.self;
   var tx = $scope.tx;
   var copayers = $scope.copayers;
   var isGlidera = $scope.isGlidera;
   var GLIDERA_LOCK_TIME = 6 * 60 * 60;
   var now = Math.floor(Date.now() / 1000);
-  $scope.loading = null;
 
+  $scope.init = function() {
+    $scope.loading = null;
+    $scope.hideSlider = false;
+    $scope.copayerId = $scope.wallet.credentials.copayerId;
+    $scope.isShared = $scope.wallet.credentials.n > 1;
+    $scope.canSign = $scope.wallet.canSign() || $scope.wallet.isPrivKeyExternal();
+    $scope.color = $scope.wallet.color;
+    $scope.data = {};
 
-  $scope.copayerId = $scope.wallet.credentials.copayerId;
+    initActionList();
-  $scope.isShared =  $scope.wallet.credentials.n > 1;
+  }
-  $scope.canSign =  $scope.wallet.canSign() ||  $scope.wallet.isPrivKeyExternal();
+
-  $scope.color =  $scope.wallet.color;
+  function initActionList() {
+    $scope.actionList = [];
+
+    if (!$scope.isShared) return;
+
+    var actionDescriptions = {
+      created: gettextCatalog.getString('Proposal Created'),
+      accept: gettextCatalog.getString('Accepted'),
+      reject: gettextCatalog.getString('Rejected'),
+      broadcasted: gettextCatalog.getString('Broadcasted'),
+    };
+
+    $scope.actionList.push({
+      type: 'created',
+      time: tx.createdOn,
+      description: actionDescriptions['created'],
+      by: tx.creatorName
+    });
+
+    lodash.each(tx.actions, function(action) {
+      $scope.actionList.push({
+        type: action.type,
+        time: action.createdOn,
+        description: actionDescriptions[action.type],
+        by: action.copayerName
+      });
+    });
+  };
+
+  $scope.options = {
+    loop: false,
+    effect: 'flip',
+    speed: 500,
+    pagination: false,
+    initialSlide: 1
+  }
+
+  $scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
+    $scope.slider = data.slider;
+  });
+
+  $scope.$on("$ionicSlides.slideChangeStart", function(event, data) {
+    $scope.data.index = data.slider.activeIndex;
+    if ($scope.data.index == 0) {
+      $scope.hideSlider = true;
+      $scope.sign();
+    }
+  });
+
+  $scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {});
 
   checkPaypro();
 
@@ -33,9 +89,9 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
   $scope.sign = function() {
     $scope.loading = true;
     walletService.publishAndSign($scope.wallet, $scope.tx, function(err, txp) {
-        $scope.$emit('UpdateTx');
+      $scope.$emit('UpdateTx');
-        if (err) return setSendError(err);
+      if (err) return setSendError(err);
-        $scope.close();
+      $scope.close();
     });
   };
 

src/js/controllers/walletDetails.js

@@ -59,6 +59,27 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   }
 
   var setPendingTxps = function(txps) {
+
+    /* Uncomment to test multiple outputs */
+
+    // var txp = {
+    //   message: 'test multi-output',
+    //   fee: 1000,
+    //   createdOn: new Date() / 1000,
+    //   outputs: [],
+    //   wallet: wallet
+    // };
+    //
+    // function addOutput(n) {
+    //   txp.outputs.push({
+    //     amount: 600,
+    //     toAddress: '2N8bhEwbKtMvR2jqMRcTCQqzHP6zXGToXcK',
+    //     message: 'output #' + (Number(n) + 1)
+    //   });
+    // };
+    // lodash.times(15, addOutput);
+    // txps.push(txp);
+
     if (!txps) {
       $scope.txps = [];
       return;

src/js/services/txpModalService.js

@@ -15,9 +15,10 @@ angular.module('copayApp.services').factory('txpModalService', function(configSe
     var scope = $rootScope.$new(true);
     scope.tx = tx;
     scope.wallet = tx.wallet;
-    scope.copayers = tx.wallet.copayers;
+    scope.copayers = tx.wallet ? tx.wallet.copayers : null;
     scope.isGlidera = glideraActive;
     scope.currentSpendUnconfirmed = config.spendUnconfirmed;
+    // scope.tx.hasMultiplesOutputs = true;  // Uncomment to test multiple outputs
 
     $ionicModal.fromTemplateUrl('views/modals/txp-details.html', {
       scope: scope

src/sass/main.scss

@@ -377,27 +377,6 @@ ul.wallet-selection.wallets {
   color: #4A90E2;
 }
 
-.payment-proposal-head {
-  color: #fff;
-  padding: 10px 10px 20px 10px;
-  text-align: center;
-}
-
-.payment-proposal-to {
-  width: 100%;
-  display: inline-block;
-  padding: 5px 15px;
-  background-color: rgba(0, 0, 0, 0.1);
-  i {
-    position: inherit;
-    left: 25px;
-    padding-right: 10px;
-    border-right: 1px solid;
-    border-color: rgba(255, 255, 255, 0.1);
-    font-size: 20px;
-  }
-}
-
 .scroll {
   padding-bottom: 35px;
 }
@@ -995,3 +974,4 @@ input[type=number] {
 @import "views/includes/wallets";
 @import "views/includes/modals/modals";
 @import "views/includes/tx-details";
+@import "views/includes/txp-details";

src/sass/views/includes/txp-details.scss

@@ -0,0 +1,66 @@
+#txp-details{
+  .bottom {
+    bottom: 100px;
+  }
+  .head {
+    padding-bottom: 55px;
+    .sending-label{
+      line-height: 70px;
+      font-size: 25px;
+      i {
+        margin-left: 20px;
+      }
+      span {
+        margin-left: 15px;
+      }
+    }
+    .amount-label{
+      margin-left: 20px;
+      line-height: 30px;
+      .amount{
+        font-size: 36px;
+      }
+      .alternative{
+        font-size: 18px;
+        font-weight: 200;
+        color: grey;
+      }
+    }
+  }
+  .info{
+    span {
+      display: block;
+    }
+    .payment-proposal-to {
+      width: 100%;
+      display: inline-block;
+      padding: 5px 15px;
+      background-color: #f5f5f5;
+      margin-top: 10px;
+      i {
+        color: grey;
+        position: inherit;
+        left: 25px;
+        vertical-align: super;
+        padding-right: 10px;
+        border-right: 1px solid;
+        border-color: grey;
+        font-size: 20px;
+      }
+      contact {
+        margin-left: 15px;
+        margin-bottom: 3px;
+        margin-top: 5px;
+        font-size: 14px;
+        display: inline-block;
+      }
+    }
+  }
+  .accept-slide {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    background-color: #f5f5f5;
+  }
+}