Improved friend list appearance

This commit is contained in:
Pierre 2017-05-31 19:05:19 +02:00
parent 38dadde06b
commit 8732c40b36
3 changed files with 67 additions and 8 deletions

View File

@ -0,0 +1,35 @@
/**
* Friends bar style sheet
*
* @author Pierre HUBERT
*/
#friendsList {
position: fixed;
right: 0px;
border-left: 1px black solid;
z-index: 999;
background-color: #fff3ff80;
top: 0px;
height: 100%;
padding: 10px;
padding-top: 50px;
width: 70px;
transition: width 1s;
}
#friendsList:hover {
width: 230px;
background-color: #ffffff;
}
#friendsList td {
vertical-align: middle;
}
#friendsList .account-image {
margin: auto 10px auto auto;
width: 40px;
height: 40px;
border-radius: 50%;
}

View File

@ -54,8 +54,9 @@ ComunicWeb.components.friends.bar = {
init: function(friendsListContainer){ init: function(friendsListContainer){
//First, create the table container //First, create the table container
var listFriendsElem = createElem("table", friendsListContainer); var listFriendsElemTable = createElem("table", friendsListContainer);
listFriendsElem.className = "table table-condensed"; listFriendsElemTable.className = "table table-condensed";
var listFriendsElem = createElem("tbody", listFriendsElemTable);
//Refresh friends list //Refresh friends list
this.refresh(listFriendsElem); this.refresh(listFriendsElem);
@ -72,9 +73,9 @@ ComunicWeb.components.friends.bar = {
*/ */
refresh: function(listFriendsElem){ refresh: function(listFriendsElem){
//Refresh it //Refresh it
ComunicWeb.components.friends.list.refresh(function(list){ ComunicWeb.components.friends.list.refresh(function(friendsList){
//Check for error //Check for error
if(!list){ if(!friendsList){
//Log information //Log information
ComunicWeb.debug.logMessage("ERROR : Can't refresh menubar without the latest list !"); ComunicWeb.debug.logMessage("ERROR : Can't refresh menubar without the latest list !");
@ -84,16 +85,38 @@ ComunicWeb.components.friends.bar = {
//Get users list to get information about them //Get users list to get information about them
usersID = {}; usersID = {};
for(i in list){ for(i in friendsList){
//Extract user id //Extract user id
var processID = list[i].ID_friend; var processID = friendsList[i].ID_friend;
usersID["user_"+processID] = processID; usersID["user_"+processID] = processID;
} }
//Get users ID informations //Get users ID informations
ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, function(usersInfo){ ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, function(usersInfos){
console.log(usersInfo);
//Show each friend
for(i in friendsList){
//Extract friend ID
var friendID = friendsList[i].ID_friend;
//Create a row
var friendRow = createElem("tr", listFriendsElem);
//Add user avatar
var imageRow = createElem("td", friendRow);
var imageElem = createElem("img", imageRow);
imageElem.src = usersInfos["user-"+friendID].accountImage;
imageElem.className = "account-image";
//Add user name
var nameRow = createElem("td", friendRow);
nameRow.innerHTML = usersInfos["user-"+friendID].firstName + " " + usersInfos["user-"+friendID].lastName;
console.log(usersInfos["user-"+friendID]);
}
}); });
}); });
}, },

View File

@ -25,6 +25,7 @@ $config['CSSfiles'] = array(
//Components stylesheets //Components stylesheets
"%PATH_ASSETS%css/components/menuBar.css", "%PATH_ASSETS%css/components/menuBar.css",
"%PATH_ASSETS%css/components/searchForm.css", "%PATH_ASSETS%css/components/searchForm.css",
"%PATH_ASSETS%css/components/friends/friendsBar.css",
); );
//JS files to include (at the end of the page) //JS files to include (at the end of the page)