Merge pull request #1768 from matiu/feature/gravater

Add gravatars

Gruntfile.js

@@ -123,7 +123,7 @@ module.exports = function(grunt) {
           'lib/file-saver/FileSaver.js',
           'lib/socket.io-client/socket.io.js',
           'lib/sjcl.js',
-          'lib/ios-imagefile-megapixel/megapix-image.js',
+         'lib/ios-imagefile-megapixel/megapix-image.js',
           'lib/qrcode-decoder-js/lib/qrcode-decoder.min.js',
           'lib/zeroclipboard/ZeroClipboard.min.js'
         ],
@@ -139,7 +139,9 @@ module.exports = function(grunt) {
           'lib/angular-foundation/mm-foundation.min.js',
           'lib/angular-foundation/mm-foundation-tpls.min.js',
           'lib/angular-gettext/dist/angular-gettext.min.js',
-          'lib/angular-load/angular-load.min.js'
+          'lib/angular-load/angular-load.min.js',
+          'lib/angular-gravatar/build/md5.min.js',
+          'lib/angular-gravatar/build/angular-gravatar.min.js'
           // If you add libs here, remember to add it too to karma.conf
         ],
         dest: 'lib/angularjs-all.js'

bower.json

@@ -24,7 +24,8 @@
     "ng-idle": "*",
     "inherits": "~0.0.1",
     "angular-load": "0.2.0",
-    "lodash": "~2.4.1"
+    "lodash": "~2.4.1",
+    "angular-gravatar": "*"
   },
   "resolutions": {
     "angular": "=1.2.19"

css/src/main.css

@@ -1077,6 +1077,10 @@ button.gray:focus,
   overflow: hidden;
 }
 
+.fi-trash.text-gray:hover {
+  color: #CA5649;
+}
+
 .photo-container {
   margin-right: 3px;
   display: inline-block;
@@ -1090,6 +1094,11 @@ button.gray:focus,
   text-align: center;
 }
 
+.photo-container.profile {
+  width: 80px;
+  height: 80px;
+}
+
 a:hover .photo-container  {
   background: #34495E;
   color: #fff;

js/app.js

@@ -23,6 +23,7 @@ var modules = [
   'monospaced.qrcode',
   'ngIdle',
   'gettext',
+  'ui.gravatar',
   'copayApp.filters',
   'copayApp.services',
   'copayApp.controllers',
@@ -44,6 +45,15 @@ copayApp.config(function($sceDelegateProvider) {
   ]);
 });
 
+angular.module('ui.gravatar').config([
+  'gravatarServiceProvider', function(gravatarServiceProvider) {
+    gravatarServiceProvider.defaults = {
+      size     : 35
+    };
+    // Use https endpoint
+    gravatarServiceProvider.secure = true;
+  }
+]);
 
 angular.module('copayApp.filters', []);
 angular.module('copayApp.services', []);

js/controllers/profile.js

@@ -1,5 +1,6 @@
 'use strict';
 angular.module('copayApp.controllers').controller('ProfileController', function($scope, $rootScope, $location, $modal, controllerUtils, backupService) {
+  $scope.username = $rootScope.iden.getName();
   $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
 
   $rootScope.title = 'Profile';

karma.conf.js

@@ -29,6 +29,8 @@ module.exports = function(config) {
       'lib/angular-foundation/mm-foundation.min.js',
       'lib/angular-foundation/mm-foundation-tpls.min.js',
       'lib/angular-load/angular-load.min.js',
+      'lib/angular-gravatar/build/md5.min.js',
+      'lib/angular-gravatar/build/angular-gravatar.min.js',
       'lib/angular-gettext/dist/angular-gettext.min.js',
       'lib/inherits/inherits.js',
       'lib/lodash/dist/lodash.js',

package.json

@@ -88,6 +88,7 @@
     "sinon": "^1.10.3",
     "socket.io-client": "^1.0.6",
     "travis-cov": "^0.2.5",
-    "uglifyify": "^1.2.3"
+    "uglifyify": "^1.2.3",
+        "angular-gravatar": "*"
   }
 }

views/includes/copayer.html

@@ -1,6 +1,6 @@
 <div ng-controller="CopayersController">
   <div class="copay-box" ng-repeat="copayer in copayersList()">
-    <span ng-include="'views/includes/photo.html'"></span>
+    <img gravatar-src="'{{copayer.nick}}'" gravatar-size="35">
     <div
       class="ellipsis"
       tooltip="ID: {{copayer.peerId}}"

views/includes/head.html

@@ -17,7 +17,9 @@
 <div class="menu" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"
   ng-click="hoverMenu = !hoverMenu">
   <a class="dropdown ellipsis text-gray" ng-class="{'hover': hoverMenu}">
-    <span ng-include="'views/includes/photo.html'"></span>
+    <div class="photo-container">
+      <img gravatar-src="'{{username}}'" gravatar-size="35">
+    </div>
     <span class="m15t">{{username}} </span>
     <i class="icon-arrow-down size-16 vm"></i> 
   </a>

views/profile.html

@@ -4,20 +4,34 @@
   <div class="row">
     <div class="large-12 columns">
       <div class="panel">
-        <h2><i class="fi-download m10r"></i> <span translate>Backup Profile</span></h2>
-        <p translate class="text-gray">It's important to backup your profile so that you can recover it in case of disaster. The backup will include all your profile's wallets</p>
-        <a translate class="button primary m0" ng-click="downloadProfileBackup()"
-          ng-show="!isSafari">Backup profile</a>
-        <a translate class="button primary m0" ng-click="viewProfileBackup()"
-          ng-show="isSafari && !hideViewProfileBackup">View profile backup</a>
-        <div ng-show="backupProfilePlainText">
-          <textarea rows="5">{{backupProfilePlainText}}</textarea>
-          <div class="show-for-large-up">
-            <span translate class="size-12">Copy to clipboard</span> <span
-              class="btn-copy" clip-copy="backupProfilePlainText"> </span>
+        <div class="row">
+          <div class="large-2 medium-2 columns text-center">
+            <a class="photo-container profile" href="https://en.gravatar.com/" ng-init="isHover=0" ng-mouseenter="isHover=1" ng-mouseleave="isHover=0" target="_blank">
+              <img ng-show="!isHover" gravatar-src="'{{username}}'" gravatar-size="80">
+              <img ng-show="isHover" src="img/change-avatar.png" with="80">
+            </a>
           </div>
-          <div class="hide-for-large-up">
-            <span translate class="size-12">Copy this text as it is in a safe place (notepad or email)</span>
+          <div class="large-7 medium-7 columns">
+            <h2>Backup Profile</h2>
+            <p translate class="text-gray">It's important to backup your profile so that you can recover it in case of disaster. The backup will include all your profile's wallets</p>
+          </div>
+          <div class="large-3 medium-3 columns">
+              <a translate class="button primary m0" ng-click="downloadProfileBackup()"
+                ng-show="!isSafari">Backup profile</a>
+              <a translate class="button primary m0" ng-click="viewProfileBackup()"
+                ng-show="isSafari && !hideViewProfileBackup">View profile backup</a>
+          </div>
+        </div>
+        <div class="row" ng-show="backupProfilePlainText">
+          <div class="large-12 columns">
+            <textarea rows="5">{{backupProfilePlainText}}</textarea>
+            <div class="show-for-large-up">
+              <span translate class="size-12">Copy to clipboard</span> <span
+                class="btn-copy" clip-copy="backupProfilePlainText"> </span>
+            </div>
+            <div class="hide-for-large-up">
+              <span translate class="size-12">Copy this text as it is in a safe place (notepad or email)</span>
+            </div>
           </div>
         </div>
       </div>
@@ -53,19 +67,17 @@
                 {{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}}
               </span>
             </td>
-            <td width="70" class="text-center">
+            <td width="90" class="text-center">
 
               <div ng-show="loading != item.id">
-                <a title="Download Backup" ng-click="downloadWalletBackup(item)"
-                  ng-show="!isSafari"><i class="fi-download"></i></a>
+                <a title="Download Backup" class="text-gray" ng-click="downloadWalletBackup(item)"
+                  ng-show="!isSafari"><i class="fi-download size-18 m10r"></i></a>
                 <a title="View Backup" ng-click="viewWalletBackup(item)"
                   ng-show="isSafari"><i class="fi-eye"></i></a> 
                 &nbsp; &nbsp;
-                <a title="Delete Wallet"  
-                  class="text-warning" 
-                  ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}" 
+                <a title="Delete Wallet" ng-really-message="{{'Are you sure you want to delete the wallet'}} {{(item.name || item.id)}}" 
                   ng-really-click="deleteWallet(item)"
-                  ng-show="loading != item.id"><i class="fi-trash"></i></a>
+                  ng-show="loading != item.id"><i class="fi-trash text-gray size-18"></i></a>
               </div>
               <span ng-show="loading == item.id"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
             </td>