From 99aa07ed5e8e40e6609d89af54b162073d6768b2 Mon Sep 17 00:00:00 2001
From: Pierre <pierre@hubert.fr>
Date: Mon, 26 Jun 2017 11:16:14 +0200
Subject: [PATCH] Improved conversation messages bubbles

---
 .../css/components/conversations/windows.css  |   5 +
 .../components/conversations/chatWindows.js   | 115 +++++++++++-------
 assets/js/components/conversations/service.js |   2 +-
 3 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css
index 28bf7184..d858c9c6 100644
--- a/assets/css/components/conversations/windows.css
+++ b/assets/css/components/conversations/windows.css
@@ -73,4 +73,9 @@
 
 #conversationsElem .direct-chat-text .emoji {
 	height: 1em;
+}
+
+#conversationsElem .direct-chat-text.not-first-message::before, 
+#conversationsElem .direct-chat-text.not-first-message::after {
+	display: none;
 }
\ No newline at end of file
diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js
index 5d861d19..190a50f0 100644
--- a/assets/js/components/conversations/chatWindows.js
+++ b/assets/js/components/conversations/chatWindows.js
@@ -705,46 +705,84 @@ ComunicWeb.components.conversations.chatWindows = {
 		//Check if it is the current user who sent the message
 		var userIsPoster = messageInfos.ID_user == userID();
 
-		//Create message element
-		var messageElem = createElem2({
-			appendTo: convInfos.box.messagesArea,
-			type: "div",
-			class: "direct-chat-msg " + (userIsPoster ? "right" : "")
-		});
+		//Check if this is the first message of the conversation or not
+		if(!convInfos.lastMessage){
+			//Initialize last message object
+			convInfos.lastMessage = {
+				userID: 0,
+				messageContainer: false,
+			}
+		}
 
-		//Display message header
-		var messageHeader = createElem2({
-			appendTo: messageElem,
-			type: "div",
-			class: "direct-chat-info clearfix"
-		});
+		//Check if message poster is the same as the last message
+		if(convInfos.lastMessage.userID == messageInfos.ID_user){
+			//Skip message container creation & user avatar rendering...
+			var messageContainer = convInfos.lastMessage.messageContainer;
+			var firstMessageFromUser = false;
+		}
+		else {
+			//Initialize user & message informations elements
+			var firstMessageFromUser = true;
 
-		//Add user name
-		var usernameElem = createElem2({
-			appendTo: messageHeader,
-			type: "span",
-			class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
-			innerHTML: "Loading",
-		});
+			//Create message element
+			var messageContainer = createElem2({
+				appendTo: convInfos.box.messagesArea,
+				type: "div",
+				class: "direct-chat-msg " + (userIsPoster ? "right" : "")
+			});
 
-		//Hide user name if it is the current user
-		if(userIsPoster)
-			usernameElem.style.display = "none";
+			//Display message header
+			var messageHeader = createElem2({
+				appendTo: messageContainer,
+				type: "div",
+				class: "direct-chat-info clearfix"
+			});
 
-		//Add user account image
-		var userAccountImage = createElem2({
-			appendTo: messageElem,
-			type: "img",
-			class: "direct-chat-img",
-			src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png",
-			alt: "User account image",
-		});
+			//Add user name
+			var usernameElem = createElem2({
+				appendTo: messageHeader,
+				type: "span",
+				class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
+				innerHTML: "Loading",
+			});
+
+			//Hide user name if it is the current user
+			if(userIsPoster)
+				usernameElem.style.display = "none";
+
+			//Add user account image
+			var userAccountImage = createElem2({
+				appendTo: messageContainer,
+				type: "img",
+				class: "direct-chat-img",
+				src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png",
+				alt: "User account image",
+			});
+
+			//Load user informations
+			if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
+
+				//Get informations
+				var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
+
+				//Replace poster name
+				usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
+				userAccountImage.src = userInfos.accountImage;
+			}
+
+			//Update conversation informations
+			convInfos.lastMessage = {
+				userID: messageInfos.ID_user,
+				messageContainer: messageContainer,
+			}
+		}
+		
 
 		//Add message
 		var messageTargetElem = createElem2({
-			appendTo: messageElem,
+			appendTo: messageContainer,
 			type: "div",
-			class: "direct-chat-text",
+			class: "direct-chat-text " + (!firstMessageFromUser ? "not-first-message" : ""),
 		});
 
 		//Add text message
@@ -764,23 +802,12 @@ ComunicWeb.components.conversations.chatWindows = {
 			});
 		}
 
-		//Load user informations
-		if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
-
-			//Get informations
-			var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
-
-			//Replace poster name
-			usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
-			userAccountImage.src = userInfos.accountImage;
-		}
-
 		//Parse emojies in text message
 		ComunicWeb.components.emoji.parser.parse({
 			element: textMessage,
 		});
 
-		//Enable (again) slimscrool
+		//Enable slimscrool
 		$(convInfos.box.messagesArea).slimscroll({
 			height: "250px",
 		});
diff --git a/assets/js/components/conversations/service.js b/assets/js/components/conversations/service.js
index d5ebc210..13fbff1b 100644
--- a/assets/js/components/conversations/service.js
+++ b/assets/js/components/conversations/service.js
@@ -138,7 +138,7 @@ ComunicWeb.components.conversations.service = {
 	 * @return {Boolean} True for a success
 	 */
 	callback: function(result){
-		console.log(result);
+		
 		//Check for errors
 		if(result.error){
 			ComunicWeb.debug.logMessage("Conversations Service : Couldn't update conversations !");