Merge pull request #437 from travis-ci/lp-avatar

make a user-avatar component

app/components/user-avatar.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  tagName: 'span',
+  classNames: ['avatar'],
+
+  userInitials: function() {
+    var name = this.get('name');
+    var arr = name.split(' ');
+    var initials;
+
+    if (arr.length >= 2) {
+      initials = arr[0].split('')[0] + arr[1].split('')[0];
+    } else {
+      initials = arr[0].split('')[0];
+    }
+      return initials.toUpperCase();
+  }.property('userInitials')
+
+});

app/controllers/top.js

@@ -11,12 +11,6 @@ export default Ember.Controller.extend({
     return this.get('user.name') || this.get('user.login');
   }.property('user.login', 'user.name'),
 
-  gravatarUrl: function() {
-    if (this.get('user.gravatarId')) {
-      return location.protocol + "//www.gravatar.com/avatar/" + (this.get('user.gravatarId')) + "?s=36&d=mm";
-    }
-  }.property('user.gravatarId'),
-
   defineTowerColor(broadcastArray) {
     if (!broadcastArray) {
       return '';

app/models/user.js

@@ -3,6 +3,7 @@ import Model from 'travis/models/model';
 import config from 'travis/config/environment';
 import attr from 'ember-data/attr';
 import { hasMany, belongsTo } from 'ember-data/relationships';
+import {gravatarImage} from '../utils/urls';
 
 export default Model.extend({
   ajax: Ember.inject.service(),
@@ -132,5 +133,9 @@ export default Model.extend({
     user = JSON.parse(this.get('sessionStorage').getItem('travis.user'));
     user[name.underscore()] = this.get(name);
     return this.get('sessionStorage').setItem('travis.user', JSON.stringify(user));
-  }
+  },
+
+  avatarUrl: function() {
+    return gravatarImage(this.get('email'), 36);
+  }.property('email')
 });

app/styles/app/layouts/profile.sass

@@ -87,14 +87,10 @@
 
   .media-elem
     width: 14%
-    img
-      width: 2.6rem
-      height: 2.6rem
-      border-radius: 50%
   .media-body
     width: 86%
   p
-    margin: 0
+    margin: .1em 0
   ul
     @include resetul
   li
@@ -261,4 +257,4 @@ p.profile-user-last
 
 #unadministerable-hooks
   p
-    margin-top: 2em
+    margin-top: 2em

app/styles/app/modules/avatar.sass

@@ -1,43 +1,58 @@
-%avatar
-  position: relative
-  background-color: #a0a0a0
-  border-radius: 50%
-  overflow: hidden
-  &:before
-    content: ""
-    display: block
-    width: 40%
-    height: 40%
-    border-radius: 50%
-    background: $cream-light
-    position: absolute
-    top: 20%
-    margin: auto
-    left: 0
-    right: 0
+=absoluteCenter
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  margin: auto
 
-  &:after
-    content: ""
-    display: block
-    width: 66%
-    height: 70%
-    border-radius: 50%
-    background: $cream-light
-    position: absolute
-    top: 55%
-    margin: auto
-    left: 0
-    right: 0
-
-.default-avatar--profile
-  @extend %avatar
-  width: 2.6rem
-  height: 2.6rem
-
-.default-avatar--topbar
-  @extend %avatar
-  width: 2.7rem
-  height: 2.7rem
+.avatar
   display: inline-block
+  width: 2.3em
+  height: 2.3em
+  position: relative
   vertical-align: middle
-  margin-left: 0.3em
+  border-radius: 50%
+  background-color: white
+  overflow: hidden
+
+  .pseudo-avatar
+    +absoluteCenter
+    border: 1px solid $grey
+    border-radius: 50%
+    background: white
+    z-index: 1
+    &:after
+      content: attr(data-initials)
+      +absoluteCenter
+      color: $grey
+      font-weight: 600
+      text-align: center
+      font-size: 1.4em
+      line-height: 1.6
+
+  .real-avatar
+    +absoluteCenter
+    z-index: 2
+    border-radius: 50%
+
+.profile
+  .avatar
+    margin-left: 1em
+    top: -3px
+
+.commit-author
+  .avatar
+    width: 20px
+    height: 20px
+  .pseudo-avatar:after
+    font-size: .7em
+    line-height: 1.7
+
+.row-committer
+  .avatar
+    width: 18px
+    height: 18px
+  .pseudo-avatar:after
+    font-size: .7em
+    line-height: 1.6

app/styles/app/modules/build-header.sass

@@ -75,11 +75,6 @@
 
 .commit-author
   margin: 1rem 0 .7rem
-  img
-    width: 20px
-    height: 20px
-    margin-right: .5em
-    border-radius: 50%
 
 .commit-description
   margin: 1rem 0

app/styles/app/modules/navigation.sass

@@ -32,14 +32,9 @@ $nav-line-height: 35px
     text-align: right
     line-height: $top-height
     float: right
-    img
-      border-radius: 50%
-      width: 2.7rem
-      height: 2.7rem
-      margin-left: 1rem
     @media #{$medium-up}
       margin-right: 0
-      
+
 
 .navigation-anchor
   display: block

app/templates/components/branch-row.hbs

@@ -1,5 +1,5 @@
 <div class="two-line fade-out">
-  <div class="row-name"> 
+  <div class="row-name">
     <h2 class="row-item">{{status-icon status=build.last_build.state}}
     <span class="label-align">{{build.name}}</span></h2>
   </div>

app/templates/components/build-header.hbs

@@ -38,11 +38,13 @@
     </ul>
     <p class="commit-author">
       {{#if commit.authorName}}
-        <img src={{commit.authorAvatarUrlOrGravatar}} alt="author avatar" aria-hidden="true"><span class="label-align">{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}</span>
+        {{user-avatar url=commit.authorAvatarUrlOrGravatar name=commit.authorName}}
+        <span class="label-align">{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}</span>
       {{/if}}
       {{#unless commit.authorIsCommitter}}
         {{#if commit.committerName}}
-          <img src={{commit.committerAvatarUrlOrGravatar}} alt="comitter avatar" aria-hidden="true"><span class="label-align">{{commit.committerName}} committed</span>
+          {{user-avatar url=commit.committerAvatarUrlOrGravatar name=commit.committerName}}
+          <span class="label-align">{{commit.committerName}} committed</span>
         {{/if}}
       {{/unless}}
     </p>

app/templates/components/builds-item.hbs

@@ -20,7 +20,7 @@
     {{/unless}}
   </div>
   <div class="row-item row-committer">
-    <img class="avatar" src={{build.commit.authorAvatarUrlOrGravatar}} alt="{{build.commit.authorName}} avatar">
+    {{user-avatar url=build.commit.authorAvatarUrlOrGravatar name=build.commit.authorName}}
     <span class="label-align">{{build.commit.authorName}}</span>
   </div>
 </div>

app/templates/components/org-item.hbs

@@ -1,9 +1,5 @@
 <div class="media-elem">
-  {{#if avatarUrl}}
-    <img src={{avatarUrl}} alt="{{name}} avatar">
-  {{else}}
-    <div class="default-avatar--profile"></div>
-  {{/if}}
+  {{user-avatar url=account.avatarUrl name=name}}
 </div>
 <div class="media-body">
   {{#link-to "account" account.login}}
@@ -12,7 +8,7 @@
   {{/link-to}}
 
   {{#if isUser}}
-    <p class="profile-user-last">Token: 
+    <p class="profile-user-last">Token:
     {{#if tokenIsVisible}}
       <strong>{{auth.currentUser.token}}</strong>
     {{/if}}

app/templates/components/user-avatar.hbs

@@ -0,0 +1,4 @@
+<span class="pseudo-avatar" aria-hidden="true" data-initials="{{userInitials}}"></span>
+{{#if url}}
+<img class="real-avatar" src="{{url}}" alt="avatar">
+{{/if}}

app/templates/top.hbs

@@ -56,8 +56,9 @@
           <button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
         {{/if}}
         {{#if auth.signedIn}}
-          {{#link-to "profile" class="navigation-anchor signed-in"}}{{userName}}
-          {{#if gravatarUrl }}<img src={{gravatarUrl}} />{{else}}<div class="default-avatar--topbar"></div>{{/if}}
+          {{#link-to "profile" class="navigation-anchor signed-in"}}
+            {{userName}}
+            {{user-avatar url=user.avatarUrl name=user.fullName}}
           {{/link-to}}
         {{/if}}
         {{#if auth.signingIn}}

app/utils/urls.js

@@ -59,9 +59,7 @@ email = function(email) {
 };
 
 gravatarImage = function(email, size) {
-  var avatarDefaultUrl;
-  avatarDefaultUrl = 'https://travis-ci.org/images/ui/default-avatar.png';
-  return "https://www.gravatar.com/avatar/" + (md5(email)) + "?s=" + size + "&d=" + (encodeURIComponent(avatarDefaultUrl));
+    return "https://www.gravatar.com/avatar/" + (md5(email)) + "?s=" + size + "&d=blank";
 };
 
 export { plainTextLog, githubPullRequest, githubCommit, githubRepo, githubWatchers, githubNetwork, githubAdmin, statusImage, ccXml, email, gravatarImage };

tests/unit/components/builds-item-test.js

@@ -1,7 +1,7 @@
 // Generated by CoffeeScript 1.10.0
 import { test, moduleForComponent } from 'ember-qunit';
 moduleForComponent('builds-item', {
-  needs: ['helper:format-sha', 'helper:format-duration', 'helper:format-time', 'helper:format-message', 'helper:pretty-date', 'component:status-icon', 'component:request-icon']
+    needs: ['helper:format-sha', 'helper:format-duration', 'helper:format-time', 'helper:format-message', 'helper:pretty-date', 'component:status-icon', 'component:request-icon', 'component:user-avatar']
 });
 
 test('it renders', function(assert) {

tests/unit/components/user-avatar-test.js

@@ -0,0 +1,21 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('user-avatar', 'UserAvatarComponent | Unit', {
+
+});
+
+test('it renders', function() {
+
+  var name = "Hello Test";
+  var url = "https://someurl.com/someimage.jpg";
+
+  var component = this.subject({url: url, name: name});
+  this.append();
+
+  ok(component.$().hasClass('avatar'), 'component should have right class');
+  equal(component.$('.pseudo-avatar').data('initials'), 'HT', 'initials should be correct');
+  equal(component.$('.real-avatar').attr('src'), 'https://someurl.com/someimage.jpg', 'avatar should be right');
+
+});

tests/unit/models/commit-test.js

@@ -16,8 +16,8 @@ test('calculation of avatar urls via Gravatar', function() {
       committerAvatarUrl: null
     });
   });
-  equal(model.get('authorAvatarUrlOrGravatar'), 'https://www.gravatar.com/avatar/5c1e6d6e64e12aca17657581a48005d1?s=40&d=https%3A%2F%2Ftravis-ci.org%2Fimages%2Fui%2Fdefault-avatar.png', 'correctly sets gravatar image');
-  return equal(model.get('committerAvatarUrlOrGravatar'), 'https://www.gravatar.com/avatar/5c1e6d6e64e12aca17657581a48005d1?s=40&d=https%3A%2F%2Ftravis-ci.org%2Fimages%2Fui%2Fdefault-avatar.png', 'correctly sets gravatar image');
+  equal(model.get('authorAvatarUrlOrGravatar'), 'https://www.gravatar.com/avatar/5c1e6d6e64e12aca17657581a48005d1?s=40&d=blank', 'correctly sets gravatar image');
+  return equal(model.get('committerAvatarUrlOrGravatar'), 'https://www.gravatar.com/avatar/5c1e6d6e64e12aca17657581a48005d1?s=40&d=blank', 'correctly sets gravatar image');
 });
 
 test('calculation of avatar urls via overriding parameter', function() {