Merge pull request #2120 from bechi/tx-proposal-ui-01

Tx proposal ui 01

css/src/desktop.css

@@ -172,3 +172,12 @@ a.text-warning:hover {color: #FD7262;}
   background: #ddd;
 }
 
+.reveal-modal .close-reveal-modal:hover, dialog .close-reveal-modal:hover {
+  background-color: #7A8C9E;
+  color: #fff;
+}
+
+.last-transactions-content.active:hover {
+  background-color: #E4E8EC;
+}
+

css/src/main.css

@@ -339,7 +339,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 .main {
   margin-left: 250px;
   padding: 95px 1.5rem;
-  background-color: #F8F8FB;
+  background-color: #E8ECEF;
 }
 
 .logo-setup {
@@ -426,12 +426,15 @@ ul.tx-copayers {
   border-bottom: 1px solid #CAD2DA;
 }
 
-
 .last-transactions-content {
-  padding: 0.8rem;
+  padding: 0.8rem 0.5rem;
   cursor:pointer;
 }
 
+.last-transactions-content.active {
+  background-color: #F5F7F8;
+}
+
 .sign-action {
   background: #E4E8EC;
   width: 100%;
@@ -549,6 +552,7 @@ a.button-setup {
 .p70l {padding-left: 70px;}
 .p5h {padding: 0 5px;}
 .p20h {padding: 0 20px;}
+.p25l {padding-left: 25px;}
 .p15 {padding:15px;}
 .p20 {padding:20px;}
 .p10 {padding:10px;}
@@ -784,6 +788,24 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #1ABC9C;
 }
 
+.tx-proposal i { 
+  padding: .1rem .3rem;
+  background-color: #A5B2BF;
+  border-radius: 100%;
+  color: #fff;
+}
+
+.tx-proposal i.active {
+  background-color: #A02F23;
+}
+
+.header-modal {
+  background: #F3F5F6;
+  width: 100%;
+  padding: 0.8rem;
+  position: relative;
+}
+
 .addresses .label {
   font-weight: normal;
   padding: .2rem .3rem;
@@ -1589,14 +1611,13 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 }
 
 .reveal-modal .close-reveal-modal, dialog .close-reveal-modal {
-  padding: 5px 10px;
-  position: relative;
-  font-weight: normal;
-  border: 1px solid #bbb;
-  font-size: 22px;
-  background:#eee;
-  right:0;
-  top:0;
-  text-transform: uppercase;
+  padding: 0.8rem;
+  position: absolute;
+  background: #E4E8EC;
+  top: 10px;
+  right: 10px;
+  line-height: 0;
+  color: #7A8C9E;
+  border-radius: 3px;
 }
 

css/src/mobile.css

@@ -52,6 +52,10 @@
     padding: 1rem 0;
   }
 
+  .reveal-modal {
+    padding: 0.5rem;
+  } 
+
   header {
     height: 45px;
     line-height: 110%;

js/controllers/walletForPayment.js

@@ -29,7 +29,7 @@ angular.module('copayApp.controllers').controller('walletForPaymentController',
 
   var modalInstance = $modal.open({
     templateUrl: 'views/modals/walletSelection.html',
-    windowClass: 'tiny',
+    windowClass: 'small',
     controller: ModalInstanceCtrl,
   });
 

views/homeWallet.html

@@ -58,7 +58,7 @@
           <div class="last-transactions pr" ng-repeat="tx in  $root.wallet.pendingTxProposals  | orderBy:'-createdTs'" ng-include="'views/includes/transaction.html'" ng-if="$root.wallet.pendingTxProposals[0]">
           </div>
 
-          <div class="text-right size-12 line-t m10t p10t" ng-show="$root.wallet.balanceInfo.lockedBalance && !$root.wallet.balanceInfo.updatingBalance">
+          <div class="text-right size-12 line-t p10t" ng-show="$root.wallet.balanceInfo.lockedBalance && !$root.wallet.balanceInfo.updatingBalance">
           Total Locked Balance:
           <b>{{$root.wallet.balanceInfo.lockedBalance}} {{$root.wallet.settings.unitName}} </b> 
           <span class="text-gray"> {{$root.wallet.balanceInfo.lockedBalanceAlternative}} {{$root.wallet.balanceInfo.alternativeIsoCode}} </span>

views/includes/transaction.html

@@ -1,34 +1,30 @@
 
 
-<div class="last-transactions-content" ng-class="{'line-b':!$last}"  ng-click="openTxModal(tx)">
-  <div class="row" ng-repeat="out in tx.outs">
-    <div class="large-6 medium-6 small-12 columns size-16">
-      <div class="ellipsis m10b" ng-init="pendingForUs = !tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
-
-      <span ng-class="{'color-alert':pendingForUs, 'hidden':!pendingForUs} "> ● </span>
-
-      To:
-      <span ng-if="tx.merchant">
-        <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
-        <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+<div class="last-transactions-content" ng-class="{'line-b':!$last, 'active':pendingForUs}"  ng-click="openTxModal(tx)">
+  <div ng-repeat="out in tx.outs">
+    <div class="ellipsis p10b size-16 m20r" ng-init="pendingForUs = !tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
+      <span class="tx-proposal size-12 m5r"> <i ng-class="{'active':pendingForUs}" class="fi-arrow-right"></i> </span>
+      <span class="text-gray">
+        To:
+        <span ng-if="tx.merchant">
+          <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+          <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
         </span>
+        <contact address="{{out.address}}" ng-hide="tx.merchant"> </contact>
       </span>
-      <contact address="{{out.address}}" ng-hide="tx.merchant"> </contact>
-      </div>
     </div>
 
-    <div class="large-6 medium-6 small-12 columns">
-      <div class="text-right">
-        <span class="size-21">
-            <span ng-if="!$root.updatingBalance">
-              {{out.value}}
-            </span>
-            {{$root.wallet.settings.unitName}}
-        </span>
-        <span class="size-14 db m5t text-gray">
-          {{out.alternativeAmount}} {{out.alternativeIsoCode}}
-        </span>
+    <div class="p25l m10b" ng-class="{'text-gray':!pendingForUs}">
+      <div class="size-21 text-bold m10b">
+          <span ng-if="!$root.updatingBalance">
+            {{out.value}}
+          </span>
+          {{$root.wallet.settings.unitName}}
+          <i class="icon-arrow-right3 size-24 text-gray right"></i>
       </div>
+      <span class="alt-currency black size-12" ng-class="{'gray':!pendingForUs}">
+        {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+      </span>
     </div>
   </div>
 </div>

views/modals/address-book.html

@@ -1,6 +1,3 @@
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="close()">Close</a>
-</div>
 <div class="row m10t">
   <div class="large-12 columns"> 
     <h1 ng-show="!showForm">Address Book</h1>
@@ -89,4 +86,5 @@
   <div class="large-12 columns" ng-show="!showForm">
     <a class="button primary expand" ng-click="toggleForm()"><i class="fi-plus"></i> Add entry</a>
   </div>
+  <a class="close-reveal-modal" ng-click="close()"><i class="fi-x size-18"></i></a>
 </div>

views/modals/paypro.html

@@ -1,10 +1,3 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
-
-
-
 <div class="m20t text-center ">
   <div class="size-48">
   {{md.unitTotal}} {{$root.wallet.settings.unitName}}
@@ -12,6 +5,7 @@
   <div class="size-18 m5t text-gray">
     {{ alternative }} {{ alternativeIsoCode }}
   </div>
+  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>
 <div class="line-b m10v"></div>
 

views/modals/qr-address.html

@@ -1,6 +1,3 @@
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
 <div class="text-center m20t">
   <qrcode size="220" data="{{address.address}}"></qrcode>
 
@@ -12,4 +9,5 @@
       ({{label}})
     </b>
   </div>
+  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>

views/modals/tx-details.html

@@ -1,9 +1,3 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
-
-
 <div class="m20t text-center">
   <div class="size-48"  ng-class="{
         'text-primary' : btx.action == 'received',
@@ -15,6 +9,7 @@
   <div class="size-18 m5t text-gray" ng-show="btx.alternativeAmount">
     {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
   </div>
+  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>
 
 <div class="line-b m10t"></div>

views/modals/txp-details.html

@@ -1,64 +1,69 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
-
-<div ng-repeat="out in tx.outs">
-  <div class="m20t text-center ">
-    <div class="size-48">
-    {{out.value}} {{$root.wallet.settings.unitName}}
+<div class="header-modal">
+  <div ng-repeat="out in tx.outs">
+    <div class="ellipsis p10b size-16 m20r">
+      <span class="tx-proposal size-12 m5r"> <i ng-class="{'active':pendingForUs}" class="fi-arrow-right"></i> </span>
+      <span class="text-gray">
+        To:
+        <span ng-if="tx.merchant">
+          <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+          <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+        </span>
+        <contact address="{{out.address}}" ng-hide="tx.merchant"></contact>
+      </span>
     </div>
-    <div class="size-18 m5t text-gray">
-      {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+
+    <div class="p25l" ng-class="{'text-gray':!pendingForUs}">
+      <div class="size-21 text-bold m5b">
+        {{out.value}} {{$root.wallet.settings.unitName}}
+      </div>
+      <span class="alt-currency black size-12" ng-class="{'gray':!pendingForUs}">
+        {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+      </span>
     </div>
   </div>
-  <div class="line-b m10v"></div>
+  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+</div>
 
-  <div class="ellipsis m10v">
-    To:
-    <span ng-if="tx.merchant">
-    <span ng-show="tx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{tx.merchant.domain}}</span>
-    <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{tx.merchant.domain}}</span>
-    </span>
-    </span>
-    <contact address="{{out.address}}" ng-hide="tx.merchant"></contact>
+<div class="m10v line-b size-14" ng-show="tx.comment">
+  <div class="oh" ng-if="tx.ts || tx.createdTs ">
+    <p class="left m5b">{{$root.iden.getName()}}</p>
+    <div class="text-gray text-right m5t size-12">
+      <time>{{ (tx.ts || tx.createdTs ) | amTimeAgo}}</time>
+    </div>
+  </div>
+  <div class="text-gray m10b">
+    {{tx.comment}}
   </div>
 </div>
 
-<div ng-if="tx.ts || tx.createdTs " class="m10v">
-  <time>{{ (tx.ts || tx.createdTs ) | amCalendar}}</time>
-  <time class="text-gray">[ {{ (tx.ts || tx.createdTs ) | amTimeAgo}} ]</time>
-</div>
-
-<div class="m10v" ng-show="tx.comment">
-  <i>Note:</i> {{tx.comment}}
-</div>
-
-
-<div ng-if="tx.merchant" class="lh140">
-  <i>Merchant Message:</i>  <span class="text-gray">{{tx.merchant.pr.pd.memo}}</span>
-</div>
-<div ng-if="tx.merchant && tx.merchant.expirationDate" class="m10v">
-  <i>Expires</i>: {{tx.merchant.expirationDate | amTimeAgo }}
+<div class="m10v line-b size-14" ng-if="tx.merchant">
+  <div class="oh">
+    <p class="left m5b">Merchant Message:</p>
+    <div class="text-gray text-right m5t size-12" ng-if="tx.merchant && tx.merchant.expirationDate">
+      <span><i>Expires</i>: {{tx.merchant.expirationDate | amTimeAgo }}</span>
+    </div>
+  </div>
+  <div class="text-gray m10b">
+    {{tx.merchant.pr.pd.memo}}
+  </div>
 </div>
 
 <div ng-if="tx.actionList[0]" class="m10v">
   <i>Signatures:</i>
   <ul class="tx-copayers m10t" ng-if="tx.actionList[0]">
     <li ng-repeat="c in tx.actionList" ng-class="{'bottom-line-copayers':!$last}">
-      <span>
-          <i ng-if="c.actions.rejected" class="fi-x icon-sign x"></i>
-          <i ng-if="c.actions.sign" class="fi-check icon-sign check"></i>
-          <i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="m10r fi-loop icon-rotate"></i>
-        </span>
-      <span>
-          <i ng-if="c.actions.create" class="fi-crown icon-status icon-active m10r"></i>
-        </span>
-      <span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
+    <span>
+      <i ng-if="c.actions.rejected" class="fi-x icon-sign x"></i>
+      <i ng-if="c.actions.sign" class="fi-check icon-sign check"></i>
+      <i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="m10r fi-loop icon-rotate"></i>
+    </span>
+    <span>
+      <i ng-if="c.actions.create" class="fi-crown icon-status icon-active m10r"></i>
+    </span>
+    <span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
     </li>
   </ul>
 </div>
-</div>
 
 <div class="box-notification" ng-show="error">
   <div class="box-icon error">
@@ -70,11 +75,11 @@
   <a class="close-notification text-warning" ng-click="error=null">&#215;</a>
 </div>
 
-<div class="row collapse" 
+<div class="row" 
   ng-init="hideSign = false; hideReject = false"
   ng-show="!tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
   <div class="large-6 medium-6 small-6 columns">
-    <button class="button warning m0" ng-click="hideSign = true; reject(tx.ntxid);" 
+    <button class="button warning m0 expand" ng-click="hideSign = true; reject(tx.ntxid);" 
       ng-disabled="loading" ng-show="!hideReject">
       <i class="fi-x icon-sign x" ng-show="!loading"></i>  
       <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
@@ -82,7 +87,7 @@
     </button>
   </div>
   <div class="large-6 medium-6 small-6 columns text-right">
-    <button class="button primary m0" ng-click="hideReject = true; sign(tx.ntxid)" 
+    <button class="button primary m0 expand" ng-click="hideReject = true; sign(tx.ntxid)" 
       ng-disabled="loading" ng-show="!hideSign">
       <i class="fi-check icon-sign check" ng-show="!loading"></i>  
       <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
@@ -91,4 +96,3 @@
   </div>
 </div>
 
-

views/modals/wallet-info.html

@@ -1,8 +1,3 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="close()">Close</a>
-</div>
-
 <div class="text-center" ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()">
   <h1>{{item.name || item.id }}</h1>
   <h3>
@@ -58,5 +53,5 @@
       Copy this text as it is in a safe place (notepad or email)
     </div>
   </div>
-
+  <a class="close-reveal-modal" ng-click="close()"><i class="fi-x size-18"></i></a>
 </div>

views/modals/walletSelection.html

@@ -1,9 +1,3 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
-
-
 <div ng-init="setWallets()">
 
   <h1 class="line-b"> Select a wallet to make the payment</h1>
@@ -29,5 +23,5 @@
       </div>
     </li>
   </ul>
-
+  <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
 </div>