Added code for chat card

Chat card displayed only when at least one user selected
User box highlighted when selected
Hover color for user box added

chatto/src/main/resources/static/css/chat.css

@@ -7,6 +7,18 @@ html {
     background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
 }
 
+.user-box:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.active:hover {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.no-user-selected-h2 {
+    color: rgba(255, 255, 255, 0.4);
+}
+
 .chat {
     margin-top: auto;
     margin-bottom: auto;

chatto/src/main/resources/static/js/chat.js

@@ -57,8 +57,16 @@ for (let i = 0; i < userBoxes.length; i++) {
         let current = document.getElementsByClassName('user-box active');
         if (current.length > 0) {
             current[0].className = current[0].className.replace(" active", "");
+
         }
         // Add the active class to the current/clicked button
+        else if (current.length == 0) {
+            document.getElementById('no-user-selected').hidden = true;
+            document.getElementById('chat-card').hidden = false;
+        }
+        let words = this.innerText.split("\n");
+        // console.log(words);
+        document.getElementById('user-name-span').innerText = 'Chat with ' + words[1];
         this.className += " active";
     })
 }

chatto/src/main/resources/templates/chat.html

@@ -44,7 +44,7 @@
         </div>
     </header>
     <div class="container-fluid h-100">
-        <div class="row justify-content-center h-100">
+        <div class="row justify-content-center h-100 mt-3">
             <div class="col-md-4 col-xl-3 chat">
                 <div class="card mb-sm-3 mb-md-0 contacts_card">
                     <div class="card-header">
@@ -91,7 +91,16 @@
                 </div>
             </div>
             <div class="col-md-8 col-xl-6 chat">
-                <div class="card">
+                <div class="card" id="no-user-selected">
+                    <div class="m-auto">
+                        <div class="d-flex justify-content-center">
+                            <div class="align-self-center">
+                                <h2 class="display-4 no-user-selected-h2">Please select a user</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card" id="chat-card" hidden>
                     <div class="card-header msg_head">
                         <div class="d-flex bd-highlight">
                             <div class="img_cont">
@@ -99,8 +108,8 @@
                                 <span class="online_icon"></span>
                             </div>
                             <div class="user_info">
-                                <span>Chat with Khalid</span>
-                                <p>1767 Messages</p>
+                                <span id="user-name-span">Chat with Khalid</span>
+                                <p id="num-messages-p">1767 Messages</p>
                             </div>
                             <div class="video_cam">
                                 <span><i class="fas fa-video"></i></span>
@@ -133,8 +142,7 @@
                                 <span class="msg_time_send">8:55 AM, Today</span>
                             </div>
                             <div class="img_cont_msg">
-                                <img src=""
-                                    class="rounded-circle user_img_msg">
+                                <img src="" class="rounded-circle user_img_msg">
                             </div>
                         </div>
                     </div>