Merge pull request #1613 from bechi/bugs/ui-07

Bugs/ui 07

css/src/main.css

@@ -133,7 +133,7 @@ header .alt-currency {
 }
 
 .head {
-  padding-left: 20px;
+  padding: 0.9rem 0;
   -moz-box-shadow:    0px 0px 2px 0px rgba(0,0,0,0.10);
   box-shadow:         0px 0px 2px 0px rgba(0,0,0,0.10);
   background-color: #FFF;
@@ -146,7 +146,7 @@ header .alt-currency {
 
 .head .title h1 {
   float: left;
-  padding: 12px 10px;
+  padding-left: 2rem;
   margin: 0;
 }
 
@@ -157,29 +157,32 @@ header .alt-currency {
 
 .head .menu a.dropdown {
   display: block;
-  height: 62px;
-  width: 140px;
-  padding: 12px 5px;
+  margin: 0 1rem 0 2rem;
+  height: 48px;
+  width: 100px;
   text-align: center;
 }
 
 .head .menu a.dropdown:hover,
 .head .menu a.dropdown.hover {
   border-bottom: 1px solid #fff;
+  top: 0;
 }
 
 .head .menu ul {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
   position: absolute;
-  right: 0;
-  width: 160px;
+  right: 14px;
+  width: 100px;
   list-style-type: none;
-  top: 61px;
+  top: 47px;nt 
 }
 
 .head .menu ul.hover {
   background: #FFFFFF;
-  -moz-box-shadow:    0px 0px 2px 0px rgba(0,0,0,0.25);
-  box-shadow:         0px 0px 2px 0px rgba(0,0,0,0.25);
+  -moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.25);
+  box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.25);
 }
 
 .head .menu ul li a {
@@ -499,6 +502,7 @@ a.button-setup {
 .size-21 { font-size: 21px; }
 .size-24 { font-size: 24px; }
 .size-36 { font-size: 36px; }
+.size-42 { font-size: 42px; }
 .size-48 { font-size: 48px; }
 .size-60 { font-size: 60px; }
 .size-72 { font-size: 72px; }
@@ -575,7 +579,7 @@ a.button-setup {
   padding-bottom: 0.5rem;
 }
 
-.line-dashed {
+.p-dashed {
   border-top: 1px dashed #3C5269;
   margin: 1rem 0;
   padding: 1rem 0;
@@ -608,6 +612,19 @@ a.button-setup {
   color: #B6E9DF;
 }
 
+.founds .locked {
+  font-size: 11px;
+  z-index: -99999;
+  background-color: #213140;
+  position: absolute;
+  top: 52px;
+  width: 250px;
+  left: 0;
+  padding: 0.3rem 0.7rem;
+  color: white;
+  border-bottom: 1px solid #374756;
+}
+
 .hidden {
   visibility: hidden;
 }
@@ -791,10 +808,13 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #1ABC9C;
 }
 
+.label {
+  font-weight: 700;
+  padding: 0.3rem 0.4rem;
+}
+
 .label.alert {
   background-color: #C0392A;
-  padding: 0.3rem 0.4rem;
-  font-weight: 700;
 }
 
 .bg-alert {
@@ -1099,8 +1119,7 @@ button.gray:focus,
 }
 
 .photo-container {
-  margin-right: 10px;
-  padding-top: 0.4rem;
+  margin-right: 3px;
   display: inline-block;
   width: 35px;
   height: 35px;
@@ -1115,7 +1134,7 @@ a:hover .photo-container  {
   color: #fff;
 }
 
-.side-nav {padding-top: 38px;}
+.side-nav {padding-top: 50px;}
 
 .side-nav li {
   font-size: 16px;
@@ -1124,6 +1143,10 @@ a:hover .photo-container  {
   margin-bottom: 10px;
 }
 
+.side-nav li>a:first-child:not(.button) {
+  padding-left: 40px;
+}
+
 .side-nav li.active>a:first-child:not(.button) {
   color: #2C3E50;
   background-color: #F8F8FB;
@@ -1131,7 +1154,6 @@ a:hover .photo-container  {
 
 .side-nav li>a:first-child:not(.button), .side-nav li a:not(.button) {
   color: #fff;
-  padding-left: 40px;
 }
 
 .side-nav li>a:first-child:not(.button) i {

css/src/mobile.css

@@ -195,5 +195,10 @@
     height: auto;
   }
 
+  .label {
+    font-size: 80%;
+    padding: 0.15rem 0.2rem;
+  }
+
 }
 

js/controllers/history.js

@@ -58,6 +58,9 @@ angular.module('copayApp.controllers').controller('HistoryController',
           return;
         }
 
+        _.each(res, function (r) {
+          r.ts = r.minedTs || r.sentTs;
+        });
         $scope.blockchain_txs = w.cached_txs = res;
         $scope.loading = false;
         setTimeout(function() {

js/models/Wallet.js

@@ -2840,7 +2840,7 @@ Wallet.prototype.getTransactionHistory = function(cb) {
     tx.amountSat = Math.abs(amount);
     tx.amount = tx.amountSat * satToUnit;
     tx.sentTs = proposal ? proposal.sentTs : undefined;
-    tx.minedTs = tx.time * 1000;
+    tx.minedTs = !_.isNaN(tx.time) ? tx.time * 1000 : undefined;
   };
 
   if (addresses.length > 0) {
@@ -2850,6 +2850,7 @@ Wallet.prototype.getTransactionHistory = function(cb) {
 
       var history = _.map(txs, function(tx) {
         decorateTx(tx);
+        console.log(tx);
         return tx;
       });
       return cb(null, history);

views/history.html

@@ -23,43 +23,40 @@
       <div class="btransactions">
         <div ng-if="!blockchain_txs[0].txid && !loading">
         <em><strong translate>No transactions yet.</strong></em></div>
-        <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
-          <div class="last-transactions-header size-14">
-            <div class="row collapse">
-              <div class="large-8 medium-7 small-4 columns ellipsis">
+        <div class="panel large-12 columns" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
+          <div class="row collapse size-12">
+              <div class="large-2 medium-2 small-4 columns">
+                <span ng-hide="btx.ts">&nbsp;</span>
+                <time>{{btx.ts | amCalendar}}</time>
+              </div>
+
+              <div class="large-3 medium-3 small-5 columns">
+                {{btx.amount| noFractionNumber}} {{$root.wallet.settings.unitName}}
+                {{btx.action}} 
+              </div>
+
+              <div class="large-2 medium-2 columns hide-for-small-only">
+                <span ng-hide="btx.labelTo">&nbsp;</span>
+                <span ng-show="btx.labelTo">{{ (btx.action == 'received' ? 'on' : 'to') | translate }} {{btx.labelTo}}</span>
+              </div>
+
+              <div class="large-3 medium-3 small-4 columns hide-for-small-only">
+                <span ng-show="btx.comment">{{btx.comment}}</span>
+              </div>
+
+              <div class="large-1 medium-1 small-3 columns">
+                <span class="label alert" ng-show="!btx.confirmations || btx.confirmations == 0"><span translate>Unconfirmed</span></span>
+                <span class="label" ng-show="btx.confirmations > 0 && btx.confirmations <= 6">{{btx.confirmations || 0}} <span translate>Confirmations</span></span>
+                <span class="label success" ng-show="btx.confirmations > 6"><span translate>Confirmed</span></span>
+              </div>
+
+              <div class="large-1 medium-1 small-4 columns size-10 text-right hide-for-small-only">
                 <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank" translate>
                   Show more
                 </a> 
-                <span class="btn-copy" clip-copy="btx.txid"></span>
               </div>
-              <div class="large-4 medium-5 small-8 columns text-right">
-                <div data-ng-show="btx.sentTs">
-                  <span translate>broadcasted</span>
-                  <time>{{btx.sentTs | amCalendar}}</time>
-                </div>
-                <div data-ng-show="btx.minedTs">
-                  <span translate>mined</span>
-                  <time>{{btx.minedTs | amCalendar}}</time>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="last-transactions-content">
-          {{btx.action}} <span ng-show="btx.labelTo">{{ (btx.action == 'received' ? 'on' : 'to') | translate }} {{btx.labelTo}}</span>
-          <span ng-show="btx.comment">{{btx.comment}}</span>
-          </div>
-          <div class="last-transactions-footer">
-            <div class="row collapse">
-              <div class="large-6 medium-6 small-6 columns">
-                <div class="size-12" ng-show="!btx.confirmations || btx.confirmations == 0"><span translate>Unconfirmed</span></div>
-                <div class="size-12" ng-show="btx.confirmations > 0 && btx.confirmations <= 6">{{btx.confirmations || 0}} <span translate>Confirmations</span></div>
-                <div class="size-12" ng-show="btx.confirmations > 6"><span translate>Confirmed</span></div>
-              </div>
-              <div class="large-6 medium-6 small-6 columns text-right">
-                <p class="label size-14"><span translate>Amount</span>: {{btx.amount| noFractionNumber}} {{$root.wallet.settings.unitName}}</p>
-              </div>
-            </div>
           </div>
+              
         </div>
       </div>
     </div>

views/includes/head.html

@@ -2,19 +2,21 @@
   <h1>{{$root.title}}</h1>
 </div>
 
+
+
 <div class="menu" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"
   ng-click="hoverMenu = !hoverMenu">
   <a class="dropdown ellipsis text-gray" ng-class="{'hover': hoverMenu}">
-    <span class="photo-container"><i class="fi-torso size-18"></i></span>
+    <span class="photo-container"><i class="fi-torso size-42"></i></span>
     <span class="m15t">{{username}} </span>
-    <i class="icon-arrow-down2 size-16 vm"></i> 
+    <i class="icon-arrow-down size-16 vm"></i> 
   </a>
   <ul ng-show="hoverMenu" ng-class="{'hover': hoverMenu}">
-    <li>
-      <a href="#!/manage" title="Manage wallets">
-        <i class="fi-plus"></i> {{'Manage wallets' | translate }}</a></li>
-    <li><a href="#!/" title="Close" ng-click="signout()">
-      <i class="fi-power"></i> {{'Close'|translate}}</a></li>
+    <li><a class="text-gray size-16" href="#!/" title="Close" ng-click="signout()">
+      <i class="fi-power m10r"></i> {{'Close'|translate}}</a></li>
   </ul>
 </div>
+<div class="right">
+  <a class="button tiny pri radius oh" href="#!/manage" title="Manage wallets"><i class="fi-plus"></i> {{'Manage wallets' | translate }}</a>
+</div>
 

views/includes/sidebar.html

@@ -20,12 +20,16 @@
           <b class="m5r">{{totalBalance || 0 |noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
           <span class="alt-currency">{{totalBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}</span>
         </div>
-        <div class="m10t" ng-show="lockedBalance">
-          {{'Locked'|translate}} &nbsp;
+        <div class="m10t locked" ng-show="lockedBalance">
+
+          <span class="text-gray">
+            <i class="fi-lock"></i> {{'Locked'|translate}} &nbsp;
+          </span>
           <span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
-          <span ng-if="$root.wallet && !$root.updatingBalance" class="has-tip" data-options="disable_for_touch:true" tooltip-popup-delay='500' tooltip="{{lockedBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}
-          </span> &nbsp;
-          <i class="fi-info medium" tooltip="{{'Balance locked in pending transaction proposals'|translate}}" tooltip-placement="bottom"></i>
+          <span ng-if="$root.wallet && !$root.updatingBalance" class="text-gray"><b>{{lockedBalance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}} </b> - {{lockedBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}
+          </span>
+          <i class="fi-info medium right text-gray size-14" tooltip="{{'Balance locked in pending transaction proposals'|translate}}" tooltip-placement="bottom"></i>
+          
         </div>
       </div>
     </div>
@@ -73,7 +77,7 @@
         </div>
       </li>
     </ul>
-      <a ui-route="{{create}}" href="#!/manage" class="button-setup add-wallet db p20h" title="Create"><i class="m5r fi-plus"></i> {{'Add Wallet' | translate }} </a>
+      <!-- <a ui-route="{{create}}" href="#!/manage" class="button-setup add-wallet db p20h" title="Create"><i class="m5r fi-plus"></i> {{'Add Wallet' | translate }} </a> -->
   </div>
 
   <ul class="side-nav" ng-if="!walletSelection && $root.wallet.isReady()">