@cmgustavos awesome design ideas

css/src/main.css

@@ -109,6 +109,11 @@ header .alt-currency {
   color: yellow !important;
 }
 
+
+.color-alert {
+  color: #C0392A;
+}
+
 .alt-currency.green {
   background: #1abc9c;
 }
@@ -577,6 +582,7 @@ a.button-setup {
 .m20r {margin-right: 20px;}
 .m15r {margin-right: 15px;}
 .m20t {margin-top: 20px;}
+.m20tp {margin-top: 20%;}
 .m5 {margin: 5px;}
 .m10 {margin: 10px;}
 .m15 {margin: 15px;}
@@ -599,6 +605,7 @@ a.button-setup {
 .m-negative-l {margin-left: -0.9375rem;}
 .br100 {border-radius: 100%;}
 .lh {line-height: 0;}
+.lh140 {line-height: 140%;}
 .oh {overflow:hidden;}
 .vm {vertical-align: middle;}
 .ma { margin: 0 auto;}
@@ -1496,6 +1503,10 @@ a.text-warning:hover {color: #FD7262;}
 }
 
 @media only screen and (max-width: 40em) {
+  dialog.tiny, .reveal-modal.tiny {
+    height: 100%;
+    overflow-y: auto;
+  }
   dialog.large, .reveal-modal.large {
     height: 100%;
     overflow-y: auto;
@@ -1821,3 +1832,19 @@ a.text-warning:hover {color: #FD7262;}
   font-weight: normal;
 }
 
+.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;
+}
+
+.reveal-modal .close-reveal-modal:hover, dialog .close-reveal-modal:hover {
+  background:#ddd;
+}
+

js/controllers/homeWallet.js

@@ -48,14 +48,18 @@ angular.module('copayApp.controllers').controller('HomeWalletController', functi
   };
 
 
+  var $outScope = $scope;
   $scope.openTxModal = function(tx) {
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.tx = tx;
-      $scope.getShortNetworkName = function() {
-        var w = $rootScope.wallet;
-        return w.getNetworkName().substring(0, 4);
+      $scope.sign = function(ntxid) {
+        $outScope.sign(ntxid);
+        $modalInstance.dismiss('cancel');
+      };
+      $scope.reject = function(ntxid) {
+        $outScope.reject(ntxid);
+        $modalInstance.dismiss('cancel');
       };
-
       $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
       };

views/homeWallet.html

@@ -32,6 +32,8 @@
             </div>
           </div>
         </div>
+
+
         <div class="row ">
           <div class="large-12 columns line-t m10t">
             <div class="right size-12">
@@ -53,8 +55,16 @@
       <div class="large-12 columns">
         <div class="panel oh">
           <h2 class="line-b" translate>Spend proposals</h2>
-          <div class="last-transactions pr" ng-repeat="tx in  $root.wallet.pendingTxProposals | paged" ng-include="'views/includes/transaction.html'" ng-if="$root.wallet.pendingTxProposals[0]">
+          <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">
+          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>
+          </div>
+
+
           <div class="pr" ng-if="!$root.wallet.pendingTxProposals[0]">
               <p> No pending spend proposals at the moment.
           </div>

views/includes/sidebar.html

@@ -36,18 +36,13 @@
   </header>
   <div class="locked" ng-show="$root.wallet.balanceInfo.lockedBalance && !walletSelection">
     <span class="text-gray">
-      <i class="fi-lock"></i> {{'Locked'|translate}} &nbsp;
+       {{'Locked'|translate}} &nbsp;
     </span>
     <span ng-if="$root.wallet.balanceInfo.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
     <span ng-if="$root.wallet && !$root.wallet.balanceInfo.updatingBalance" class="text-gray">
       <b>{{$root.wallet.balanceInfo.lockedBalance}} {{$root.wallet.settings.unitName}} </b> 
       - {{$root.wallet.balanceInfo.lockedBalanceAlternative}} {{$root.wallet.balanceInfo.alternativeIsoCode}}
     </span>
-    <i class="fi-info medium right text-gray size-14" 
-      tooltip="{{'Balance locked in pending transaction proposals'|translate}}"
-      tooltip-placement="left"
-      data-options="disable_for_touch:true"
-      tooltip-popup-delay='500'></i>
 
   </div>
 

views/includes/transaction.html

@@ -3,11 +3,14 @@
 <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">
+      <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 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 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>
       </span>
       <contact address="{{out.address}}" ng-hide="tx.merchant"> </contact>

views/modals/paypro.html

@@ -1,30 +1,39 @@
-<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
-
-<div class="size-14">
-  <h1 class="m30v">Payment Request</h1>
-
-    <p>
-      <b translate>Signature:</b>  {{md.domain}}
-      <span ng-show="md.pr.ca"><i class="fi-lock color-greeni"></i> {{md.pr.ca}}</span>
-      <span ng-show="!md.pr.ca"><i class="fi-unlock color-yellowi"></i> Untrusted</span>
-    <p>
-      <b translate>Merchant Message:</b>
-      <br>
-      {{md.pr.pd.memo || address}}
-    </p>
-
-    <p>
-      <b translate>Amount:</b>
-      {{md.unitTotal}} {{$root.wallet.settings.unitName}}
-      <span class="text-gray" ng-if="isRateAvailable">
-                    {{ alternative }} {{ alternativeIsoCode }}
-                  </span>
-
-      <div ng-if="md.expirationDate" class="m10v">
-        <b>Expires</b>: {{md.expirationDate | amTimeAgo }}
-      </div>
-  </div>
 
+<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}}
+  </div>
+  <div class="size-18 m5t text-gray">
+    {{ alternative }} {{ alternativeIsoCode }}
+  </div>
+</div>
+<div class="line-b m10v"></div>
+
+<div class="ellipsis m10v">
+  <i>To:</i> {{md.domain}}
+</div>
+
+<div class="m10v">
+  <i>Certified by:</i>
+  <span ng-show="md.pr.ca"><i class="fi-lock color-greeni"></i> {{md.pr.ca}}</span>
+  <span ng-show="!md.pr.ca"><i class="fi-unlock color-yellowi"></i> Untrusted</span>
+</div>
+
+<div ng-if="md.pr.pd.memo" class="m10v lh140">
+  <i>Merchant Message:</i>  <span class="text-gray">
+  {{md.pr.pd.memo}}
+</div>
+
+
+<div ng-if="md.expirationDate" class="m10v">
+  <i>Expires:</i> {{md.expirationDate | amTimeAgo }}
+</div>
+
+
+

views/modals/tx-details.html

@@ -1,15 +1,19 @@
 
-<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
-<div class="text-center size-48 m20t">
-  <div class="text-right"  ng-class="{
+<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',
         'text-warning': btx.action == 'sent', 
         'text-gray': btx.action == 'moved'}">
     <span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amount}}
       {{$root.wallet.settings.unitName}}
-    <span class="size-18 db m5t text-gray">
-      {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
-    </span>
+  </div>
+  <div class="size-18 m5t text-gray">
+    {{btx.alternativeAmount}} {{$root.wallet.settings.alternativeIsoCode}}
   </div>
 </div>
 
@@ -37,10 +41,11 @@
   </span>
 </div>
 
-<div ng-if="btx.merchant" class="m10v text-gray">
-  {{btx.merchant.pr.pd.memo}}
+<div ng-if="btx.merchant" class="lh140 m10v">
+  <i>Merchant Message:</i>  <span class="text-gray">{{btx.merchant.pr.pd.memo}}</span>
 </div>
 
+
 <div class="m10v">
   <span class="label alert" ng-show="!btx.ts && (!btx.confirmations || btx.confirmations == 0)">
     <span translate>Unconfirmed</span>
@@ -52,7 +57,7 @@
 </div>
 
 <div ng-if="btx.actionList[0]" class="m10v">
-  <i>Signatures</i>
+  <i>Signatures:</i>
   <ul class="tx-copayers m10t" ng-if="btx.actionList[0]">
     <li ng-repeat="c in btx.actionList" ng-class="{'bottom-line-copayers':!$last}" ng-if="c.actions.rejected || c.actions.sign || c.actions.create">
       <span>

views/modals/tx-status.html

@@ -1,6 +1,5 @@
 
-<div class="size-14">
-
+<div class="m20tp">
   <div class="text-center size-72 m10v">
     <div class="text-primary">
       <i class="fi-check"></i>

views/modals/txp-details.html

@@ -1,86 +1,75 @@
 
-<a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
-
-<div class="last-transactions-header row collapse" ng-init="txIndex = $index" ng-show="tx.comment">
-  <i class="fi-comment-quotes size-18 vm"></i> 
-  <span class="text-light">{{tx.comment}}</span>
+<div class="text-right">
+  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
 </div>
 
-<div class="sign-action">
-  <div ng-show="tx.signedBy[myId]">
-    <button class="secondary left m10r tiny m0 radius" ng-disabled="true"> <i class="fi-check icon-sign check"></i>
-      <span translate>Signed by me</span>
-    </button>
-  </div>
-  <div ng-show="tx.rejectedBy[myId]">
-    <button class="warning left m10r tiny m0 radius" ng-disabled="true"> <i class="fi-x icon-sign x"></i>
-      <span translate>Rejected by me</span>
-    </button>
-  </div>
-</div>
-
-<div ng-if="tx.createdTs " class="p15 line-b size-10">
-  <time class="left"> <span>{{tx.createdTs | amCalendar}}</span></time>
-  [<time class="right">{{tx.createdTs | amTimeAgo}}</time>]
-</div>
-
-<div class="text-center p15 m10t line-b" ng-repeat="out in tx.outs">
-  <div class="size-18 m10b">
-    <b>{{out.value}} {{$root.wallet.settings.unitName}}</b>
-    <span ng-show="out.alternativeAmount" class="alt-currency gray">
+<div ng-repeat="out in tx.outs">
+  <div class="m20t text-center ">
+    <div class="size-48">
+    {{out.value}} {{$root.wallet.settings.unitName}}
+    </div>
+    <div class="size-18 m5t text-gray">
       {{out.alternativeAmount}} {{out.alternativeIsoCode}}
-    </span>
-  </div>
-  <i class="fi-arrow-down m10b db"></i>
-  <div class="size-12 m20b">
-      <div ng-if="tx.merchant" class="ellipsis">
-      <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>
     </div>
-    <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right" ng-hide="tx.merchant" />
+  </div>
+  <div class="line-b m10v"></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>
 </div>
 
-  <div ng-if="tx.merchant" class="p15 line-b">
-    {{tx.merchant.pr.pd.memo}}
-    <div ng-if="tx.merchant && tx.merchant.expirationDate" class="m10v">
-      <i>Expires</i>: {{tx.merchant.expirationDate | amTimeAgo }}
-    </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.addressTo" class="m10v">
-    <span class="ellipsis">
-      <i>To:</i>
-      <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>
+<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>
 
-      <span ng-if="!tx.merchant">
-        <span class="text-gray"> {{tx.labelTo || tx.addressTo}}</span>
-      </span>
-    </span>
-  </div>
-
-
-
-  <div ng-if="tx.actionList[0]" class="p15">
-    <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>
+<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>
+      <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>
+      <span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
+    </li>
+  </ul>
+</div>
+
+<div class="row collapse" 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="reject(tx.ntxid)" ng-disabled="loading">
+      <i class="fi-x icon-sign x"></i>  <span translate>Reject</span>
+    </button>
   </div>
+  <div class="large-6 medium-6 small-6 columns text-right">
+    <button class="button primary m0" ng-click="sign(tx.ntxid)" ng-disabled="loading">
+      <i class="fi-check icon-sign check"></i>  <span translate>Sign</span>
+    </button>
+  </div>
+</div>
 
 

views/modals/wallet-info.html

@@ -1,3 +1,8 @@
+
+<div class="text-right">
+  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
+</div>
+
 <div class="text-center" ng-init="isComplete = item.isComplete(); networkName = item.getNetworkName()">
   <h1>{{item.name || item.id }}</h1>
   <h3>
@@ -54,5 +59,4 @@
     </div>
   </div>
 
-  <a class="close-reveal-modal" ng-click="close()">&#215;</a>
 </div>

views/modals/walletSelection.html

@@ -1,6 +1,10 @@
-<div ng-init="setWallets()">
 
-  <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
+<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>