Merge pull request #426 from msalcala11/sendStyling

Send view styling and wallet switcher

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;
@@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
         if (err || !status) {
           $log.error(err);
         } else {
+          w.status = status;
           if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
           if (status.availableBalanceSat > $scope.toAmount) {
             filteredWallets.push(w);
@@ -75,6 +78,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)
@@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     setWallet(wallet, true);
   });
 
+  $scope.showWalletSelector = function() {
+    $scope.showWallets = true;
+  };
+
+  $scope.onWalletSelect = function(wallet) {
+    setWallet(wallet);
+  };
+
 
   $scope.showDescriptionPopup = function() {
     var message = gettextCatalog.getString('Add description');
@@ -123,6 +135,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() {};
 

src/js/directives/actionSheet.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('actionSheet', function() {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/actionSheet.html',
+      transclude: true,
+      scope: {
+        show: '=actionSheetShow',
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+      }
+    };
+  });

src/js/directives/walletSelector.js

@@ -0,0 +1,27 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('walletSelector', function($timeout) {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/walletSelector.html',
+      transclude: true,
+      scope: {
+        show: '=walletSelectorShow',
+        wallets: '=walletSelectorWallets',
+        selectedWallet: '=walletSelectorSelectedWallet',
+        onSelect: '=walletSelectorOnSelect'
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+        scope.selectWallet = function(wallet) {
+          $timeout(function() {
+            scope.hide();
+          }, 100);
+          scope.onSelect(wallet);
+        };
+      }
+    };
+  });

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;

src/sass/views/confirm.scss

@@ -1,30 +1,3 @@
 #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;
-  }
+
 }

src/sass/views/includes/actionSheet.scss

@@ -0,0 +1,58 @@
+action-sheet {
+  .bp-action-sheet {
+    $border-color: #EFEFEF;
+
+    &__sheet {
+      background: #fff;
+      width: calc(100% + 1px);
+      position: fixed;
+      bottom: 0;
+      left: 50%;
+      transform: translateY(100%) translateX(-50%);
+      transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
+      z-index: 100;
+      padding-top: 1.75rem;
+      padding-left: 2rem;
+      padding-right: .75rem;
+      color: #2f2f2f;
+      padding-bottom: 3.5rem;
+      max-width: 550px;
+      max-height: 100vh;
+      overflow: scroll;
+
+      &.slide-up {
+        transform: translateY(0) translateX(-50%);
+        box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
+      }
+
+      .back-arrow {
+        padding-bottom: 1.25rem;
+        cursor: pointer;
+      }
+
+      .header {
+        font-weight: 600;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid $border-color;
+        margin-bottom: 1px;
+      }
+    }
+
+    &__backdrop {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0);
+      transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
+      pointer-events: none;
+      z-index: 99;
+
+      &.fade-in {
+        background: rgba(0, 0, 0, .4);
+        pointer-events: all;
+      }
+    }
+  }
+}

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;
@@ -48,9 +49,19 @@
     span {
       display: block;
     }
+    .badge {
+      border-radius: 0;
+      padding: .5rem;
+    }
     .item {
       color: #4A4A4A;
-      padding: $item-vertical-padding $item-lateral-padding;
+      padding-top: $item-vertical-padding;
+      padding-bottom: $item-vertical-padding;
+      padding-left: $item-lateral-padding;
+
+      &:not(.item-icon-right) {
+        padding-right: $item-lateral-padding;
+      }
 
       .label {
         font-size: 14px;
@@ -61,7 +72,8 @@
       &.single-line {
         display: flex;
         align-items: center;
-        padding: 17px $item-lateral-padding;
+        padding-top: 17px;
+        padding-bottom: 17px;
 
         .label {
           margin: 0;
@@ -112,15 +124,23 @@
       display: flex;
       align-items: center;
       padding: .2rem 0;
-      i {
-        padding: 0;
+      margin-bottom: 5px;
+
+      ~ .bp-arrow-right {
+        top: 14px;
       }
-      img {
-        height: 24px;
-        width: 24px;
-        padding: 2px;
-        margin-right: .7rem;
-        box-shadow: none;
+
+      > i {
+        padding: 0;
+        position: static;
+
+        > img {
+          height: 24px;
+          width: 24px;
+          padding: 2px;
+          margin-right: .7rem;
+          box-shadow: none;
+        }
       }
     }
 

src/sass/views/includes/walletSelector.scss

@@ -0,0 +1,62 @@
+wallet-selector {
+  
+  $border-color: #EFEFEF;
+
+  .wallet-selector {
+    .wallet {
+      border: 0;
+      padding-right: 0;
+      padding-top: 0;
+      padding-left: 65px;
+      padding-bottom: 0;
+      margin-bottom: 1px;
+      overflow: visible;
+
+      > i {
+        padding: 0;
+        margin-left: -5px;
+
+        > img {
+          height: 39px;
+          width: 39px;
+          padding: 4px;
+        }
+      }
+    }
+    .wallet-inner {
+      display: flex;
+      position: relative;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      &::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: $border-color;
+        bottom: 0;
+        right: 0;
+        content: '';
+      }
+
+      .check {
+        padding: 0 1.2rem;
+      }
+    }
+    .wallet-details {
+      flex-grow: 1;
+
+      .wallet-name {
+        padding-bottom: 5px;
+      }
+
+      .wallet-balance {
+        color: #3A3A3A;
+        font-family: "Roboto-Light";
+      }
+
+    }
+  }
+
+}

src/sass/views/views.scss

@@ -16,6 +16,7 @@
 @import "wallet-backup-phrase";
 @import "zero-state";
 @import "onboarding/onboarding";
+@import "includes/actionSheet";
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
@@ -25,4 +26,5 @@
 @import "includes/tx-details";
 @import "includes/txp-details";
 @import "includes/tx-status";
+@import "includes/walletSelector";
 @import "integrations/coinbase.scss";