From c0fe8d57e8f4b204ed1ebb58ff495826fe3d21e5 Mon Sep 17 00:00:00 2001
From: Mario Colque <colquemario@gmail.com>
Date: Mon, 7 Apr 2014 11:33:35 -0300
Subject: [PATCH 1/4] added support for close event

---
 js/services/network.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/js/services/network.js b/js/services/network.js
index 7e526654f..e05e0a8ca 100644
--- a/js/services/network.js
+++ b/js/services/network.js
@@ -80,6 +80,7 @@ angular.module('copay.network')
           });
           break;
         case 'disconnect':
+          _onClose(obj.sender);
           $rootScope.connectedPeers = _arrayRemove(obj.sender, $rootScope.connectedPeers);
           $rootScope.connectedTo = _arrayRemove(obj.sender, $rootScope.connectedTo);
 
@@ -90,6 +91,15 @@ angular.module('copay.network')
       }
     };
 
+    var _onClose = function(pid) {
+      $rootScope.connectedPeers = _arrayRemove(pid, $rootScope.connectedPeers);
+      $rootScope.connectedTo = _arrayRemove(pid, $rootScope.connectedTo);
+
+      _saveDataStorage();
+
+      $rootScope.$digest();
+    };
+
     var _connectToPeers = function(peers) {
       var arrayDiff = _arrayDiff(peers, $rootScope.connectedTo);
 
@@ -99,7 +109,7 @@ angular.module('copay.network')
     };
 
     // public methods
-    var _init = function(cb) {
+    var init = function(cb) {
       peer = new Peer($rootScope.peerId, {
         key: 'lwjd5qra8257b9', // TODO: we need our own PeerServer KEY (http://peerjs.com/peerserver)
         debug: 3
@@ -135,13 +145,17 @@ angular.module('copay.network')
               });
 
               c.on('data', _onData);
+
+              c.on('close', function() {
+                _onClose(c.peer);
+              });
             }
           });
         }
       });
     };
 
-    var _connect = function(pid, cb) {
+    var connect = function(pid, cb) {
       if (pid !== $rootScope.peerId) {
         var c = peer.connect(pid, {
           label: 'wallet',
@@ -163,6 +177,10 @@ angular.module('copay.network')
         });
 
         c.on('data', _onData);
+
+        c.on('close', function() {
+          _onClose(c.peer);
+        });
       }
     };
 
@@ -175,7 +193,7 @@ angular.module('copay.network')
         _sender(pids, data, cb);
     };
 
-    var _disconnect = function(cb) {
+    var disconnect = function(cb) {
       var conns = $rootScope.connectedPeers.length;
       var i = 1;
 
@@ -198,10 +216,10 @@ angular.module('copay.network')
     }
 
     return {
-      init: _init,
-      connect: _connect,
+      init: init,
+      connect: connect,
       send: _send,
-      disconnect: _disconnect
+      disconnect: disconnect
     } 
   });
 

From 676c5369f474046f5d97fe2f3f6777ebd4fd4b6d Mon Sep 17 00:00:00 2001
From: Mario Colque <colquemario@gmail.com>
Date: Mon, 7 Apr 2014 11:44:10 -0300
Subject: [PATCH 2/4] removed unnecessary lines

---
 js/services/network.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/js/services/network.js b/js/services/network.js
index e05e0a8ca..1551345d5 100644
--- a/js/services/network.js
+++ b/js/services/network.js
@@ -81,12 +81,6 @@ angular.module('copay.network')
           break;
         case 'disconnect':
           _onClose(obj.sender);
-          $rootScope.connectedPeers = _arrayRemove(obj.sender, $rootScope.connectedPeers);
-          $rootScope.connectedTo = _arrayRemove(obj.sender, $rootScope.connectedTo);
-
-          _saveDataStorage();
-
-          $rootScope.$digest();
           break;
       }
     };

From 2ee5bdae7072d677ea9a09d757114017b76a168f Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Mon, 7 Apr 2014 15:05:53 -0300
Subject: [PATCH 3/4] home page

---
 css/main.css | 14 +++++++++-----
 index.html   | 31 +++++++++++++++++++------------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/css/main.css b/css/main.css
index a7a4c5878..4446c57c5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -73,12 +73,16 @@ body {
 
 .panel {
   background: #FFFFFF;
-  padding: 0.25rem 1rem;
+  padding: 0.7rem 1rem;
+  border:0;
+}
+
+.panel:hover {
+  background: #111;
 }
 
 .box-backup {
   margin: 2rem 0;
-  background: white;
   padding: 2rem 1rem;
 }
 
@@ -87,8 +91,8 @@ a.box-backup {
   color: #111;
 }
 
-a.box-backup:hover {
-  color:#666;
+a.panel:hover, a.panel:hover p {
+  color:#fff;
 }
 
 .box-backup i {
@@ -102,7 +106,7 @@ button.secondary { background-color: #FAE448 !important; }
 button.primary:hover { background-color: #333;}
 button.secondary:hover { background-color: #D7C020 !important;}
 
-
+.db {display: block;}
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
 .size-16 { font-size: 16px; }
diff --git a/index.html b/index.html
index 849968164..20b6ecdcd 100644
--- a/index.html
+++ b/index.html
@@ -100,23 +100,30 @@
         </div>
       </div>
     </script>
+    
+    
 
     <!-- HOME -->
     <script type="text/ng-template" id="home.html">
       <div class="home" data-ng-controller="HomeController">
-      <h2>{{title}}</h2>
+        <h2>{{title}}</h2>
 
-      <accordion close-others="oneAtATime">
-        <accordion-group ng-repeat="addr in addrs">
-          <accordion-heading>
-            {{addr.addrStr}}
-          </accordion-heading>
-          <qrcode size="160" data="{{addr.addrStr}}"></qrcode>
-        </accordion-group>
-      </accordion>
+        <div class="row">
+          <div class="large-6 columns">
+            <a class="panel db"> Adress1 <span class="right"> &gt; </span> </a>
+            <a class="panel db"> Adress2 <span class="right"> &gt; </span> </a>
+            <a class="panel db"> Adress3 <span class="right"> &gt; </span> </a>
+            <a class="panel db"> Adress4 <span class="right"> &gt; </span> </a>
+          </div>
+          <div class="large-6 columns">
+            <qrcode size="160" data="n3zUqNR7Bbbc4zJhPVj1vG2Lx66K3Xhzvb"></qrcode>
+            <p> 2.5432 BTC </p>
+          </div>
+        </div> 
       </div>
     </script>
 
+
     <!-- TRANSACTIONS -->
     <script type="text/ng-template" id="transactions.html">
       <div class="transactions" data-ng-controller="TransactionsController">
@@ -177,19 +184,19 @@
         <h2>{{title}}</h2>
         <div class="row text-center">
           <div class="large-4 columns">
-            <a href="/" class="box-backup">
+            <a href="/" class="panel box-backup">
               <i class="fi-download size-72"></i>
               <p> Download File </p>
             </a>
           </div>
           <div class="large-4 columns">
-            <a href="/" class="box-backup">
+            <a href="/" class="panel box-backup">
               <i class="fi-social-dropbox size-72"></i>
               <p> Backup to Dropbox </p>
             </a>
           </div>
           <div class="large-4 columns">
-            <a href="/" class="box-backup">
+            <a href="/" class="panel box-backup">
               <i class="fi-mail size-72"></i>
               <p> Backup to email </p>
             </a>

From ab0345f34200b5ebef1e40554b4328b70611b1a9 Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Tue, 8 Apr 2014 14:16:38 -0300
Subject: [PATCH 4/4] transaction page

---
 css/main.css | 20 +++++++++----
 index.html   | 84 +++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/css/main.css b/css/main.css
index 4446c57c5..9ceb2b6fc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -78,7 +78,7 @@ body {
 }
 
 .panel:hover {
-  background: #111;
+  background: #efefef;
 }
 
 .box-backup {
@@ -91,21 +91,31 @@ a.box-backup {
   color: #111;
 }
 
-a.panel:hover, a.panel:hover p {
-  color:#fff;
-}
-
 .box-backup i {
   margin-bottom: 2rem;
   display: block;
 }
 
+p {
+  margin-bottom: 0.5rem;
+}
+
+.pending button {
+  margin: 0;
+}
+
+.line {
+  border-top: 1px solid #ccc;
+  padding-bottom: 1rem;
+}
+
 button.primary { background-color: #111; }
 button.secondary { background-color: #FAE448 !important; }
 
 button.primary:hover { background-color: #333;}
 button.secondary:hover { background-color: #D7C020 !important;}
 
+.m0 {margin: 0;}
 .db {display: block;}
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
diff --git a/index.html b/index.html
index 20b6ecdcd..534d427a2 100644
--- a/index.html
+++ b/index.html
@@ -123,38 +123,68 @@
       </div>
     </script>
 
-
+    
     <!-- TRANSACTIONS -->
     <script type="text/ng-template" id="transactions.html">
       <div class="transactions" data-ng-controller="TransactionsController">
-      <h2>{{title}}</h2>
-      <div class="row">
-        <div class="large-6 columns">
-          <h3>Input</h3>
-          <accordion close-others="oneAtATime">
-            <accordion-group ng-repeat="tx in txsinput">
-              <accordion-heading>
-                {{tx.fromAddr}} -> {{tx.toAddr}} : {{tx.amount}}
-              </accordion-heading>
+      
+        <div class="row">
+          <div class="large-6 columns">
+            <h2>Output</h2>
+            <div class="panel pending">
               <div class="row">
-                <div class="col-xs-6 col-md-4">ignore</div>
-                <div class="col-xs-6 col-md-4">(Required 3 copay)</div>
-                <div class="col-xs-6 col-md-4">sign</div>
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+                <div class="large-12 columns m0">
+                  <div class="line"></div>
+                  <button class="primary round large-4 columns"><i class="large-2 columns fi-x size-16 text-center"></i> Ignore</button>
+                  <small class="large-4 columns text-center">Faltan 3 cosigners</small>
+                  <button class="secondary round large-4 columns"><i class="large-2 columns fi-check size-16 text-center"></i> Sign</button>
+                </div>
+              </div> <!-- end of row -->
+            </div> <!-- end of pending -->
+            <div class="line"></div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
               </div>
-            </accordion-group>
-          </accordion> 
-        </div>
-        <div class="large-6 columns">
-          <h3>Output</h3>
-          <accordion close-others="oneAtATime">
-            <accordion-group ng-repeat="tx in txsoutput">
-              <accordion-heading>
-                {{tx.fromAddr}} <- {{tx.toAddr}} : {{tx.amount}}
-              </accordion-heading>
-              Details...
-            </accordion-group>
-          </accordion>
-        </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-right size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+          </div>
+          <div class="large-6 columns">
+            <h2>Input</h2>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="row">
+                <p class="large-5 columns"> Address 1</p>
+                <i class="large-2 columns fi-arrow-left size-16 text-center"></i>
+                <p class="large-5 columns"> Adress 2</p>
+              </div>
+            </div>
+          </div>
+        </div>    
       </div>
    </script>