Show avatars in host and guest views

src/packages/collaboration/lib/guest-view.coffee

@@ -1,4 +1,5 @@
 {$$, View} = require 'space-pen'
+ParticipantView = require './participant-view'
 
 module.exports =
 class GuestView extends View
@@ -19,9 +20,9 @@ class GuestView extends View
 
   updateParticipants: (participants) ->
     @participants.empty()
-    for {email, id} in participants when id isnt @guestSession.getId()
-      @participants.append $$ ->
-        @div email
+    guestId = @guestSession.getId()
+    for participant in participants when participant.id isnt guestId
+      @participants.append(new ParticipantView(participant))
 
   toggle: ->
     if @hasParent()

src/packages/collaboration/lib/host-view.coffee

@@ -1,4 +1,5 @@
 {$$, View} = require 'space-pen'
+ParticipantView = require './participant-view'
 
 module.exports =
 class HostView extends View
@@ -31,9 +32,9 @@ class HostView extends View
 
   updateParticipants: (participants) ->
     @participants.empty()
-    for {email, id} in participants when id isnt @hostSession.getId()
-      @participants.append $$ ->
-        @div email
+    hostId = @hostSession.getId()
+    for participant in participants when participant.id isnt hostId
+      @participants.append(new ParticipantView(participant))
 
   toggle: ->
     if @hasParent()

src/packages/collaboration/lib/participant-view.coffee

@@ -0,0 +1,12 @@
+crypto = require 'crypto'
+{View} = require 'space-pen'
+
+module.exports =
+class ParticipantView extends View
+  @content: ->
+    @div class: 'participant', =>
+      @img class: 'avatar', outlet: 'avatar'
+
+  initialize: ({id, email}) ->
+    emailMd5 = crypto.createHash('md5').update(email).digest('hex')
+    @avatar.attr('src', "http://www.gravatar.com/avatar/#{emailMd5}?s=32")

src/packages/collaboration/stylesheets/collaboration.less

@@ -10,10 +10,14 @@
 
   .share {
     .mini-icon(notifications);
+    margin-bottom: 5px;
   }
 
   .guest {
     .mini-icon(watchers);
+    position: relative;
+    right: -2px;
+    margin-bottom: 5px;
     color: #96CBFE;
   }
 
@@ -24,4 +28,11 @@
       color: lighten(@runningColor, 15%);
     }
   }
+
+  .avatar {
+    border-radius: 3px;
+    height: 16px;
+    width: 16px;
+    margin: 2px;
+  }
 }