Chat design improvements

4 files changed, 83 insertions, 12 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 47a8141..f84bcf5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,6 +32,11 @@ body {
     height: 100%;

 }

 

+::-webkit-scrollbar {

+    width: 0;

+    background: transparent;

+}

+

 hr {

     width: 100%;

     display: block;

@@ -51,6 +56,7 @@ FLICKITY
 

 .carousel-cell {

     width: 100%;

+    height: calc(100vh - 75px);

     height: -moz-calc(100vh - 75px);

     height: -webkit-calc(100vh - 75px);

     height: -o-calc(100vh - 75px);

@@ -100,11 +106,16 @@ CHAT WINDOW
 **********/

 .ChatWindow {

     position: relative;

-    margin: 5px;

     height: 100%;

+    margin: 5px;

 }

 

 .ChatMessages {

+    overflow-y: scroll;

+    max-height: calc(100% - 135px); /* navbar + input + some margin*/

+    max-height: -moz-calc(100% - 135px);

+    max-height: -webkit-calc(100% - 135px);

+    max-height: -o-calc(100% - 135px);

     height: 100%;

     width: 100%;

 }

@@ -112,17 +123,28 @@ CHAT WINDOW
 .ChatMessage {

     display: block;

     position: relative;

-    border-radius: 25px;

-    min-width: 100px;

+    min-width: 50px;

     max-width: 50%;

     width: auto;

     height: auto;

     word-wrap: break-word;

+    text-align: center;

     padding: 10px;

 }

 

 .ServerChatMessage {

+    display: inline-block;

+    position: relative;

+    left: 50%;

+    transform: translateX(-50%);

     text-align: center;

+    padding: 5px;

+    -webkit-border-radius: 25px;

+    -moz-border-radius: 25px;

+    border-radius: 25px;

+    background: linear-gradient(to right, #ad4eff, #7c41f9);

+    color: #FFF;

+    font-size: x-small;

 }

 

 .MessageSent {

@@ -130,6 +152,30 @@ CHAT WINDOW
     background-color: #12213b;

 }

 

+.AloneMessage {

+    -webkit-border-radius: 25px;

+    -moz-border-radius: 25px;

+    border-radius: 25px;

+}

+

+.TopMessage {

+    -webkit-border-radius: 25px 25px 10px 10px;

+    -moz-border-radius: 25px 25px 10px 10px;

+    border-radius: 25px 25px 10px 10px;

+}

+

+.MiddleMessage {

+    -webkit-border-radius: 10px;

+    -moz-border-radius: 10px;

+    border-radius: 10px;

+}

+

+.BottomMessage {

+    -webkit-border-radius: 10px 10px 25px 25px;

+    -moz-border-radius: 10px 10px 25px 25px;

+    border-radius: 10px 10px 25px 25px;

+}

+

 .MessageReceived {

     float: left;

     background-color: #13223c;

diff --git a/assets/js/chat.js b/assets/js/chat.js
index bf13a32..a037115 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -35,27 +35,52 @@ var SubscribeTextInput = $("#SubscribeTextInput");
 var ChatMessages = $("#ChatMessages");

 

 var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');

+

 WebSocket.onopen = function () {

     console.log("Chat connection established!");

 };

+

 WebSocket.onmessage = function (e) {

+    var LastMessage = $(".ChatMessage:last");

     var MessageObject = JSON.parse(e.data);

     if (MessageObject.ServerMessage === false) {

         if (MessageObject.WasHimself === true) { //MessageObject.Username

-            ChatMessages.append("<div class='ChatMessage MessageSent'>" + MessageObject.Message + "</div><br><br>");

+            if (!LastMessage.hasClass("MessageSent")) {

+                ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage'>" + MessageObject.Message + "</div><br><br>");

+            } else if (LastMessage.hasClass("MessageSent")) {

+                if (LastMessage.hasClass("AloneMessage")) {

+                    LastMessage.removeClass("AloneMessage");

+                    LastMessage.addClass("TopMessage");

+                } else if (LastMessage.hasClass("BottomMessage")) {

+                    LastMessage.removeClass("BottomMessage");

+                    LastMessage.addClass("MiddleMessage");

+                }

+                ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage'>" + MessageObject.Message + "</div><br><br>");

+            }

         } else if (MessageObject.WasHimself === false) {

-            ChatMessages.append("<div class='ChatMessage MessageReceived'>" + MessageObject.Message + "</div><br><br>");

+            if (!LastMessage.hasClass("MessageReceived")) {

+                ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage'>" + MessageObject.Message + "</div><br><br>");

+            } else if (LastMessage.hasClass("MessageReceived")) {

+                if (LastMessage.hasClass("AloneMessage")) {

+                    LastMessage.removeClass("AloneMessage");

+                    LastMessage.addClass("TopMessage");

+                } else if (LastMessage.hasClass("BottomMessage")) {

+                    LastMessage.removeClass("BottomMessage");

+                    LastMessage.addClass("MiddleMessage");

+                }

+                ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage'>" + MessageObject.Message + "</div><br><br>");

+            }

         }

     } else if (MessageObject.ServerMessage === true) {

         if (MessageObject.ServerMessageType === "GroupJoin") {

             if (MessageObject.WasHimself === false) {

-                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span class='ServerChatMessage' data-lang='joined the group'></span>.</div><br>");

+                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='joined the group'></span>.</div><br><br>");

             } else if (MessageObject.WasHimself === true) {

                 ChatMessages.empty();

-                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br>");

+                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br><br>");

             }

         } else if (MessageObject.ServerMessageType === "UserDisconnect") {

-            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br>");

+            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br><br>");

         }

     }

     initiateLanguage(); // need further work (performance)

diff --git a/assets/js/language.js b/assets/js/language.js
index 9448ae3..abe6a65 100644
--- a/assets/js/language.js
+++ b/assets/js/language.js
@@ -20,7 +20,7 @@ function Translate() {
                         var key = elem.getAttribute(_self.attribute);

 

                         if (key != null) {

-                            console.log("Language initialized with language pack: " + _self.lng);

+                            //console.log("Language initialized with language pack: " + _self.lng);

                             elem.innerHTML = LngObject[_self.lng][key];

                         }

                     }

diff --git a/index.php b/index.php
index 8da157a..3836cf8 100644
--- a/index.php
+++ b/index.php
@@ -57,10 +57,10 @@
             <div class="MainInTab">

                 <div class="ChatWindow">

                     <div id="ChatMessages" class="ChatMessages">

-

+                        <!-- Messages -->

                     </div>

-                    <input title="ChatTextInput" id="ChatTextInput" class="ChatInput" type="text"/>

-                    <input title="SubscribeTextInput" id="SubscribeTextInput" class="ChatInput" type="text"/>

+                    <input title="Type your message..." id="ChatTextInput" class="ChatInput" type="text"/>

+                    <input title="Join a group..." id="SubscribeTextInput" class="ChatInput" type="text"/>

                 </div>

             </div>

         </div>