diff options
| -rw-r--r-- | lib/realtime.js | 12 | ||||
| -rw-r--r-- | public/css/index.css | 9 | ||||
| -rw-r--r-- | 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; |