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,
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;

9
public/css/index.css
View file

@ -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;

12
public/js/index.js
View file

@ -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;