Merge pull request #426 from msalcala11/sendStyling

Send view styling and wallet switcher

www/views/confirm.html

@@ -7,62 +7,55 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content ng-class="{'slide-to-pay': isCordova}">
-
-    <div class="list card">
-      <div class="item item-text-wrap">
-        <i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
-        <div class="text-bold size-28 m15t">{{amountStr}} </div>
-        <div class="text-light size-20 m5t">{{alternativeAmountStr}} </div>
-      </div>
-    </div>
-
-    <div class="list card">
-      <div class="item">Fee: {{feeLevel}}
-        <span class="item-note">
-          {{fee || '...'}}
-        </span>
-      </div>
-
-      <div class="item item-icon-left">
-        <i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
-        <div ng-if="!isWallet">
-          <gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
-          <i ng-if="isCard" class="icon big-icon-svg">
-            <div class="bg icon-bitpay-card"></div>
-          </i>
+  <ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
+    <div class="list">
+      <div class="item head">
+        <div class="sending-label">
+          <img src="img/sending-icon.svg">
+          <span translate>Sending</span>
         </div>
-        <div ng-class="{'m10l':isCard}">
-          <span translate>To</span>: {{toAddress}}
-          <p ng-show="toName">{{toName}}</p>
-
-          <div ng-show="_paypro" ng-click="openPPModal(_paypro)">
-              <i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
-              <i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
-                {{_paypro.domain}}
+        <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="text-center" ng-show="insuffientFunds">
+          <span class="badge badge-energized" translate>Insufficient funds</span>
+        </div>
+        <a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
+          <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>
-    </div>
-
-    <div class="text-center" ng-show="noMatchingWallet">
-      <span class="badge badge-assertive" translate>No appropiate wallet to make this payment</span>
-    </div>
-
-
-
-    <div class="text-center" ng-show="insuffientFunds">
-      <span class="badge badge-assertive" translate>Insufficient funds</span>
-    </div>
-
-    <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
-
-    <div ng-show="wallets[0]" class="list card">
-      <div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
-        <i class="icon ion-ios-chatbubble-outline size-21"></i>
-        <span ng-show="!description" translate>Add description</span>
-        <span ng-show="description">{{description}}</span>
-        <i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
+          <i class="icon bp-arrow-right"></i>
+        </a>
+        <a class="item single-line item-icon-right" ng-hide="insuffientFunds">
+          <span class="label" translate>{{'Add Memo'|translate}}</span>
+          <span class="item-note">
+            {{description}}
+          </span>
+          <i class="icon bp-arrow-right"></i>
+        </a>
+        <a class="item single-line item-icon-right" ng-hide="insuffientFunds">
+          <span class="label" translate>Fee</span>
+          <span class="item-note">
+            {{fee}}
+          </span>
+          <i class="icon bp-arrow-right"></i>
+        </a>
       </div>
     </div>
     <click-to-accept
@@ -86,4 +79,13 @@
     <span ng-hide="wallet.m > 1">Payment Sent</span>
     <span ng-show="wallet.m > 1">Proposal Created</span>
   </slide-to-accept-success>
+
+  <wallet-selector
+    wallet-selector-wallets="wallets"
+    wallet-selector-selected-wallet="wallet"
+    wallet-selector-show="showWallets"
+    wallet-selector-on-select="onWalletSelect"
+  >
+  </wallet-selector>
+
 </ion-view>

www/views/includes/actionSheet.html

@@ -0,0 +1,10 @@
+<div
+  class="bp-action-sheet__backdrop"
+  ng-class="{'fade-in': show}"
+  ng-click="hide()">
+</div>
+<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
+  <img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
+  <div class="header">Send from</div>
+  <ng-transclude></ng-transclude>
+</div>

www/views/includes/walletSelector.html

@@ -0,0 +1,30 @@
+<action-sheet action-sheet-show="show" class="wallet-selector">
+  <a
+    ng-repeat="w in wallets track by $index"
+    class="item item-icon-left item-big-icon-left item-icon-right wallet"
+    ng-click="selectWallet(w)"
+  >
+      <i class="icon big-icon-svg">
+        <img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
+      </i>
+      <div class="wallet-inner">
+        <div class="wallet-details">
+          <div class="wallet-name">
+            {{w.name}}
+          </div>
+          <p class="wallet-balance">
+            <span ng-if="!w.isComplete()" class="assertive" translate>
+              Incomplete
+            </span>
+            <span ng-if="w.isComplete()">
+              <span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
+              <span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
+            </span>
+          </span>
+          &nbsp;
+          </p>
+        </div>
+        <img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
+      </div>
+    </a>
+</action-sheet>