From 702697a9dcb74e197949af65f0fdeb6dcd7de28d Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Wed, 12 Oct 2016 11:45:11 -0400
Subject: [PATCH] prelim send screen styling

---
 src/js/controllers/confirm.js            | 11 ++++
 src/js/routes.js                         |  2 +-
 src/sass/buttons.scss                    |  3 +-
 src/sass/views/confirm.scss              | 60 +++++++++----------
 src/sass/views/includes/txp-details.scss |  5 +-
 www/views/confirm.html                   | 74 +++++++++++++++++++++++-
 6 files changed, 119 insertions(+), 36 deletions(-)

diff --git a/src/js/controllers/confirm.js b/src/js/controllers/confirm.js
index d8dc250c0..7c1289967 100644
--- a/src/js/controllers/confirm.js
+++ b/src/js/controllers/confirm.js
@@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
     $scope.toAmount = parseInt($scope.toAmount);
     $scope.amountStr = txFormatService.formatAmountStr($scope.toAmount);
+    $scope.displayAmount = getDisplayAmount($scope.amountStr);
+    $scope.displayUnit = getDisplayUnit($scope.amountStr);
 
     var networkName = (new bitcore.Address($scope.toAddress)).network.name;
     $scope.network = networkName;
@@ -75,6 +77,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
         if (++index == wallets.length) {
           if (!lodash.isEmpty(filteredWallets)) {
             $scope.wallets = lodash.clone(filteredWallets);
+            setWallet($scope.wallets[0]);
           } else {
 
             if (!enoughFunds)
@@ -123,6 +126,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
+  function getDisplayAmount(amountStr) {
+    return amountStr.split(' ')[0];
+  }
+
+  function getDisplayUnit(amountStr) {
+    return amountStr.split(' ')[1];
+  }
+
   var setFromPayPro = function(uri, cb) {
     if (!cb) cb = function() {};
 
diff --git a/src/js/routes.js b/src/js/routes.js
index ed29cd0a0..d04fcfef1 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -986,7 +986,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           profileService.storeProfileIfDirty();
           $log.debug('Profile loaded ... Starting UX.');
           scannerService.gentleInitialize();
-          $state.go('tabs.home');
+          //$state.go('tabs.home');
         }
       });
     });
diff --git a/src/sass/buttons.scss b/src/sass/buttons.scss
index 5c0c05713..0978eb2bd 100644
--- a/src/sass/buttons.scss
+++ b/src/sass/buttons.scss
@@ -19,7 +19,8 @@ $button-secondary-border:          transparent;
 $button-secondary-active-bg:       darken($subtle-gray, 5%);
 $button-secondary-active-border:   transparent;
 
-%button-standard {
+%button-standard,
+click-to-accept {
   width: 85%;
   max-width: 300px;
   margin-left: auto;
diff --git a/src/sass/views/confirm.scss b/src/sass/views/confirm.scss
index 667184165..00f4f0f20 100644
--- a/src/sass/views/confirm.scss
+++ b/src/sass/views/confirm.scss
@@ -1,30 +1,30 @@
-#view-confirm {
-  .icon-bitpay-card {
-    background-image: url("../img/icon-bitpay.svg");
-  }
-  .slide-to-pay{
-    bottom: 149px;
-  }
-  .send-gravatar {
-    left: 11px;
-    position: absolute;
-    top: 10px;
-  }
-  .accept-slide {
-     position: fixed;
-     bottom: 0;
-     width: 100%;
-     height: 100px;
-     background-color: #647CE8;
-     color: #ffffff;
-     font-size: 25px;
-     text-align: center;
-     padding-top: 34px;
-     line-height: 32px;
-  }
-  .accept-slide i {
-    float: right;
-    font-size: 32px;
-    margin-right: 20px;
-  }
-}
+// #view-confirm {
+//   .icon-bitpay-card {
+//     background-image: url("../img/icon-bitpay.svg");
+//   }
+//   .slide-to-pay{
+//     bottom: 92px;
+//   }
+//   .send-gravatar {
+//     left: 11px;
+//     position: absolute;
+//     top: 10px;
+//   }
+//   .accept-slide {
+//      position: fixed;
+//      bottom: 0;
+//      width: 100%;
+//      height: 100px;
+//      background-color: #647CE8;
+//      color: #ffffff;
+//      font-size: 25px;
+//      text-align: center;
+//      padding-top: 34px;
+//      line-height: 32px;
+//   }
+//   .accept-slide i {
+//     float: right;
+//     font-size: 32px;
+//     margin-right: 20px;
+//   }
+// }
diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss
index 76f48336d..4cce40298 100644
--- a/src/sass/views/includes/txp-details.scss
+++ b/src/sass/views/includes/txp-details.scss
@@ -1,4 +1,5 @@
-#txp-details {
+#txp-details,
+#view-confirm {
   $item-lateral-padding: 20px;
   $item-vertical-padding: 10px;
   $item-border-color: #EFEFEF;
@@ -8,7 +9,7 @@
     background: #f5f5f5;
   }
   .slide-to-pay {
-    bottom: 100px;
+    bottom: 92px;
   }
   .head {
     padding: 30px $item-lateral-padding 4rem;
diff --git a/www/views/confirm.html b/www/views/confirm.html
index cb2a3063b..d772c9164 100644
--- a/www/views/confirm.html
+++ b/www/views/confirm.html
@@ -7,7 +7,77 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content ng-class="{'slide-to-pay': isCordova}">
+  <ion-content ng-class="{'slide-to-pay': !hasClick}">
+    <div class="list">
+      <div class="item head">
+        <div class="sending-label">
+          <img src="img/sending-icon.svg">
+          <span translate>Sending</span>
+        </div>
+        <div class="amount-label">
+          <div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
+          <div class="alternative">{{alternativeAmountStr}}</div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="item">
+          <span class="label" translate>To</span>
+          <span class="payment-proposal-to" copy-to-clipboard="toAddress">
+            <img src="img/icon-bitcoin-small.svg">
+            <contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
+            <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
+            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
+          </span>
+        </div>
+        <div class="item">
+          <span class="label" translate>From</span>
+          <div class="wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+            </i>
+            <div>{{wallet.name}}</div>
+          </div>
+        </div>
+        <div class="item single-line">
+          <span class="label" translate>{{'Memo'|translate}}</span>
+          <span class="item-note">
+            {{description}}
+          </span>
+        </div>
+        <div class="item single-line">
+          <span class="label" translate>Fee</span>
+          <span class="item-note">
+            {{fee}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </ion-content>
+  <slide-to-accept
+    ng-if="!hasClick && wallets[0]"
+    slide-on-confirm="onConfirm()"
+    slide-send-status="sendStatus">
+    Slide to pay
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="onSuccessConfirm()"
+    slide-success-hide-on-confirm="true"
+    >
+    <span ng-hide="wallet.m > 1">Payment Sent</span>
+    <span ng-show="wallet.m > 1">Proposal Created</span>
+  </slide-to-accept-success>
+</ion-view>
+<!-- <ion-view id="view-confirm">
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-title>
+      {{'Confirm'|translate}}
+    </ion-nav-title>
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+  </ion-nav-bar>
+
+  <ion-content ng-class="{'slide-to-pay': !hasClick}">
 
     <div class="list card">
       <div class="item item-text-wrap">
@@ -86,4 +156,4 @@
     <span ng-hide="wallet.m > 1">Payment Sent</span>
     <span ng-show="wallet.m > 1">Proposal Created</span>
   </slide-to-accept-success>
-</ion-view>
+</ion-view> -->