From 7a872956b41e40e65686792a7221894845748029 Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Tue, 29 Apr 2014 16:34:40 -0300
Subject: [PATCH] item tx new style

---
 css/main.css        |  11 +++-
 css/tpl-default.css |  24 ++++++++
 index.html          | 132 +++++++++++++++++++++++++++-----------------
 3 files changed, 116 insertions(+), 51 deletions(-)

diff --git a/css/main.css b/css/main.css
index 843c6bacc..654de6fa6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -251,7 +251,7 @@ hr { margin: 2.25rem 0;}
 .br100 {border-radius: 100%;}
 .lh {line-height: 0;}
 .oh {overflow:hidden;}
-
+.lh {line-height: 0;}
 .signin input.ng-dirty.ng-invalid { 
   border: 2px red solid;
 }
@@ -275,6 +275,11 @@ hr { margin: 2.25rem 0;}
   padding: 0.5rem;
 }
 
+.tx-copayers {
+  overflow: hidden;
+  padding: 0.5rem;
+}
+
 .box-copayers {
   padding: 0.5rem 2rem 0.5rem 1rem;
   float: left;
@@ -308,6 +313,7 @@ hr { margin: 2.25rem 0;}
   padding: 2.7px;
 }
 
+<<<<<<< HEAD
 .tx-copayers {
   background: #F8F8F8;
   -moz-box-shadow:    inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
@@ -331,4 +337,7 @@ hr { margin: 2.25rem 0;}
   color: #fff;
   background: #C0392B;
 }
+=======
+
+>>>>>>> item tx new style
 
diff --git a/css/tpl-default.css b/css/tpl-default.css
index cab9f35f2..8c31e73d9 100644
--- a/css/tpl-default.css
+++ b/css/tpl-default.css
@@ -142,6 +142,30 @@ a.box-backup {
   color:#C0392A;
 }
 
+.tx-copayers {
+  background: #F8F8F8;
+  -moz-box-shadow:    inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
+  box-shadow:         inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
+}
+
+.box-copayers .icon-inactive {
+  color: #4C5B69;
+}
+
+.box-copayers .icon-active {
+  color: #fff;
+}
+
+.box-copayers .icon-active-check {
+  color: #fff;
+  background: #3FBC9C;
+}
+
+.box-copayers .icon-active-x {
+  color: #fff;
+  background: #C0392B;
+}
+
 small.is-valid {
   color: #04B404;
 }
diff --git a/index.html b/index.html
index 3c8820c34..4acac0961 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,9 @@
             </div>
             <div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
               <div class="large-4 medium-4 columns line-dashed-v">
-                <a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
-                  <strong><span>{{$root.getWalletDisplay()}}</span></strong>
+                <a href="#/peer" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
+                  <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
+                  <span ng-if="$root.wallet.name">{{$root.wallet.name}}</span>
                 </a> 
                 <a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
               </div>
@@ -43,7 +44,7 @@
 
           <section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
             <ul>
-              <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="text-center" data-ng-class="{active: isActive(item)}">
+              <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
                 <a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
               </li>
             </ul>
@@ -98,34 +99,13 @@
 
   <div id="footer" data-ng-controller="FooterController" ng-show="$root.wallet">
     <link rel="stylesheet" ng-href="{{theme}}">
-    <div class="row">
-      <div class="large-2 columns">
-        <strong><div>{{$root.getWalletDisplay()}}</div></strong>
-        <span class="size-12">
-          {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
-        </span> 
-      </div>
-      <div class="large-2 columns" style="float:right;"
-          ng-repeat="copayer in $root.wallet.getRegisteredPeerIds()">
-        <video 
-          ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
-          class="video-small"
-          autoplay ng-show="$root.videoSrc[copayer]" 
-          ng-src="{{$root.getVideoURL(copayer)}}"
-          id="{{copayer + '-video'}}" muted="true"
-          title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" ></video>
-        <img ng-show="!$root.videoSrc[copayer]" 
-          ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
-          class="video-small"
-          src="./img/satoshi.gif" 
-          title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" />
-      </div>
+    <div class="large-4 columns">
+      <span class="size-12">Copayers 
+        {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</span> 
     </div>
-    <!--
-    <div class="large-2 columns text-right">
+    <div class="large-8 columns text-right">
       <a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '&middot; '}}</a>
     </div>
-    -->
   </div>
 
     <!-- Templates -->
@@ -203,7 +183,7 @@
     <script type="text/ng-template" id="setup.html">
       <div ng-controller="SetupController">
         <div data-alert class="alert-box info round" ng-show="loading">
-          Creating new wallet...
+          Connecting to wallet...
         </div>
         <div ng-show="!loading">
           <div class="row">
@@ -243,6 +223,34 @@
       </div>
     </script>
 
+    <script type="text/ng-template" id="peer.html">
+      <div class="row"  ng-if="$root.wallet.requiredCopayers > $root.wallet.network.connectedCopayers().length">
+        <div class="large-12 columns p70l">
+          <p class="text-info"> <i class="fi-alert size-28"></i> 
+          {{$root.wallet.requiredCopayers}} copayers needed for signing transactions
+        </div>
+      </div>
+      <div class="row">
+        <div class="large-4 columns"
+          ng-repeat="copayer in $root.wallet.getRegisteredPeerIds()">
+          <video 
+            ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
+            class="video-small"
+            autoplay ng-show="$root.videoSrc[copayer]" 
+            ng-src="{{$root.getVideoURL(copayer)}}"
+            id="{{copayer + '-video'}}" muted="true"
+            title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" ></video>
+          <img ng-show="!$root.videoSrc[copayer]" 
+            ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
+            class="video-small"
+            src="./img/satoshi.gif" 
+            title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" />
+        </div>
+      </div>
+    </script>
+    
+    
+
     <!-- ADDRESS -->
     <script type="text/ng-template" id="addresses.html">
       <div class="addresses" data-ng-controller="AddressesController">
@@ -292,36 +300,60 @@
               </div>
 
               <div class="tx-copayers"> 
-
-                <div class="box-copayers" ng-repeat="(peer, actions) in tx.peerActions">
+                <div class="box-copayers">
                   <figure class="left">
-                    <a href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="{{peer === $root.wallet.getMyCopayerId() ? 'You' : peer}}">
-                      <img src="./img/satoshi.gif" alt="peer" width="200">
-                    </a>
+                      <img src="./img/avatar.jpg" alt="" width="200">
                   </figure>
                   <div class="box-status">
-                    <span ng-repeat="(action, ts) in actions">
-                      <a ng-if="action == 'create'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Created at {{ts | date:'medium'}}">
-                        <i class="fi-crown size-12 icon-status icon-active"></i>
-                      </a>
-                      <a ng-if="action == 'seen'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Seen at {{ts | date:'medium'}}">
-                        <i class="fi-eye size-12 icon-status icon-active"></i>
-                      </a>
-                      <a ng-if="action == 'sign'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Signed at {{ts | date:'medium'}}">
-                        <i class="fi-check size-12 icon-status icon-active-check"></i>
-                      </a>
-                      <a ng-if="action == 'rejected'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Rejected at {{ts | date:'medium'}}">
-                        <i class="fi-check size-12 icon-status icon-active-x"></i>
-                      </a>
-                    </span>
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
+                  </div>
+                </div>
+
+                <div class="box-copayers">
+                  <figure class="left">
+                      <img src="./img/avatar.jpg" alt="" width="200">
+                  </figure>
+                  <div class="box-status">
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
+                  </div>
+                </div>
+
+                <div class="box-copayers">
+                  <figure class="left">
+                      <img src="./img/avatar.jpg" alt="" width="200">
+                  </figure>
+                  <div class="box-status">
+                    <i class="fi-crown size-12 icon-inactive icon-status"></i>
+                    <i class="fi-eye size-12 icon-active icon-status"></i>
+                    <i class="fi-check size-12 icon-active-check icon-status"></i>
                   </div>
                 </div>
-                
                 <small class="right text-gray"> 
                   Fee: <strong> <i class="fi-bitcoin"></i> {{tx.fee}}  </strong>
                   <strong> Proposal ID: </strong> {{tx.ntxid}} 
                 </small>
-                 
+                <!-- 
+                    <table>
+                      <tr ng-repeat="(peer, actions) in tx.peerActions">
+                        <td colspan="3">
+                            <span ng-if="peer === $root.wallet.getMyCopayerId()"> You</span>
+                             {{peer}}
+
+                            <span ng-repeat="(action, ts) in actions">
+                              <span ng-if="action == 'create'" title="{{ts | date:'medium'}}" class="fi-page-add size-18 right m10h"></span>
+                              <span ng-if="action == 'seen'" title="{{ts | date:'medium'}}" class="fi-eye size-18 right m10h"> </span>
+                              <span ng-if="action == 'sign'" title="{{ts | date:'medium'}}" class="fi-check size-18 right m10h"> </span>
+                              <span ng-if="action == 'rejected'" title="{{ts | date:'medium'}}" class="fi-x size-18 right m10h" style="color:red"> </span>
+
+                              <a title="{{ts | date:'medium'}}"></a>
+                            </span>
+                        </td>
+                    </table>
+                 -->
               </div>
 
               <div class="txbottom">