From 2ee63a230647060159f2b9cfb4891365c9d36c6b Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sun, 29 Apr 2018 21:51:27 +0200
Subject: Fixed border radius issure on chat messages

---
 .../sprinkles/core/assets/SiteAssets/css/main.css  |  5 ++---
 .../core/templates/pages/partials/chat.js.twig     | 22 +++++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

(limited to 'main')

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index af8ef6f..e8dd495 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -258,9 +258,8 @@ hr.ChatHeaderDivider {
     width: 100%;
 }
 
-.TypingIndicatorMessage .ChatMessage {
-    clear: left;
-    float: left;
+.TypingIndicatorMessage {
+    border-radius: 25px;
     background-color: #13223c;
     color: #a7a8a9;
 }
diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
index cb0af5a..d959b69 100644
--- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
+++ b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
@@ -49,15 +49,15 @@ function InitializeChatServer() {
 
         // GOT MESSAGE
         ChatSocket.onmessage = function (e) {
-            var TypingIndicatorMessage = $(".TypingIndicatorMessage");
-            var LastMessage = $(".ChatMessage:last");
+            var TypingIndicatorMessage = $(".TypingIndicatorMessage").parent();
+            var LastMessage = $(".MessageWrapper.Normal:last .ChatMessage");
             var MessageObject = JSON.parse(e.data);
             if (MessageObject.ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER
                 if (MessageObject.WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF
                     if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE
-                        ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
+                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
                     } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN
-                        ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
+                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
                         if (LastMessage.hasClass("AloneMessage")) {
                             LastMessage.removeClass("AloneMessage");
                             LastMessage.addClass("TopMessage");
@@ -72,9 +72,9 @@ function InitializeChatServer() {
                     });
                 } else if (MessageObject.WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER
                     if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE
-                        ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
+                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
                     } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN
-                        ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
+                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
                         if (LastMessage.hasClass("AloneMessage")) {
                             LastMessage.removeClass("AloneMessage");
                             LastMessage.addClass("TopMessage");
@@ -105,14 +105,14 @@ function InitializeChatServer() {
                         if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?)
                             // NOTHING
                         } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE
-                            ChatMessages.append("<div class='MessageWrapper TypingIndicatorMessage'><div class='ChatMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div></div>");
+                            ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage TypingIndicatorMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div></div>");
                             console.log("[SERVER REPORT] " + MessageObject.Username + " STARTED TYPING");
                         }
                     } else if (MessageObject.State === false) { // IF 'SOMEBODY' STOPPED TYPING
                         if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?)
                             // NOTHING
                         } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION
-                            TypingIndicatorMessage.fadeOut("slow");
+                            //TypingIndicatorMessage.fadeOut("fast");
                             TypingIndicatorMessage.remove();
                             console.log("[SERVER REPORT] " + MessageObject.Username + " STOPPED TYPING");
                         }
@@ -176,7 +176,11 @@ function InitializeChatServer() {
                 ChatSocket.send(JSON.stringify({ClientMessageType: "Message", Message: ChatTextInput.val()}));
                 ChatTextInput.val("");
                 ChatTextInput.val("");
-                sendTypingState(false); // USER USUALLY STOPS TYPING ON SENDING
+
+                // USER USUALLY STOPS TYPING ON SENDING -> CHANGE STATE TO FALSE
+                sendTypingState(false);
+                isTyping = false;
+                clearTimeout(typingTimer);
             }
         });
     };
-- 
cgit v1.2.3