From 8732c40b36068e05272d71e2ef732a8e74e2883b Mon Sep 17 00:00:00 2001
From: Pierre <pierre@hubert.fr>
Date: Wed, 31 May 2017 19:05:19 +0200
Subject: [PATCH] Improved friend list appearance

---
 assets/css/components/friends/friendsBar.css | 35 ++++++++++++++++++
 assets/js/components/friends/friendsBar.js   | 39 ++++++++++++++++----
 corePage/config/dev.config.php               |  1 +
 3 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 assets/css/components/friends/friendsBar.css

diff --git a/assets/css/components/friends/friendsBar.css b/assets/css/components/friends/friendsBar.css
new file mode 100644
index 00000000..c24b5767
--- /dev/null
+++ b/assets/css/components/friends/friendsBar.css
@@ -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%;
+}
\ No newline at end of file
diff --git a/assets/js/components/friends/friendsBar.js b/assets/js/components/friends/friendsBar.js
index 46771788..61186b79 100644
--- a/assets/js/components/friends/friendsBar.js
+++ b/assets/js/components/friends/friendsBar.js
@@ -54,8 +54,9 @@ ComunicWeb.components.friends.bar = {
 	init: function(friendsListContainer){
 
 		//First, create the table container
-		var listFriendsElem = createElem("table", friendsListContainer);
-		listFriendsElem.className = "table table-condensed";
+		var listFriendsElemTable = createElem("table", friendsListContainer);
+		listFriendsElemTable.className = "table table-condensed";
+		var listFriendsElem = createElem("tbody", listFriendsElemTable);
 
 		//Refresh friends list
 		this.refresh(listFriendsElem);
@@ -72,9 +73,9 @@ ComunicWeb.components.friends.bar = {
 	 */
 	refresh: function(listFriendsElem){
 		//Refresh it
-		ComunicWeb.components.friends.list.refresh(function(list){
+		ComunicWeb.components.friends.list.refresh(function(friendsList){
 			//Check for error
-			if(!list){
+			if(!friendsList){
 				//Log information
 				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
 			usersID = {};
-			for(i in list){
+			for(i in friendsList){
 				//Extract user id
-				var processID = list[i].ID_friend;
+				var processID = friendsList[i].ID_friend;
 
 				usersID["user_"+processID] = processID;
 			}
 			
 			//Get users ID informations
-			ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, function(usersInfo){
-				console.log(usersInfo);
+			ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, function(usersInfos){
+				
+				//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]);
+				}
+
 			});
 		});
 	},
diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php
index b70edf64..7f392eb8 100644
--- a/corePage/config/dev.config.php
+++ b/corePage/config/dev.config.php
@@ -25,6 +25,7 @@ $config['CSSfiles'] = array(
     //Components stylesheets
     "%PATH_ASSETS%css/components/menuBar.css",
     "%PATH_ASSETS%css/components/searchForm.css",
+    "%PATH_ASSETS%css/components/friends/friendsBar.css",
 );
 
 //JS files to include (at the end of the page)