From 85c67212ad5f5a0d5ceb9104d4ed22d8e8e54457 Mon Sep 17 00:00:00 2001
From: Wu Cheng-Han
Date: Sat, 4 Jul 2015 22:19:09 +0800
Subject: Added profile image on onlineList
---
lib/realtime.js | 12 ++++++------
public/css/index.css | 9 ++++++++-
public/js/index.js | 12 ++++++++++--
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;
--
cgit v1.2.3