nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Added code for chat card

Browse Source 
Chat card displayed only when at least one user selected
User box highlighted when selected
Hover color for user box added
This commit is contained in:
Rohan Sircar 2019-11-05 21:48:13 +05:30
parent 579f819254
commit 7775dd798e
3 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
chatto/src/main/resources/static/css/chat.css
View File

@ -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;

8
chatto/src/main/resources/static/js/chat.js
View File

@ -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";
})
}

20
chatto/src/main/resources/templates/chat.html
View File

@ -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>