(js,html) Improve sgAvatarImage directive

UI/WebServerResources/js/Common/Gravatar.service.js

@@ -27,8 +27,10 @@
       }
       hash = email.md5();
 
+      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=404';
+      //return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=retro';
       // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=identicon';
-      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
+      // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
     };
   }
 

UI/WebServerResources/js/Common/sgAvatarImage.directive.js

@@ -15,19 +15,36 @@
   function sgAvatarImage() {
     return {
       restrict: 'AE',
-      replace: true,
       scope: {
         size: '@',
         email: '=sgEmail',
         src: '=sgSrc'
       },
       template: '<img ng-src="{{vm.url}}"/>',
+      link: link,
       bindToController: true,
       controller: 'sgAvatarImageController',
       controllerAs: 'vm'
     };
   }
 
+  function link(scope, element, attrs, controller) {
+    var el = element[0],
+        className = el.className,
+        imgElement = element.find('img'),
+        img = imgElement[0];
+
+    if (attrs.size) {
+      imgElement.attr('width', attrs.size);
+      imgElement.attr('height', attrs.size);
+    }
+
+    imgElement.bind('error', function() {
+      // Error while loading external link; insert a generic avatar
+      controller.insertGenericAvatar(img);
+    });
+  }
+
   /**
    * @ngInject
    */
@@ -36,7 +53,18 @@
     var vm = this;
 
     $scope.$watch('vm.email', function(email) {
-      if (email && !vm.url) {
+      var img = $element.find('img')[0];
+      if (!email && !vm.genericAvatar) {
+        // If no email is specified, insert a generic avatar
+        vm.insertGenericAvatar(img);
+      }
+      else if (email && !vm.url) {
+        if (vm.genericAvatar) {
+          // Remove generic avatar and restore visibility of image
+          vm.genericAvatar.parentNode.removeChild(vm.genericAvatar);
+          delete vm.genericAvatar;
+          img.classList.remove('ng-hide');
+        }
         vm.url = Gravatar(email, vm.size);
       }
     });
@@ -49,6 +77,17 @@
         }
       });
     }
+
+    vm.insertGenericAvatar = function(img) {
+      var avatar;
+
+      if (!vm.genericAvatar) {
+        avatar = document.createElement('md-icon');
+        avatar.className = 'material-icons icon-person';
+        img.classList.add('ng-hide');
+        vm.genericAvatar = img.parentNode.insertBefore(avatar, img);
+      }
+    };
   }
 
   angular

UI/WebServerResources/scss/components/chips/chips.scss

@@ -21,6 +21,20 @@ md-chips {
   width: (3 * $contact-chip-name-width);
 }
 
+// Adjust avatar size according to chips dimensions
+.md-contact-chips {
+  .md-chips {
+    .md-chip {
+      .md-contact-avatar {
+        md-icon {
+          height: ($chip-height * .75);
+          margin: ($chip-height * .25/2);
+        }
+      }
+    }
+  }
+}
+
 // In the autocompletion menu, don't limit the contact name to a fixed width
 // and show the email address right after it
 .md-contact-suggestion {

UI/WebServerResources/scss/components/list/list.scss

@@ -42,6 +42,7 @@ md-list-item {
 
 .md-tile-left,
 .md-tile-right {
+  display: block;
   border-radius: 100%;
   padding: $layout-gutter-width;
   width: $sg-md-grid-pitch + $baseline-grid;
@@ -149,17 +150,18 @@ div.md-tile-left {
 
 // Avatar placeholder
 // ------------------------------------
-.md-tile-left:before {
+.md-tile-left:before,
+.md-tile-left md-icon {
   font-family: 'Material Icons';
   font-size: 40px;
   color: rgba(0, 0, 0, 0.26);
 }
-.md-tile-left-card {
-  @extend .md-tile-left;
-  &:before {
-    content: "\e7fd"; // person
-  }
-}
+//.md-tile-left-card {
+//  @extend .md-tile-left;
+//  &:before {
+//    content: "\e7fd"; // person
+//  }
+//}
 .md-tile-left-list {
   @extend .md-tile-left;
   &:before {
@@ -201,9 +203,9 @@ div.md-tile-left {
 //  content: "\e7fd"; // person
 //}
 .sg-avatar {
-  @extend .md-tile-left-card;
-  margin-right: 0;
-  margin-left: 0;
+//  @extend .md-tile-left-card;
+//  margin-right: 0;
+//  margin-left: 0;
 }
 .sg-list-avatar {
   @extend .md-tile-left-list;