Merge pull request #990 from cmgustavo/feature/01-clipboard

Feature/01 clipboard

bower.json

@@ -22,6 +22,7 @@
     "angular-moment": "~0.7.1",
     "socket.io-client": ">=1.0.0",
     "mousetrap": "1.4.6",
+    "zeroclipboard": "~2.1.6",
     "ng-idle": "*"
   }
 }

css/main.css

@@ -682,9 +682,7 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   border-radius: 3px; 
-  border: 1px solid #1ABC9C;
+  border: 1px solid #16A085;
-  text-overflow: ellipsis;
-  overflow-y: hidden;
 }
 
 .tooltip>.nub {
@@ -700,6 +698,11 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
   border-color:transparent transparent transparent #16A085;
 }
 
+.has-tip {
+  color: #7A8C9E;
+  border-color: #7A8C9E;
+}
+
 .logo {
   background: transparent url('../img/logo-negative-beta.svg') no-repeat;
   background-size: 130px 51px;
@@ -1090,6 +1093,29 @@ a.text-white:hover {color: #ccc;}
   text-align: left;
 }
 
+/**** Copy to clipboard ****/
+
+.btn-copy {
+  color: #9b9b9b;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  outline: none;
+  vertical-align: sub;
+  background: transparent url('../img/icons/copy.png') center center no-repeat;
+}
+
+.btn-copied {
+  display: inline-block;
+  width: auto;
+  color: #16A085; 
+  font-weight: bold; 
+  font-size: 11px; 
+}
+
+.btn-copy.zeroclipboard-is-hover { color: #000; }
+.btn-copy.zeroclipboard-is-active { opacity: 1; }
+
 @media only screen and (min-width: 40.063em) {
   dialog.tiny, .reveal-modal.tiny {
     width: 50%;
@@ -1097,5 +1123,4 @@ a.text-white:hover {color: #ccc;}
   }
 }
 
-
 /*-----------------------------------------------------------------*/

css/mobile.css

@@ -122,5 +122,10 @@
     width: 200px;
     height: 200px;
   }
+
+  .btn-copy {
+    display: none;
+  }
+
 }
 

index.html

@@ -75,6 +75,7 @@
   <script src="lib/sjcl.js"></script>
   <script src="lib/ios-imagefile-megapixel/megapix-image.js"></script>
   <script src="lib/qrcode-decoder-js/lib/qrcode-decoder.min.js"></script>
+  <script src="lib/zeroclipboard/dist/ZeroClipboard.min.js"></script>
 
   <script src="config.js"></script>
   <script src="js/copayBundle.js"></script>

js/directives.js

@@ -238,4 +238,38 @@ angular.module('copayApp.directives')
         });
       }
     };
+  })
+  .directive('clipCopy', function() {
+    ZeroClipboard.config({
+      moviePath: '/lib/zeroclipboard/dist/ZeroClipboard.swf',
+      trustedDomains: ['*'],
+      allowScriptAccess: 'always',
+      forceHandCursor: true
+    });
+
+    return {
+      restric: 'A',
+      scope: { clipCopy: '=clipCopy' },
+      link: function(scope, elm) {
+        var client = new ZeroClipboard(elm);
+
+        client.on( 'ready', function(event) {
+          client.on( 'copy', function(event) {
+            event.clipboardData.setData('text/plain', scope.clipCopy);
+          });
+
+          client.on( 'aftercopy', function(event) {
+            elm.removeClass('btn-copy').addClass('btn-copied').html('Copied!');
+            setTimeout(function() {
+              elm.addClass('btn-copy').removeClass('btn-copied').html('');
+            }, 1000);
+          });
+        });
+
+        client.on( 'error', function(event) {
+          console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
+          ZeroClipboard.destroy();
+        });
+      }
+    };
   });

views/copayers.html

@@ -11,7 +11,10 @@
           <h3>Share this secret with your other copayers</h3>
           <div class="panel">
             <qrcode size="250" data="{{$root.wallet.getSecret()}}"></qrcode>
-            <div class="secret text-gray size-14">{{$root.wallet.getSecret()}}</div>
+            <div class="secret text-gray size-14">
+              {{$root.wallet.getSecret()}} 
+              <span class="btn-copy" clip-copy="$root.wallet.getSecret()"></span>
+            </div>
             <div style="clear:both;"></div>
           </div>
         </div>

views/includes/peer-list.html

@@ -11,7 +11,7 @@
   
 
   <ul class="copayer-list" ng-repeat="copayer in copayers">
-    <li tooltip="ID: {{copayer.peerId}}" tooltip-placement="top">
+    <li class="ellipsis">
       <video
         ng-if="hasVideo(copayer)"
         peer="{{copayer}}" avatar autoplay
@@ -25,10 +25,9 @@
         src="./img/satoshi.gif"
         alt="{{copayer}}">
 
-      <span>
+      <span ng-show="copayer.index == 0">you</span>
-        <span ng-show="copayer.index == 0">you</span>
+      <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
-        <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
+      <span class="btn-copy" clip-copy="copayer.peerId"></span>
-      </span>
     </li>
   </ul>
 </div>

views/includes/sidebar.html

@@ -25,7 +25,9 @@
         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
       </span>
       <span ng-if="!$root.updatingBalance"
+        class="has-tip"
         data-options="disable_for_touch:true"
+        tooltip-popup-delay='500'
         tooltip="{{totalBalanceBTC || 0 |noFractionNumber:8}} BTC"
         tooltip-trigger="mouseenter"
         tooltip-placement="bottom">{{totalBalance || 0
@@ -37,7 +39,9 @@
         <i class="fi-bitcoin-circle icon-rotate spinner"></i>
       </span>
       <span ng-show="!$root.updatingBalance"
+        class="has-tip"
         data-options="disable_for_touch:true"
+        tooltip-popup-delay='500'
         tooltip="{{lockedBalanceBTC || 0 |noFractionNumber:8}} BTC"
         tooltip-trigger="mouseenter"
         tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.unitName}}

views/join.html

@@ -55,7 +55,8 @@
             check-strength="passwordStrength"
             tooltip-html-unsafe="Password strength: 
             <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase,
-              numbers and symbols</span>" tooltip-trigger="focus" required>
+              numbers and symbols</span>" tooltip-trigger="focus" 
+              tooltip-placement="left" required>
 
             <input type="password" 
             placeholder="Repeat password"

views/modals/qr-address.html

@@ -2,7 +2,7 @@
   <qrcode size="250" data="{{address.address}}"></qrcode>
 
   <div class="m10t">
-    <h4>{{address.address}}</h4>
+    <h4>{{address.address}} <span class="btn-copy" clip-copy="address.address"></span></h4>
     <span ng-if="$root.updatingBalance">
       <i class="fi-bitcoin-circle icon-rotate spinner"></i>
     </span>

views/send.html

@@ -123,34 +123,34 @@
       </div>
     </div>
 
-      <div class="large-12 columns line-dashed">
+    <div class="large-12 columns line-dashed">
-        <h2>Address Book</h2>
+      <h2>Address Book</h2>
-        <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
+      <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
-        <table ng-show="showAddressBook()">
+      <table class="large-12 medium-12 small-12" ng-show="showAddressBook()">
-          <thead>
+        <thead>
-            <tr>
+          <tr>
-              <th>Label</th>
+            <th>Label</th>
-              <th>Address</th>
+            <th>Address</th>
-              <th>Creator</th>
+            <th>Creator</th>
-              <th>Date</th>
+            <th>Date</th>
-              <th>&nbsp;</th>
+            <th>&nbsp;</th>
-            </tr>
-          </thead>
-          <tbody>
-          <tr 
-            ng-repeat="(addr, info) in $root.wallet.addressBook" 
-            ng-class="{'addressbook-disabled': info.hidden}">
-            <td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
-            <td width="100" class="ellipsis">{{addr}}</td>
-            <td>{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
-            <td><time>{{info.createdTs | amCalendar}}</time></td>
-            <td><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
-                'Enable' : 'Disable'}}</a></td>
           </tr>
-          </tbody>
+        </thead>
-        </table>
+        <tbody>
-        <button class="button tiny primary text-center" ng-click="openAddressBookModal()">Add New Entry</button>
+        <tr 
-      </div>
+          ng-repeat="(addr, info) in $root.wallet.addressBook" 
+          ng-class="{'addressbook-disabled': info.hidden}">
+          <td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
+          <td class="ellipsis">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
+          <td>{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
+          <td><time>{{info.createdTs | amCalendar}}</time></td>
+          <td width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
+              'Enable' : 'Disable'}}</a></td>
+        </tr>
+        </tbody>
+      </table>
+      <button class="button tiny primary text-center" ng-click="openAddressBookModal()">Add New Entry</button>
+    </div>
   </div>
 </div>
 

views/transactions.html

@@ -154,12 +154,13 @@
         </div>
         <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
           <div class="last-transactions-header">
-            <div class="large-8 columns">
+            <div class="large-8 medium-7 small-3 columns ellipsis">
-              <a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank">
+              <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank">
-                {{btx.txid}}
+                {{btx.txid}} 
-              </a>
+              </a> 
+              <span class="btn-copy" clip-copy="btx.txid"></span>
             </div>
-            <div class="large-4 columns text-right">
+            <div class="large-4 medium-5 small-9 columns text-right">
               <div data-ng-show="btx.firstSeenTs">
                 first seen at
                 <time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>