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

improved chat UI

master
Rohan Sircar 5 years ago
parent
3692608d8f
commit
dacf0f90dc
3 changed files with 475 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 265
      chatto/src/main/resources/static/css/chat.css
  2. 74
      chatto/src/main/resources/static/js/chat.js
  3. 138
      chatto/src/main/resources/templates/chat.html

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

@ -0,0 +1,265 @@
body,
html {
height: 100%;
margin: 0;
background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
}
.chat {
margin-top: auto;
margin-bottom: auto;
}
.card {
height: 500px;
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.4) !important;
}
.contacts_body {
padding: 0.75rem 0 !important;
overflow-y: auto;
white-space: nowrap;
}
.msg_card_body {
overflow-y: auto;
}
.card-header {
border-radius: 15px 15px 0 0 !important;
border-bottom: 0 !important;
}
.card-footer {
border-radius: 0 0 15px 15px !important;
border-top: 0 !important;
}
.container {
align-content: center;
}
.search {
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
}
.search:focus {
box-shadow: none !important;
outline: 0px !important;
}
.type_msg {
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
height: 60px !important;
overflow-y: auto;
}
.type_msg:focus {
box-shadow: none !important;
outline: 0px !important;
}
.attach_btn {
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.send_btn {
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.search_btn {
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.contacts {
list-style: none;
padding: 0;
}
.contacts li {
width: 100% !important;
padding: 5px 10px;
margin-bottom: 15px !important;
}
.active {
background-color: rgba(0, 0, 0, 0.3);
}
.user_img {
height: 70px;
width: 70px;
border: 1.5px solid #f5f6fa;
}
.user_img_msg {
height: 40px;
width: 40px;
border: 1.5px solid #f5f6fa;
}
.img_cont {
position: relative;
height: 70px;
width: 70px;
}
.img_cont_msg {
height: 40px;
width: 40px;
}
.online_icon {
position: absolute;
height: 15px;
width: 15px;
background-color: #4cd137;
border-radius: 50%;
bottom: 0.2em;
right: 0.4em;
border: 1.5px solid white;
}
.offline {
background-color: #c23616 !important;
}
.user_info {
margin-top: auto;
margin-bottom: auto;
margin-left: 15px;
}
.user_info span {
font-size: 20px;
color: white;
}
.user_info p {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
}
.video_cam {
margin-left: 50px;
margin-top: 5px;
}
.video_cam span {
color: white;
font-size: 20px;
cursor: pointer;
margin-right: 20px;
}
.msg_container {
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
border-radius: 25px;
background-color: #82ccdd;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
}
.msg_container_send {
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
border-radius: 25px;
background-color: #78e08f;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
}
.msg_time {
position: absolute;
left: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.msg_time_send {
position: absolute;
right: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.msg_head {
position: relative;
}
#action_menu_btn {
position: absolute;
right: 10px;
top: 10px;
color: white;
cursor: pointer;
font-size: 20px;
}
.action_menu {
z-index: 1;
position: absolute;
padding: 15px 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 15px;
top: 30px;
right: 15px;
display: none;
}
.action_menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.action_menu ul li {
width: 100%;
padding: 10px 15px;
margin-bottom: 5px;
}
.action_menu ul li i {
padding-right: 10px;
}
.action_menu ul li:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.2);
}
@media(max-width: 576px) {
.contacts_card {
margin-bottom: 15px !important;
}
}

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

@ -27,12 +27,22 @@ var username = sessionStorage.getItem('username');
var password = sessionStorage.getItem('password');
var authToken = 'Basic ' + btoa(username + ":" + password);
var iterations = 100000;
var source = document.getElementById("msg_container_template").innerHTML;
var msgContainerTemplate = Handlebars.compile(source);
var source = document.getElementById("msg_container_send_template").innerHTML;
var msgContainerSendTemplate = Handlebars.compile(source);
var chatAreaNew = document.getElementById('chat_area_new');
// var lastMessageTimeStamp;
// console.log(authToken);
// 'Basic ' + btoa("hmm" + ":" + "hmm")
Handlebars.registerHelper('avatar', function() {
return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
});
// var user;
@ -202,11 +212,13 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
console.log(this.value);
if (sessionStorage.getItem(this.value) == null) {
chatTextArea.textContent = '';
chatAreaNew.innerHTML = '';
getAllMessages(this.value)
.then(json => {
console.log(json);
let i = 0;
let messageLog = [];
let messageLogNew = [];
let lastMessageTimeStamp;
// console.log("Json length = " + json.length);
//
@ -226,6 +238,7 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
let localDate = new Date(utcDate);
let messageLine = sprintf('%s %s: %s ', localDate, obj.fromUser, message);
// localDate.``
// console.log('localDate = ' + localDate);
console.log(messageLine);
@ -235,9 +248,22 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
chatTextArea.scrollTop = chatTextArea.scrollHeight;
// console.log('Message log = ' + messageLog);
let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() };
let msgContainer;
if (obj.fromUser == username) {
msgContainer = msgContainerSendTemplate(context);
} else {
msgContainer = msgContainerTemplate(context);
}
messageLogNew.push(JSON.stringify(context));
$(chatAreaNew).append(msgContainer);
});
sessionStorage.setItem(this.value, JSON.stringify(messageLog));
sessionStorage.setItem(this.value + 'new', JSON.stringify(messageLogNew));
// console.log()
// sessionStorage.clear();
console.log('Last message time = ' + lastMessageTimeStamp);
sessionStorage.setItem(this.value + '-time', lastMessageTimeStamp);
@ -250,6 +276,7 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
console.log("Stored messages = " + sessionStorage.getItem(this.value));
let storedMessages = JSON.parse(sessionStorage.getItem(this.value));
let storedMessagesNew = JSON.parse(sessionStorage.getItem(this.value + 'new'));
let lastMessageTime = sessionStorage.getItem(this.value + '-time');
console.log("last message time stamp = " + lastMessageTime);
if (lastMessageTime != null) {
@ -275,19 +302,56 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
chatTextArea.scrollTop = chatTextArea.scrollHeight;
storedMessages.push(messageLine);
let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() };
let msgContainer;
if (obj.fromUser == username) {
msgContainer = msgContainerSendTemplate(context);
} else {
msgContainer = msgContainerTemplate(context);
}
storedMessagesNew.push(JSON.stringify(context));
$(chatAreaNew).append(msgContainer);
})
sessionStorage.setItem(this.value + '-time', lastMessageTimeStamp);
sessionStorage.setItem(this.value, JSON.stringify(storedMessages));
sessionStorage.setItem(this.value+'new', JSON.stringify(storedMessagesNew));
console.log("this value stored" + sessionStorage.getItem(this.value))
console.log("last message time stamp = " + lastMessageTimeStamp);
console.log(sessionStorage.getItem(this.value + '-time'));
}
chatTextArea.textContent = '';
chatAreaNew.innerHTML = '';
console.log("Stored messages 2 = " + storedMessages);
storedMessages.forEach(function(messageLine) {
chatTextArea.append(messageLine + '\n');
chatTextArea.scrollTop = chatTextArea.scrollHeight;
// let context = {message: messageLine};
// let msgContainer;
// if(obj.fromUser == username)
// {
// msgContainer = msgContainerSendTemplate(context);
// }
// else{
// msgContainer = msgContainerTemplate(context);
// }
// $(chatAreaNew).append(msgContainer);
})
storedMessagesNew.forEach(function(contextString) {
let context = JSON.parse(contextString);
let msgContainer;
if (context.fromUser == username) {
msgContainer = msgContainerSendTemplate(context);
} else {
msgContainer = msgContainerTemplate(context);
}
$(chatAreaNew).append(msgContainer);
})
@ -310,4 +374,10 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
});
handleChatForm();
handleChatForm();
$(document).ready(function() {
$('#action_menu_btn').click(function() {
$('.action_menu').toggle();
});
});

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

@ -11,6 +11,9 @@
<title id="pageTitle">Chat</title>
</div>
<link rel="stylesheet" th:href="@{/css/chat.css}" href="../static/css/chat.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->
@ -40,10 +43,121 @@
</div>
</div>
</header>
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-md-4 col-xl-3 chat">
<div class="card mb-sm-3 mb-md-0 contacts_card">
<div class="card-header">
<div class="input-group">
<input type="text" placeholder="Search..." name="" class="form-control search">
<div class="input-group-prepend">
<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
<div class="card-body contacts_body">
<ui class="contacts">
<li class="active">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Khalid</span>
<p>Kalid is online</p>
</div>
</div>
</li>
</ui>
<ui class="contacts">
<th:block th:each="userName: ${userNames}">
<li>
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span th:text="${userName}">Khalid</span>
<p th:text="${userName}">Kalid is online</p>
</div>
</div>
</li>
</th:block>
</ui>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-8 col-xl-6 chat">
<div class="card">
<div class="card-header msg_head">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Chat with Khalid</span>
<p>1767 Messages</p>
</div>
<div class="video_cam">
<span><i class="fas fa-video"></i></span>
<span><i class="fas fa-phone"></i></span>
</div>
</div>
<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
<div class="action_menu">
<ul>
<li><i class="fas fa-user-circle"></i> View profile</li>
<li><i class="fas fa-users"></i> Add to close friends</li>
<li><i class="fas fa-plus"></i> Add to group</li>
<li><i class="fas fa-ban"></i> Block</li>
</ul>
</div>
</div>
<div class="card-body msg_card_body" id="chat_area_new">
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
</div>
<div class="msg_container">
Hi, how are you samim?
<span class="msg_time">8:40 AM, Today</span>
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_container_send">
Hi Khalid i am good tnx how about you?
<span class="msg_time_send">8:55 AM, Today</span>
</div>
<div class="img_cont_msg">
<img src=""
class="rounded-circle user_img_msg">
</div>
</div>
</div>
<div class="card-footer">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
</div>
<textarea name="" class="form-control type_msg" placeholder="Type your message..."></textarea>
<div class="input-group-append">
<span class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-sm">
<h4 class="display-4 text-center py-2">Chat</h4>
<div class="card text-white bg-primary mb-3 card-form rounded mx-auto">
@ -97,7 +211,31 @@
</div>
</div>
</section>
<template id="msg_container_template">
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
</div>
<div class="msg_container">
{{{message}}}
<span class="msg_time">{{time}}</span>
</div>
</div>
</template>
<template id="msg_container_send_template">
<div class="d-flex justify-content-end mb-4">
<div class="msg_container_send">
{{{message}}}
<span class="msg_time_send">{{time}}</span>
</div>
<!-- <div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img_msg">
</div> -->
{{{avatar}}}
</div>
</template>
</body>
<script th:src="@{js/chat.js}" type="text/javascript"></script>

Write Preview
Loading…
Cancel
Save