Fix avatar in the user view

This commit is contained in:
Joseph Schorr 2015-04-03 12:34:52 -04:00
parent f67eeee8c8
commit 2d8237bd83
3 changed files with 17 additions and 12 deletions

View file

@ -4,7 +4,7 @@
<img ng-src="//www.gravatar.com/avatar/{{ data.hash }}?d=404&size={{ size }}"
ng-if="loadGravatar"
ng-show="hasGravatar"
ng-image-watch="imageCallback">
ng-image-watch="imageCallback(result)">
<span class="default-avatar" ng-if="!isLoading && !hasGravatar">
<span class="letter" ng-if="data.kind != 'team' || data.name != 'owners'">{{ data.name.charAt(0).toUpperCase() }}</span>
<span class="letter" ng-if="data.kind == 'team' && data.name == 'owners'">&Omega;</span>

View file

@ -1,17 +1,20 @@
/**
* Adds a ng-image-watch attribute, which is a callback invoked when the image is loaded or fails.
*/
angular.module('quay').directive('ngImageWatch', function () {
angular.module('quay').directive('ngImageWatch', function ($parse) {
return {
restrict: 'A',
link: function postLink($scope, $element, $attr) {
$element.bind('error', function() {
$scope.$eval($attr.ngImageWatch)(false);
});
compile: function($element, attr) {
var fn = $parse(attr['ngImageWatch']);
return function(scope, element) {
element.bind('error', function() {
fn(scope, {result: false});
});
$element.bind('load', function() {
$scope.$eval($attr.ngImageWatch)(true);
});
element.bind('load', function() {
fn(scope, {result: true});
});
}
}
};
});

View file

@ -12,7 +12,7 @@ angular.module('quay').directive('avatar', function () {
'data': '=data',
'size': '=size'
},
controller: function($scope, $element, AvatarService, Config, UIService) {
controller: function($scope, $element, AvatarService, Config, UIService, $timeout) {
$scope.AvatarService = AvatarService;
$scope.Config = Config;
$scope.isLoading = true;
@ -20,8 +20,10 @@ angular.module('quay').directive('avatar', function () {
$scope.loadGravatar = false;
$scope.imageCallback = function(r) {
$scope.isLoading = false;
$scope.hasGravatar = r;
$timeout(function() {
$scope.isLoading = false;
$scope.hasGravatar = r;
}, 1);
};
$scope.$watch('size', function(size) {