From 1836257f0be561110a01da26e4beffd9cf73cf24 Mon Sep 17 00:00:00 2001
From: Corey Johnson & Kevin Sawicki <cj+kevin@github.com>
Date: Wed, 10 Jul 2013 09:56:57 -0700
Subject: [PATCH] Show avatars in host and guest views

---
 src/packages/collaboration/lib/guest-view.coffee     |  7 ++++---
 src/packages/collaboration/lib/host-view.coffee      |  7 ++++---
 .../collaboration/lib/participant-view.coffee        | 12 ++++++++++++
 .../collaboration/stylesheets/collaboration.less     | 11 +++++++++++
 4 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 src/packages/collaboration/lib/participant-view.coffee

diff --git a/src/packages/collaboration/lib/guest-view.coffee b/src/packages/collaboration/lib/guest-view.coffee
index f499ab9da..ab10b3c77 100644
--- a/src/packages/collaboration/lib/guest-view.coffee
+++ b/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()
diff --git a/src/packages/collaboration/lib/host-view.coffee b/src/packages/collaboration/lib/host-view.coffee
index b2a59d327..31dae50a2 100644
--- a/src/packages/collaboration/lib/host-view.coffee
+++ b/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()
diff --git a/src/packages/collaboration/lib/participant-view.coffee b/src/packages/collaboration/lib/participant-view.coffee
new file mode 100644
index 000000000..e5eec1caf
--- /dev/null
+++ b/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")
diff --git a/src/packages/collaboration/stylesheets/collaboration.less b/src/packages/collaboration/stylesheets/collaboration.less
index 810ef6336..4ed3b3037 100644
--- a/src/packages/collaboration/stylesheets/collaboration.less
+++ b/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;
+  }
 }