diff options
| -rw-r--r-- | main/app/sprinkles/core/assets/SiteAssets/css/main.css | 5 | ||||
| -rw-r--r-- | main/app/sprinkles/core/templates/pages/partials/chat.js.twig | 22 |
2 files changed, 15 insertions, 12 deletions
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); } }); }; |