From 8ddfffd56b4dca5458545e5421cb467cdeb45be4 Mon Sep 17 00:00:00 2001
From: Sebastiaan Pasma <sebastiaan@enkodo.nl>
Date: Thu, 19 Jul 2018 15:21:27 +0200
Subject: [PATCH] amount on custom amount screen

---
 src/js/controllers/customAmount.js | 10 ++++++-
 src/sass/views/custom-amount.scss  | 43 +++++++++++++++++++++++-------
 www/views/customAmount.html        | 34 ++++++++++++++++++-----
 3 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/js/controllers/customAmount.js b/src/js/controllers/customAmount.js
index f6b96c22c..86bfa250f 100644
--- a/src/js/controllers/customAmount.js
+++ b/src/js/controllers/customAmount.js
@@ -64,6 +64,14 @@ angular.module('copayApp.controllers').controller('customAmountController', func
       var currency = parsedAmount.currency;
       $scope.amountUnitStr = parsedAmount.amountUnitStr;
 
+      configService.whenAvailable(function (config) {
+        $scope.selectedPriceDisplay = config.wallet.settings.priceDisplay;
+
+        $timeout(function () {
+          $scope.$apply();
+        });
+      });
+
       if (currency != 'BTC' && currency != 'BCH') {
         // Convert to BTC or BCH
         var config = configService.getSync().wallet.settings;
@@ -71,7 +79,7 @@ angular.module('copayApp.controllers').controller('customAmountController', func
         var btcParsedAmount = txFormatService.parseAmount($scope.wallet.coin, amountUnit, $scope.wallet.coin);
 
         $scope.amountBtc = btcParsedAmount.amount;
-        $scope.altAmountStr = btcParsedAmount.amountUnitStr;
+        $scope.altAmountStr = btcParsedAmount.amountUnitStr.toUpperCase();
       } else {
         $scope.amountBtc = amount; // BTC or BCH
         $scope.altAmountStr = txFormatService.formatAlternativeStr($scope.wallet.coin, parsedAmount.amountSat);
diff --git a/src/sass/views/custom-amount.scss b/src/sass/views/custom-amount.scss
index b9bf65459..17973101d 100644
--- a/src/sass/views/custom-amount.scss
+++ b/src/sass/views/custom-amount.scss
@@ -26,16 +26,10 @@
     height: 100%;
     .qr-code {
       text-align: center;
-      margin-top: 24vh;
-      margin-bottom: 7vh;
-      @media(max-height: 800px) {
-        margin-top: 18vh;
-      }
-      @media(max-height: 700px) {
-        margin-top: 14vh;
-      }
-      @media(max-height: 600px) {
-        margin-top: 8vh;
+      margin-top: 6px;
+      qrcode canvas {
+        height: 30vh;
+        max-height: 220px;
       }
     }
     .info {
@@ -91,5 +85,34 @@
     .address-types {
       text-align: center;
     }
+
+    .amount {
+      margin-top: 20vh;
+      margin-bottom: 4vh;
+      @media(max-height: 800px) {
+        margin-top: 12vh;
+        margin-bottom: 6vh;
+      }
+      @media(max-height: 700px) {
+        margin-top: 10vh;
+        margin-bottom: 4vh;
+      }
+      @media(max-height: 600px) {
+        margin-top: 6vh;
+        margin-bottom: 2vh;
+
+      }
+      width: 100%;
+      text-align: center;
+      //padding-top: 30px;
+      display: block;
+      align-items: center;
+      justify-content: center;
+
+      &-alternative {
+        line-height: 36px;
+      }
+    }
+
   }
 }
diff --git a/www/views/customAmount.html b/www/views/customAmount.html
index a4f2d57c9..73f107d82 100644
--- a/www/views/customAmount.html
+++ b/www/views/customAmount.html
@@ -11,7 +11,7 @@
     <ion-nav-buttons side="secondary">
       <button class="button-share ng-hide" ng-show="showShareButton" ng-click="shareAddress()">
         <i class="icon"
-          ng-class="{
+           ng-class="{
           'ion-ios-upload-outline': showShareButton == 'iOS',
           'ion-android-share-alt': showShareButton != 'iOS'
           }"></i>
@@ -22,36 +22,56 @@
     <div class="address" ng-if="address && amountBtc">
       <div ng-show="showingPaymentReceived" ng-click="showingPaymentReceived = false">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
-          <circle class="path circle" fill="none" stroke="#19B234" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
-          <polyline class="path check" fill="none" stroke="#19B234" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
+          <circle class="path circle" fill="none" stroke="#19B234" stroke-width="6" stroke-miterlimit="10" cx="65.1"
+                  cy="65.1" r="62.1"/>
+          <polyline class="path check" fill="none" stroke="#19B234" stroke-width="6" stroke-linecap="round"
+                    stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
         </svg>
         <p class="success animated fadeIn" style="text-align: center">
           <br/>Payment Received!<br/>
           <br/>Return To Address<br/>
         </p>
       </div>
+      <div ng-show="!showingPaymentReceived" class="amount">
+        <div ng-show="selectedPriceDisplay=='fiat'">
+          <strong class="size-36">{{amountUnitStr}}</strong>
+          <div class="size-14 amount-alternative">
+            {{altAmountStr}}
+          </div>
+        </div>
+        <div ng-show="selectedPriceDisplay=='crypto'">
+          <strong class="size-36">{{altAmountStr}}</strong>
+          <div class="size-14 amount-alternative">
+            {{amountUnitStr}}
+          </div>
+        </div>
+      </div>
       <div ng-show="!showingPaymentReceived" class="qr-code" copy-to-clipboard="copyToClipboard()">
         <qrcode size="220" data="{{ protocolHandler }}:{{address + '?amount=' + amountBtc}}" color="#334"></qrcode>
       </div>
       <div ng-show="!showingPaymentReceived" ng-show="address && coin == 'bch'" class="address-types">
         <div>
-          <button ng-show="address && coin == 'bch' && bchAddressType != 'cashaddr'" class="button-address" ng-click="displayAddress('cashaddr')">
+          <button ng-show="address && coin == 'bch' && bchAddressType != 'cashaddr'" class="button-address"
+                  ng-click="displayAddress('cashaddr')">
             <span translate>Display new style address</span>
           </button>
         </div>
         <div>
-          <button ng-show="address && coin == 'bch' && bchAddressType != 'legacy'" class="button-address" ng-click="displayAddress('legacy')">
+          <button ng-show="address && coin == 'bch' && bchAddressType != 'legacy'" class="button-address"
+                  ng-click="displayAddress('legacy')">
             <span translate>Display legacy address</span>
           </button>
         </div>
         <div>
-          <button ng-show="address && coin == 'bch' && bchAddressType != 'bitpay'" class="button-address" ng-click="displayAddress('bitpay')">
+          <button ng-show="address && coin == 'bch' && bchAddressType != 'bitpay'" class="button-address"
+                  ng-click="displayAddress('bitpay')">
             <span translate>Display BitPay address</span>
           </button>
         </div>
       </div>
       <div class="info">
-        <div class="item single-line" copy-to-clipboard="(coin == 'bch' && bchAddressType == 'cashaddr' ? 'bitcoincash:' : '') + address">
+        <div class="item single-line"
+             copy-to-clipboard="(coin == 'bch' && bchAddressType == 'cashaddr' ? 'bitcoincash:' : '') + address">
           <span class="label" translate>Address</span>
           <span class="item-note ellipsis">
             {{address}}