mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-26 05:49:22 +00:00
Improved friend list appearance
This commit is contained in:
parent
38dadde06b
commit
8732c40b36
35
assets/css/components/friends/friendsBar.css
Normal file
35
assets/css/components/friends/friendsBar.css
Normal 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%;
|
||||||
|
}
|
@ -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]);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user