mirror of
				https://github.com/pierre42100/ComunicWeb
				synced 2025-11-04 04:04:20 +00:00 
			
		
		
		
	Improved friend list appearance
This commit is contained in:
		
							
								
								
									
										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)
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user