Created conversation settings pane

assets/css/components/conversations/windows.css

@@ -14,3 +14,29 @@
 	text-align: justify;
 	margin-bottom: 0px;
 }
+
+
+/**
+ * Conversation settings pane 
+ */
+#conversationsElem .conversation-settings-pane {
+	-webkit-transform: translate(101%, 0);
+	-ms-transform: translate(101%, 0);
+	-o-transform: translate(101%, 0);
+	transform: translate(101%, 0);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	height: 250px;
+	width: 100%;
+	background: #d2d6de;
+	overflow: auto;
+	transition: transform .5s cubic-bezier(.22,.61,.36,1);
+}
+
+#conversationsElem .conversation-settings-pane.open {
+	-webkit-transform: translate(0, 0);
+	-ms-transform: translate(0, 0);
+	-o-transform: translate(0, 0);
+	transform: translate(0, 0);
+}

assets/js/common/utils.js

@@ -32,6 +32,7 @@ function createElem(nodeType, appendTo){
  * @info {HTMLElement} id The ID of the new element
  * @info {HTMLElement} title The title of the new element
  * @info {HTMLElement} src The src attribute of the new element
+ * @info {HTMLElement} type The type of the new element
  * @info {HTMLElement} innerHTML Specify the html content of the newly created element
  * @return {HTMLElement} The newly created element
  */
@@ -63,6 +64,10 @@ function createElem2(infos){
 	if(infos.src)
 		newElem.src = infos.src;
 
+	//Specify element type
+	if(infos.type)
+		newElem.type = infos.type;
+
 	//Specify node content
 	if(infos.innerHTML)
 		newElem.innerHTML = infos.innerHTML;

assets/js/components/conversations/chatWindows.js

@@ -155,6 +155,49 @@ ComunicWeb.components.conversations.chatWindows = {
 
 		//Success
 		return true;
-	}
+	},
+
+	/**
+	 * Show conversation settings (button + pane)
+	 * 
+	 * @param {Object} infos Informations about the conversation
+	 * @return {Boolean} True for a success
+	 */
+	showConversationSettings: function(infos){
+		console.log(infos);
+		//Create and display conversation settings button wheel
+		infos.box.settingsButton = createElem2({
+			type: "button",
+			insertBefore: infos.box.membersButton,
+			class: "btn btn-box-tool",
+			type: "button"
+		});
+
+		//Add button icon
+		createElem2({
+			type: "i",
+			appendTo: infos.box.settingsButton,
+			class: "fa fa-gear",
+		});
+
+		//Create settings pane
+		var settingsPane = createElem2({
+			type: "div",
+			appendTo: infos.box.boxBody,
+			class: "conversation-settings-pane",
+			innerHTML: "<p>Welcome to settings world</p>",
+		});
+
+		//Make the settings button lives
+		infos.box.settingsButton.onclick = function(){
+			if(settingsPane.className.includes(" open"))
+				settingsPane.className = settingsPane.className.replace(" open", ""); //Close the pane
+			else
+				settingsPane.className += " open"; //Open the pane
+		};
+
+		//Success
+		return true;
+	},
 
 }

assets/js/components/conversations/manager.js

@@ -184,6 +184,10 @@ ComunicWeb.components.conversations.manager = {
 
 				//Update conversation members informations
 				ComunicWeb.components.conversations.chatWindows.updateMembersList(conversationInfos);
+
+				//Display conversation settings pane
+				ComunicWeb.components.conversations.chatWindows.showConversationSettings(conversationInfos);
+
 			});
 		});