Added profile image on onlineList

3 files changed, 24 insertions, 9 deletions

diff --git a/lib/realtime.js b/lib/realtime.js
index 2f648c11..ca9cecd8 100644
--- a/lib/realtime.js
+++ b/lib/realtime.js
@@ -348,6 +348,7 @@ function buildUserOutData(user) {
         id: user.id,
         login: user.login,
         userid: user.userid,
+        photo: user.photo,
         color: user.color,
         cursor: user.cursor,
         name: user.name,
@@ -361,24 +362,23 @@ function updateUserData(socket, user) {
     //retrieve user data from passport
     if (socket.request.user && socket.request.user.logged_in) {
         var profile = JSON.parse(socket.request.user.profile);
-        /*
         var photo = null;
         switch(profile.provider) {
             case "facebook":
-                console.log(profile);
+                photo = 'https://graph.facebook.com/' + profile.id + '/picture';
                 break;
             case "twitter":
-                photo = profile.photos[0];
+                photo = profile.photos[0].value;
                 break;
             case "github":
-                photo = profile.avatar_url;
+                photo = 'https://avatars.githubusercontent.com/u/' + profile.id + '?s=48';
                 break;
             case "dropbox":
-                //not image api provided
+                //no image api provided, use gravatar
+                photo = 'https://www.gravatar.com/avatar/' + md5(profile.emails[0].value);
                 break;
         }
         user.photo = photo;
-        */
         user.name = profile.displayName || profile.username;
         user.userid = socket.request.user._id;
         user.login = true;
diff --git a/public/css/index.css b/public/css/index.css
index e1d5745f..b78be36f 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -107,9 +107,16 @@ form,
     margin-top: 2px;
 }
 .ui-user-icon {
-    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    display: block;
+    border-radius: 3px;
     margin-top: 2px;
+    margin-bottom: 2px;
     margin-right: 5px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 .ui-user-status {
     margin-top: 5px;
diff --git a/public/js/index.js b/public/js/index.js
index 4d617adb..bf3a3ab2 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1112,7 +1112,7 @@ var options = {
     item: '<li class="ui-user-item">\
             <span class="id" style="display:none;"></span>\
             <a href="#">\
-                <span class="pull-left"><i class="fa fa-square ui-user-icon"></i></span><span class="ui-user-name name"></span><span class="pull-right"><i class="fa fa-circle ui-user-status"></i></span>\
+                <span class="pull-left"><i class="ui-user-icon"></i></span><span class="ui-user-name name"></span><span class="pull-right"><i class="fa fa-circle ui-user-status"></i></span>\
             </a>\
            </li>'
 };
@@ -1214,7 +1214,14 @@ function renderUserStatusList(list) {
         var item = items[j];
         var userstatus = $(item.elm).find('.ui-user-status');
         var usericon = $(item.elm).find('.ui-user-icon');
-        usericon.css('color', item.values().color);
+        if(item.values().login && item.values().photo) {
+            usericon.css('background-image', 'url(' + item.values().photo + ')');
+            usericon.css('box-shadow', '0px 0px 2px ' + item.values().color);
+            //add 1px more to right, make it feel aligned
+            usericon.css('margin-right', '6px');
+        } else {
+            usericon.css('background-color', item.values().color);
+        }
         userstatus.removeClass('ui-user-status-offline ui-user-status-online ui-user-status-idle');
         if (item.values().idle)
             userstatus.addClass('ui-user-status-idle');
@@ -1240,6 +1247,7 @@ function deduplicateOnlineUsers(list) {
                     //keep idle state if any of self client not idle
                     if (!user.idle) {
                         _onlineUsers[j].idle = user.idle;
+                        _onlineUsers[j].color = user.color;
                     }
                     found = true;
                     break;