From 9234a575ec690fb6c381dddd4987139217a3802a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Baz=C3=A1n?= <gabrielbazan7@hotmail.com>
Date: Tue, 27 Dec 2016 16:16:55 -0300
Subject: [PATCH] improve design on payment protocol view

---
 src/js/controllers/confirm.js            |  5 ++
 src/js/controllers/modals/paypro.js      |  9 ---
 src/sass/views/includes/txp-details.scss |  5 ++
 www/views/modals/paypro.html             | 91 +++++++++++++-----------
 4 files changed, 58 insertions(+), 52 deletions(-)
 delete mode 100644 src/js/controllers/modals/paypro.js

diff --git a/src/js/controllers/confirm.js b/src/js/controllers/confirm.js
index 888406ce1..ee5bcac6b 100644
--- a/src/js/controllers/confirm.js
+++ b/src/js/controllers/confirm.js
@@ -37,6 +37,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.toEmail = data.stateParams.toEmail;
     $scope.description = data.stateParams.description;
     $scope.paypro = data.stateParams.paypro;
+    console.log($scope.paypro);
     $scope.insufficientFunds = false;
     $scope.noMatchingWallet = false;
     $scope.paymentExpired = {
@@ -433,6 +434,10 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
+  $scope.cancel = function() {
+    $scope.payproModal.hide();
+  };
+
   $scope.approve = function(onSendStatusChange) {
 
     var wallet = $scope.wallet;
diff --git a/src/js/controllers/modals/paypro.js b/src/js/controllers/modals/paypro.js
deleted file mode 100644
index 752a6e55e..000000000
--- a/src/js/controllers/modals/paypro.js
+++ /dev/null
@@ -1,9 +0,0 @@
-'use strict';
-
-angular.module('copayApp.controllers').controller('payproController', function($scope) {
-  var self = $scope.self;
-
-  $scope.cancel = function() {
-    $scope.payproModal.hide();
-  };
-});
diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss
index 5d1d0f9ea..d3b876243 100644
--- a/src/sass/views/includes/txp-details.scss
+++ b/src/sass/views/includes/txp-details.scss
@@ -86,6 +86,11 @@
           flex-grow: 1;
         }
       }
+      &.double-line {
+        .item-note {
+          width: 100%;
+        }
+      }
     }
     .item-divider {
       padding-top: 1.2rem;
diff --git a/www/views/modals/paypro.html b/www/views/modals/paypro.html
index f643f63bd..78dd4380a 100644
--- a/www/views/modals/paypro.html
+++ b/www/views/modals/paypro.html
@@ -1,56 +1,61 @@
-<ion-modal-view ng-controller="payproController">
-  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color, 'border-color': color}">
-    <button class="button button-clear" ng-click="cancel()">
+<ion-modal-view id="view-confirm">
+  <ion-header-bar align-title="center" class="bar-royal">
+    <button class="button button-back button-clear" ng-click="cancel()">
       {{'Close' | translate}}
     </button>
-    <div class="title" translate>
-      Payment request
-    </div>
+    <h1 class="title" translate>Payment request</h1>
   </ion-header-bar>
-
   <ion-content>
-    <div class="header-modal text-center size-42">
-      {{amountStr}}
-    </div>
-
     <div class="list">
-      <div class="item item-divider" translate>
-        Details
+      <div class="item head">
+        <div class="amount-label">
+          <div class="amount">{{displayAmount || '...'}} <span class="unit">{{displayUnit}}</span></div>
+          <div class="alternative">{{alternativeAmountStr || '...'}}</div>
+        </div>
       </div>
-      <div class="item">
-        {{'Pay To'|translate}}
-        <span class="item-note">{{paypro.domain}}</span>
-      </div>
-      <div class="item" ng-if="paypro.toAddress">
-        {{'Address'|translate}}
-        <span class="item-note">{{paypro.toAddress}}</span>
-      </div>
-      <div class="item">
-        {{'Certified by'|translate}}
-        <span class="item-note">
-          <span ng-show="paypro.caTrusted">
-            <i class="ion-locked" style="color:green"></i>
-            {{paypro.caName}}<br>
-            <span translate>(Trusted)</span>
+      <div class="info">
+        <div class="item single-line" ng-if="paypro.domain">
+          <span class="label">{{'Pay To'|translate}}</span>
+          <span class="item-note">
+            {{paypro.domain}}
           </span>
-          <span ng-show="!paypro.caTrusted">
-            <span ng-show="paypro.selfSigned">
-              <i class="ion-unlocked" style="color:red"></i> <span translate>Self-signed Certificate</span>
+        </div>
+        <div class="item single-line" ng-if="paypro.toAddress">
+          <span class="label">{{'Address'|translate}}</span>
+          <span class="item-note m10l ellipsis">
+            {{paypro.toAddress}}
+          </span>
+        </div>
+        <div class="item">
+          <span class="label">{{'Certified by'|translate}}</span>
+          <span class="item-note w100p">
+            <span ng-show="paypro.caTrusted">
+              <i class="ion-locked" style="color:green"></i>
+              {{paypro.caName}} {{'(Trusted)' | translate}}</span>
             </span>
-            <span ng-show="!paypro.selfSigned">
-              <i class="ion-locked" style="color:yellow"></i>{{paypro.caName}}<br>
-              <span translate>WARNING: UNTRUSTED CERTIFICATE</span>
+            <span ng-show="!paypro.caTrusted">
+              <span ng-show="paypro.selfSigned">
+                <i class="ion-unlocked" style="color:red"></i> <span translate>Self-signed Certificate</span>
+              </span>
+              <span ng-show="!paypro.selfSigned">
+                <i class="ion-locked" style="color:yellow"></i>{{paypro.caName}}<br>
+                <span translate>WARNING: UNTRUSTED CERTIFICATE</span>
+              </span>
             </span>
           </span>
-        </span>
-      </div>
-      <div class="item" ng-if="paypro.memo">
-        {{'Memo'|translate}}
-        <span class="item-note wrapword">{{paypro.memo}}</span>
-      </div>
-      <div class="item" ng-if="paypro.expires">
-        {{'Expires'|translate}}
-        <span class="item-note">{{paypro.expires * 1000 | amTimeAgo }}</span>
+        </div>
+        <div class="item" ng-if="paypro.memo">
+          <span class="label">{{'Memo'|translate}}</span>
+          <span class="item-note w100p">
+            {{paypro.memo}}
+          </span>
+        </div>
+        <div class="item single-line" ng-if="paypro.expires">
+          <span class="label">{{'Expires'|translate}}</span>
+          <span class="item-note">
+            {{paypro.expires * 1000 | amTimeAgo }}
+          </span>
+        </div>
       </div>
     </div>
   </ion-content>