From a0030f1b12aa470bdcd10e07bd2df3783ab65c06 Mon Sep 17 00:00:00 2001
From: ian ramzy <ianramzy@gmail.com>
Date: Sun, 29 Mar 2020 16:05:22 -0400
Subject: [PATCH] styled chat, auto scroll, auto open on receive message

---
 public/chat.html    | 35 +++++++++--------------------
 public/css/chat.css | 54 +++++++++++++++++++++++++++------------------
 public/js/chat.js   | 30 +++++++++++++++++++------
 3 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/public/chat.html b/public/chat.html
index 228ce18..ed618c9 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -52,17 +52,17 @@
     <div id="chat-zone">
         <div class="chat-messages">
 
-            <div class="message-item customer">
-                <div class="message-bloc">
-                    <div class="message">Have you tried this chat?</div>
-                </div>
-            </div>
+<!--            <div class="message-item customer">-->
+<!--                <div class="message-bloc">-->
+<!--                    <div class="message">Have you tried this chat?</div>-->
+<!--                </div>-->
+<!--            </div>-->
 
-            <div class="message-item moderator">
-                <div class="message-bloc">
-                    <div class="message">Not yet! It looks awesome</div>
-                </div>
-            </div>
+<!--            <div class="message-item moderator">-->
+<!--                <div class="message-bloc">-->
+<!--                    <div class="message">Not yet! It looks awesome</div>-->
+<!--                </div>-->
+<!--            </div>-->
 
         </div>
     </div>
@@ -119,22 +119,7 @@
 <script src="../js/snackbar.js"></script>
 <script src="../js/chat.js"></script>
 <script>
-    $('#entire-chat').hide();
-    var input = document.querySelector('.compose textarea');
-    var socket = io();
 
-    input.addEventListener('keypress', function (event) {
-        if (event.keyCode === 13) {
-            event.preventDefault();
-            socket.emit('chat message', input.value);
-            $('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>');
-            input.value = '';
-        }
-    });
-
-    socket.on('chat message', function (msg) {
-        $('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
-    });
 
 </script>
 </body>
diff --git a/public/css/chat.css b/public/css/chat.css
index 075bb1d..f657b83 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -217,8 +217,7 @@ button:hover {
 
 /*simple chat*/
 
-#entire-chat{
-    /*border: blue 1px solid;*/
+#entire-chat {
     position: absolute;
     height: 100%;
     right: 0;
@@ -229,14 +228,20 @@ button:hover {
 .compose {
     width: 100%;
     height: 10%;
-    overflow: hidden;
+    overflow: scroll;
     font-family: "Heebo", sans-serif;
     position: absolute;
     bottom: 0;
     right: 0;
-    margin: 0;
+    /*margin: 0;*/
     /*z-index: 1;*/
     border-radius: 20px;
+    /*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
+    box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
+    margin: 20px;
+    box-sizing: border-box;
+    padding: 16px;
+
 }
 
 .compose textarea::placeholder {
@@ -249,27 +254,28 @@ button:hover {
     font-size: inherit;
     border: none;
     width: 100%;
-    height: 100%;
-    padding: 16px;
+    height: 80%;
+
     resize: none;
     outline: none;
     color: white;
-    background: #3a4150;
+    /*background: #3a4150;*/
+    background-color: rgb(22, 23, 26);
+    /*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
+
 
 }
 
 
 #chat-zone {
-    padding-top: 15px;
+    padding-top: 20px;
     box-sizing: border-box;
     /*border: red 1px solid;*/
-
     position: absolute;
-    height: 90%;
+    height: calc(90% - 20px);
     right: 0;
     width: 15vw;
-    background: 0 0;
-    overflow: auto;
+    overflow: scroll;
     -webkit-overflow-scrolling: touch;
     font-family: "Heebo", sans-serif;
 }
@@ -290,8 +296,9 @@ button:hover {
 }
 
 
+/*Your messages*/
 #chat-zone .message-item.moderator .message-bloc {
-    background-color: #3a4150;
+    background-color: rgb(22, 23, 26);
     color: #fff;
     position: relative;
     display: flex;
@@ -299,12 +306,19 @@ button:hover {
     justify-content: center;
     padding: 12px;
     max-width: 100%;
-    border-radius: 5px 20px 20px 5px;
+    border-radius: 20px 20px 20px 5px;
+    box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
+
 }
 
+
+/*Recieved messages*/
 #chat-zone .message-item.customer .message-bloc {
-    color: rgba(0, 0, 0, .87);
-    background-color: #e0e0e0;
+    background-color: rgb(42, 43, 47);
+    color: #fff;
+    border-radius: 20px 20px 5px 20px;
+    box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
+
 }
 
 #chat-zone .chat-messages .message-item.customer .message-bloc {
@@ -320,12 +334,8 @@ button:hover {
     max-width: 100%;
 }
 
-#chat-zone .message-item.customer .message-bloc {
-    border-radius: 20px 20px 5px 20px;
-}
-
-#chat-zone .message-item.moderator .message-bloc {
-    border-radius: 20px 20px 20px 5px;
+.message {
+    word-break: break-all;
 }
 
 /*simple chat*/
\ No newline at end of file
diff --git a/public/js/chat.js b/public/js/chat.js
index 6346fae..0f07298 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -508,7 +508,6 @@ function startSpeech() {
         logIt(e);
         logIt("error importing speech library");
         VideoChat.socket.emit('sendCaptions', "notusingchrome", roomHash);
-
         return
     }
 
@@ -562,12 +561,29 @@ function startSpeech() {
 }
 
 
+// Chat
+$('#entire-chat').hide();
+var input = document.querySelector('.compose textarea');
+var socket = VideoChat.socket;
+
+input.addEventListener('keypress', function (event) {
+    if (event.keyCode === 13) {
+        event.preventDefault();
+        socket.emit('chat message', input.value);
+        $('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>');
+        $('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
+        input.value = '';
+    }
+});
+
+socket.on('chat message', function (msg) {
+    $('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
+    $('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
+    $('#entire-chat').fadeIn();
+});
+// Chat
+
+
 // auto get media
 VideoChat.requestMediaStream();
 
-
-
-
-
-
-