open input amount as modal

public/views/modals/inputAmount.html

@@ -1,26 +1,23 @@
-<ion-modal-view ng-controller="amountInputController" ng-init=init()>
-  <ion-content>
-    <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':index.backgroundColor}">
-      <div class="left-small">
-        <a class="p10" ng-click="close()"><span class="text-close" translate>Close</span></a>
-      </div>
-      <h1 class="title ellipsis" translate>Enter amount</h1>
-      <div class="right-small m5r" ng-click="toggleAlternative()">
-        <a class="postfix" ng-show="showAlternative">{{alternativeIsoCode}}</a>
-        <a class="postfix" ng-show="!showAlternative">{{unitName}}</a>
-      </div>
-    </ion-header-bar>
-
-    <div class="send-amount row" ng-style="{'background-color':index.backgroundColor}">
-      <div class="size-48" ng-show="!showAlternative">{{amount}}</div>
-      <div class="size-21 text-light" ng-show="!showAlternative">{{amountResult}} {{alternativeIsoCode}}</div>
-      <div class="size-48" ng-show="showAlternative">${{alternativeAmount}}</div>
-      <div class="size-21 text-light" ng-show="showAlternative">{{alternativeResult}} {{unitName}}</div>
+<ion-modal-view ng-controller="inputAmountController" ng-init=init()>
+  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
+    <div class="left-small">
+      <a ng-click="cancel()" class="p10">
+        <span class="text-close" translate>Close</span>
+      </a>
     </div>
+    <h1 class="title ellipsis" translate>Enter amount</h1>
+    <div class="right-small m5r" ng-click="toggleAlternative()">
+      <a class="postfix" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</a>
+      <a class="postfix" ng-show="!showAlternativeAmount">{{unitName}}</a>
+    </div>
+  </ion-header-bar>
 
-    <div class="button-content text-center df">
-      <button class="button expand button-balanced" ng-click="" translate>Request</button>
-      <button class="button expand button-balanced" ng-click="" translate>Send</button>
+  <div class="content" ng-style="{'background-color':'#E4E8EC'}">
+    <div class="send-amount row" ng-style="{'background-color':index.backgroundColor}">
+      <div class="size-48" ng-show="!showAlternativeAmount">{{amount}}</div>
+      <div class="size-21 text-light" ng-show="!showAlternativeAmount">{{amountResult}} {{alternativeIsoCode}}</div>
+      <div class="size-48" ng-show="showAlternativeAmount">${{alternativeAmount}}</div>
+      <div class="size-21 text-light" ng-show="showAlternativeAmount">{{alternativeResult}} {{unitName}}</div>
     </div>
 
     <div class="button-content text-center size-10 df">
@@ -52,5 +49,15 @@
         <button class="button expand button-light" ng-click="removeDigit()"><i class="icon ion-backspace-outline"></i></button>
       </div>
     </div>
-  </ion-content>
+
+    <div class="row p20t">
+      <div class="columns">
+        <button class="round expand m0"
+          ng-style="{'background-color':index.backgroundColor}"
+          ng-disabled="alternativeResult == 0 && amountResult == 0"
+          ng-click="save()"
+          translate>Save</button>
+      </div>
+    </div>
+  </div>
 </ion-modal-view>

public/views/walletHome.html

@@ -420,8 +420,8 @@
                     <span translate>Amount</span><span ng-show="showAlternative"> [{{home.alternativeIsoCode}}]</span>
                   </label>
                   <div class="input">
-                    <input type="number" ng-show="!showAlternative" id="amount" ng-disabled="home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{home.unitName}}" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)" ignore-mouse-wheel>
-                    <input type="number" ng-show="showAlternative" id="alternative" ng-disabled="!home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{ home.alternativeName }}" ng-model="_alternative" required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)" ignore-mouse-wheel>
+                    <input type="number" ng-show="!showAlternative" id="amount" ng-disabled="home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{home.unitName}}" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="openInputAmountModal()" ignore-mouse-wheel>
+                    <input type="number" ng-show="showAlternative" id="alternative" ng-disabled="!home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{ home.alternativeName }}" ng-model="_alternative" required autocomplete="off" ng-focus="openInputAmountModal()" ignore-mouse-wheel>
                     <a class="postfix button" ng-show="!showAlternative" ng-style="{'background-color':index.backgroundColor}" ng-click="showAlternative = !showAlternative">{{home.unitName}}</a>
                     <a class="postfix button black" ng-show="showAlternative" ng-click="showAlternative = !showAlternative">{{home.alternativeIsoCode}}</a>
                   </div>

src/js/controllers/modals/inputAmount.js

@@ -1,9 +1,10 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('amountInputController', function($scope, lodash, configService, go, rateService) {
+angular.module('copayApp.controllers').controller('inputAmountController', function($scope, lodash, configService, go, rateService) {
   var unitToSatoshi;
   var satToUnit;
   var unitDecimals;
+  var self = $scope.self;
 
   $scope.init = function() {
     var config = configService.getSync().wallet.settings;
@@ -12,15 +13,15 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
     unitToSatoshi = config.unitToSatoshi;
     satToUnit = 1 / unitToSatoshi;
     unitDecimals = config.unitDecimals;
-    $scope.showAlternative = false;
+    console.log($scope.showAlternativeAmount);
     resetAmount();
   };
 
   $scope.toggleAlternative = function() {
-    $scope.showAlternative = !$scope.showAlternative;
+    $scope.showAlternativeAmount = !$scope.showAlternativeAmount;
     var amount;
 
-    if ($scope.showAlternative) {
+    if ($scope.showAlternativeAmount) {
       $scope.alternativeAmount = $scope.amountResult;
       amount = processFormat($scope.amount);
       $scope.alternativeResult = isOperator(lodash.last(amount)) ? evaluate(amount.slice(0, -1)) : evaluate(amount);
@@ -32,7 +33,7 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
   };
 
   $scope.pushDigit = function(digit) {
-    var amount = $scope.showAlternative ? $scope.alternativeAmount : $scope.amount;
+    var amount = $scope.showAlternativeAmount ? $scope.alternativeAmount : $scope.amount;
 
     if (amount.toString().length >= 10) return;
     if (amount == 0 && digit == 0) return;
@@ -42,7 +43,7 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
   };
 
   $scope.pushOperator = function(operator) {
-    if ($scope.showAlternative) {
+    if ($scope.showAlternativeAmount) {
       if (!$scope.alternativeAmount || $scope.alternativeAmount.length == 0) return;
       $scope.alternativeAmount = _pushOperator($scope.alternativeAmount);
     } else {
@@ -67,16 +68,16 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
   };
 
   $scope.removeDigit = function() {
-    var amount = $scope.showAlternative ? $scope.alternativeAmount : $scope.amount;
+    var amount = $scope.showAlternativeAmount ? $scope.alternativeAmount : $scope.amount;
 
     if (amount && amount.toString().length == 0) {
       resetAmount();
       return;
     }
 
-    amount = amount.slice(0, -1);
+    amount = amount.toString().slice(0, -1);
 
-    if ($scope.showAlternative)
+    if ($scope.showAlternativeAmount)
       $scope.alternativeAmount = amount;
     else
       $scope.amount = amount;
@@ -94,7 +95,7 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
       return;
     }
 
-    if ($scope.showAlternative) {
+    if ($scope.showAlternativeAmount) {
       if ($scope.alternativeAmount == 0 && val == '.') {
         $scope.alternativeAmount += val;
       }
@@ -128,7 +129,22 @@ angular.module('copayApp.controllers').controller('amountInputController', funct
     return val.toString().replace('x', '*');
   };
 
-  $scope.close = function() {
-    go.walletHome();
+  $scope.save = function() {
+    if ($scope.showAlternativeAmount) {
+      if ($scope.alternativeResult == 0) return;
+
+      self.showAlternativeAmount = true;
+      self.setForm(null, $scope.alternativeResult, null);
+    } else {
+      if ($scope.amountResult == 0) return;
+
+      self.showAlternativeAmount = false;
+      self.setForm(null, $scope.amountResult, null);
+    }
+    $scope.cancel();
+  };
+
+  $scope.cancel = function() {
+    $scope.inputAmountModal.hide();
   };
 });

src/js/controllers/walletHome.js

@@ -544,6 +544,20 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     });
   };
 
+  $scope.openInputAmountModal = function() {
+    var fc = profileService.focusedClient;
+    $scope.color = fc.backgroundColor;
+    $scope.showAlternativeAmount = $scope.showAlternative || null;
+    $scope.self = self;
+
+    $ionicModal.fromTemplateUrl('views/modals/inputAmount.html', {
+      scope: $scope
+    }).then(function(modal) {
+      $scope.inputAmountModal = modal;
+      $scope.inputAmountModal.show();
+    });
+  };
+
   this.setForm = function(to, amount, comment) {
     var form = $scope.sendForm;
     if (to) {