depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added profile image on onlineList

Browse source
This commit is contained in:
Wu Cheng-Han 2015-07-04 22:19:09 +08:00
parent 01685c255f
commit 85c67212ad
3 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
lib/realtime.js
View file

@ -348,6 +348,7 @@ function buildUserOutData(user) {
id: user.id, id: user.id,
login: user.login, login: user.login,
userid: user.userid, userid: user.userid,
photo: user.photo,
color: user.color, color: user.color,
cursor: user.cursor, cursor: user.cursor,
name: user.name, name: user.name,
@ -361,24 +362,23 @@ function updateUserData(socket, user) {
//retrieve user data from passport //retrieve user data from passport
if (socket.request.user && socket.request.user.logged_in) { if (socket.request.user && socket.request.user.logged_in) {
var profile = JSON.parse(socket.request.user.profile); var profile = JSON.parse(socket.request.user.profile);
/*
var photo = null; var photo = null;
switch(profile.provider) { switch(profile.provider) {
case "facebook": case "facebook":
console.log(profile); photo = 'https://graph.facebook.com/' + profile.id + '/picture';
break; break;
case "twitter": case "twitter":
photo = profile.photos[0]; photo = profile.photos[0].value;
break; break;
case "github": case "github":
photo = profile.avatar_url; photo = 'https://avatars.githubusercontent.com/u/' + profile.id + '?s=48';
break; break;
case "dropbox": case "dropbox":
//not image api provided //no image api provided, use gravatar
photo = 'https://www.gravatar.com/avatar/' + md5(profile.emails[0].value);
break; break;
} }
user.photo = photo; user.photo = photo;
*/
user.name = profile.displayName || profile.username; user.name = profile.displayName || profile.username;
user.userid = socket.request.user._id; user.userid = socket.request.user._id;
user.login = true; user.login = true;

9
public/css/index.css
View file

@ -107,9 +107,16 @@ form,
margin-top: 2px; margin-top: 2px;
} }
.ui-user-icon { .ui-user-icon {
font-size: 20px; width: 20px;
height: 20px;
display: block;
border-radius: 3px;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px;
margin-right: 5px; margin-right: 5px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
} }
.ui-user-status { .ui-user-status {
margin-top: 5px; margin-top: 5px;

12
public/js/index.js
View file

@ -1112,7 +1112,7 @@ var options = {
item: '<li class="ui-user-item">\ item: '<li class="ui-user-item">\
<span class="id" style="display:none;"></span>\ <span class="id" style="display:none;"></span>\
<a href="#">\ <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>\ </a>\
</li>' </li>'
}; };
@ -1214,7 +1214,14 @@ function renderUserStatusList(list) {
var item = items[j]; var item = items[j];
var userstatus = $(item.elm).find('.ui-user-status'); var userstatus = $(item.elm).find('.ui-user-status');
var usericon = $(item.elm).find('.ui-user-icon'); 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'); userstatus.removeClass('ui-user-status-offline ui-user-status-online ui-user-status-idle');
if (item.values().idle) if (item.values().idle)
userstatus.addClass('ui-user-status-idle'); userstatus.addClass('ui-user-status-idle');
@ -1240,6 +1247,7 @@ function deduplicateOnlineUsers(list) {
//keep idle state if any of self client not idle //keep idle state if any of self client not idle
if (!user.idle) { if (!user.idle) {
_onlineUsers[j].idle = user.idle; _onlineUsers[j].idle = user.idle;
_onlineUsers[j].color = user.color;
} }
found = true; found = true;
break; break;