Begin to draw side bar (add user logo)

assets/css/common/global.css

@@ -7,7 +7,7 @@
 /**
  * <a> elements
  */
-a {
+a, .cursor-pointer {
     cursor: pointer;
 }
 

assets/css/components/incognito/ui.css

@@ -5,6 +5,7 @@
  */
 
 #incognito-block {
+	z-index: 900;
 	position: fixed;
 	left: 10px;
 	bottom: 54px;

assets/js/common/functionsSchema.js

@@ -587,6 +587,19 @@ var ComunicWeb = {
 			},
 		},
 
+		/**
+		 * Sidebar
+		 */
+		sideBar: {
+
+			/**
+			 * Main sidebar file
+			 */
+			main: {
+				//TODO : implement
+			}
+		},
+
 		/**
 		 * Pages bottom
 		 */

assets/js/common/page.js

@@ -257,6 +257,9 @@ ComunicWeb.common.page = {
 
             //We load specific components for logged in users
             if(ComunicWeb.user.userLogin.getUserLoginState()){
+
+                // Sidebar
+                ComunicWeb.components.sideBar.main.show();
                 
                 //We load friends list (if user is logged in)
                 ComunicWeb.components.friends.bar.display();

assets/js/common/shorcuts.js

@@ -120,6 +120,18 @@ function getMultipleUsersInfos(usersID, afterGetUserInfos, forceRequest){
 	ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, afterGetUserInfos, forceRequest);
 }
 
+/**
+ * Get information about a single user
+ * 
+ * @param {int} userID User on which to make request
+ * @param {function} afterGetUserInfo What to do once users informations are available
+ * @param {Boolean} forceRequest Force the request to be made
+ * @return {Boolean} True for a success
+ */
+function getUserInfo(usersID, afterGetUserInfo, forceRequest){
+	ComunicWeb.user.userInfos.getUserInfos(usersID, afterGetUserInfo, forceRequest);
+}
+
 /**
  * Display message on browser console
  * 

assets/js/common/utils.js

@@ -43,6 +43,7 @@ function createElem(nodeType, appendTo){
  * @info {String} innerLang Specify the key of the lang to use to fill the element
  * @info {String} innerHTMLprefix Specify prefix to add at the begining of the content of the element
  * @info {boolean} disabled Set whether the field should be disabled or not (input only)
+ * @info {HTMLElement[]} children Children for the new object
  * @return {HTMLElement} The newly created element
  */
 function createElem2(infos){
@@ -122,6 +123,12 @@ function createElem2(infos){
 	if(infos.disabled)
 		infos.disabled = true;
 
+	if(infos.children){
+		infos.children.forEach(function(i){
+			newElem.appendChild(i);
+		});
+	}
+
 	//Return newly created element
 	return newElem;
 }

assets/js/components/sidebar/main.js

@@ -0,0 +1,71 @@
+/**
+ * Sidebar main script file
+ * 
+ * @author Pierre HUBERT
+ */
+ComunicWeb.components.sideBar.main = {
+	show: function() {
+
+		if(byId("main-sidebar")) return;
+
+		var sideBar = createElem2({
+			appendTo: byId("wrapper"),
+			type: "aside",
+			class: "main-sidebar"
+		});
+
+		var section = createElem2({
+			appendTo: sideBar,
+			type: "section",
+			class: "sidebar"
+		});
+
+		// User panel
+		var userPanel = createElem2({
+			appendTo: section,
+			type: "div",
+			class: "user-panel"
+		});
+
+		getUserInfo(userID(), function(info){
+			if(info.error)
+				return userPanel.innerHTML = "Error!";
+			
+			// User account image
+			createElem2({
+				appendTo: userPanel,
+				type: "div",
+				class: "pull-left image cursor-pointer",
+				internalHref: userIDorPath(info),
+				children: [
+					createElem2({
+						type: "img",
+						class: "img-circle",
+						src: info.accountImage
+					})
+				],
+			});
+
+			// User name
+			createElem2({
+				appendTo: userPanel,
+				type: "div",
+				class: "pull-left info",
+				children: [
+					createElem2({
+						type: "p",
+						class: "cursor-pointer",
+						innerHTML: userFullName(info),
+						internalHref: userIDorPath(info),
+					}),
+
+					createElem2({
+						type: "a",
+						innerHTML: "Settings",
+						internalHref: "settings",
+					}),
+				]
+			});
+		});
+	}
+}

system/config/dev.config.php

@@ -353,6 +353,9 @@ class Dev {
 			"js/components/menuBar/notAuthenticated.js",
 			"js/components/menuBar/authenticated.js",
 
+			// Main side bar
+			"js/components/sidebar/main.js",
+
 			//Bottom view
 			"js/components/bottom/links.js",
 			"js/components/bottom/main.js",