Merge pull request #2368 from coreos-inc/entity-search-avatar

Display avatars in entity search autocomplete

static/css/directives/ui/entity-search.css

@@ -55,4 +55,53 @@
 
 .entity-search-element .menuitem .avatar {
   margin-right: 4px;
+}
+
+.entity-mini-listing {
+  margin: 2px;
+  white-space: nowrap !important;
+  position: relative;
+}
+
+.entity-mini-listing i {
+  margin-right: 8px;
+  position: relative;
+}
+
+.entity-mini-listing i.fa {
+  width: 20px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 16px;
+  color: #444;
+}
+
+.entity-mini-listing i.fa-exclamation-triangle {
+  position: absolute;
+  right: -14px;
+  top: 4px;
+  color: #c09853;
+}
+
+.entity-mini-listing i.fa.ci-robot {
+  position: relative;
+  top: -2px;
+}
+
+.entity-mini-listing i.fa .avatar-image {
+  position: absolute;
+  top: -2px;
+  left: 0px;
+}
+
+.entity-mini-listing .warning {
+  margin-top: 6px;
+  font-size: 10px;
+  padding: 4px;
+}
+
+.entity-mini-listing span.title {
+  color: #aaa;
+  font-size: 12px;
+  display: block;
 }

static/css/quay.css

@@ -1135,35 +1135,6 @@ form input.ng-valid.ng-dirty,
   text-overflow: ellipsis;
 }
 
-.entity-mini-listing {
-  margin: 2px;
-  white-space: nowrap !important;
-  position: relative;
-}
-
-.entity-mini-listing i {
-  margin-right: 8px;
-}
-
-.entity-mini-listing i.fa-exclamation-triangle {
-  position: absolute;
-  right: -14px;
-  top: 4px;
-  color: #c09853;
-}
-
-.entity-mini-listing .warning {
-  margin-top: 6px;
-  font-size: 10px;
-  padding: 4px;
-}
-
-.entity-mini-listing span.title {
-  color: #aaa;
-  font-size: 12px;
-  display: block;
-}
-
 .editable {
   position: relative;
 }

static/js/directives/ui/entity-search.js

@@ -43,7 +43,7 @@ angular.module('quay').directive('entitySearch', function () {
       // True if the menu should pull right.
       'pullRight': '@pullRight'
     },
-    controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, Config) {
+    controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, AvatarService, Config) {
       $scope.lazyLoading = true;
 
       $scope.teams = null;
@@ -286,16 +286,16 @@ angular.module('quay').directive('entitySearch', function () {
             },
             'suggestion': function (datum) {
               template = '<div class="entity-mini-listing">';
-              if (datum.entity.kind == 'user' && !datum.entity.is_robot) {
+              if ((datum.entity.kind == 'user' && !datum.entity.is_robot) || (datum.entity.kind == 'org')) {
-                template += '<i class="fa fa-user fa-lg"></i>';
+                template += '<i class="fa fa-user fa-lg"><img class="avatar-image" src="' +
+                            AvatarService.getAvatar(datum.entity.avatar.hash, 20, 'blank') +
+                            '"></i>';
               } else if (datum.entity.kind == 'external') {
                 template += '<i class="fa fa-user fa-lg"></i>';
               } else if (datum.entity.kind == 'user' && datum.entity.is_robot) {
                 template += '<i class="fa ci-robot fa-lg"></i>';
               } else if (datum.entity.kind == 'team') {
                 template += '<i class="fa fa-group fa-lg"></i>';
-              } else if (datum.entity.kind == 'org') {
-                template += '<i class="fa">' + AvatarService.getAvatar(datum.entity.avatar, 16) + '</i>';
               }
 
               template += '<span class="name">' + datum.value + '</span>';

static/js/services/avatar-service.js

@@ -6,7 +6,7 @@ angular.module('quay').factory('AvatarService', ['Config', '$sanitize', 'md5',
   var avatarService = {};
   var cache = {};
 
-  avatarService.getAvatar = function(hash, opt_size) {
+  avatarService.getAvatar = function(hash, opt_size, opt_notfound) {
     var size = opt_size || 16;
     switch (Config['AVATAR_KIND']) {
       case 'local':
@@ -14,7 +14,8 @@ angular.module('quay').factory('AvatarService', ['Config', '$sanitize', 'md5',
         break;
 
       case 'gravatar':
-        return '//www.gravatar.com/avatar/' + hash + '?d=404&size=' + size;
+        var notfound = opt_notfound || '404';
+        return '//www.gravatar.com/avatar/' + hash + '?d=' + notfound + '&size=' + size;
         break;
     }
   };