jay
/
chat-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made messages appear differently if you sent them or if someone else sent them.

This commit is contained in:
jsrobson10 2019-04-16 16:43:55 +10:00
parent 6a78b9d9e2
commit 245bf4e418
4 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,6 +7,7 @@
<script src="scripts/profiles.js"></script> <script src="scripts/profiles.js"></script>
<script src="scripts/communications.js"></script> <script src="scripts/communications.js"></script>
<script src="scripts/scripts.js"></script> <script src="scripts/scripts.js"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>

3
scripts/communications.js
View File

@ -486,6 +486,9 @@ function connect(profile, connection_id)
username: profile.username, username: profile.username,
password: profile.password password: profile.password
}); });
// Save the details
g.username = profile.username;
} }
}); });

22
scripts/profiles.js
View File

@ -161,9 +161,22 @@ function chat_switch_to(id)
// Loop over the messages // Loop over the messages
for(var i=0;i<connections[active_profile].chats[id].messages.length;i++) for(var i=0;i<connections[active_profile].chats[id].messages.length;i++)
{ {
// Set the sender class
var sender_class = "";
if(
// Is the message sent by this user
connections[active_profile].chats[id].messages[i].from ==
connections[active_profile].username
){
// Set the sender class
sender_class = " sender";
}
// Add some html data to the chat // Add some html data to the chat
chat_html += "\ chat_html += "\
<div class='chat-content-message'>\ <div class='chat-content-message"+sender_class+"'>\
<p><b>"+connections[active_profile].chats[id].messages[i].from+"</b></p>\
<p>"+connections[active_profile].chats[id].messages[i].message+"</p>\ <p>"+connections[active_profile].chats[id].messages[i].message+"</p>\
</div>\ </div>\
"; ";
@ -201,6 +214,13 @@ function chat_send()
// Clear the textarea // Clear the textarea
document.getElementById("chat-content-send-textarea").value = ""; document.getElementById("chat-content-send-textarea").value = "";
// Focus the text area really soon
setTimeout(function()
{
// Focus the text area
document.getElementById("chat-content-send-textarea").focus();
}, 10);
} }
function add_chat_menu() function add_chat_menu()

19
style.css
View File

@ -66,6 +66,10 @@
padding: 10px; padding: 10px;
} }
#chat-area {
padding: 0 120px;
}
#chat-content-send { #chat-content-send {
position: fixed; position: fixed;
left: 360px; left: 360px;
@ -74,3 +78,18 @@
padding: 12px; padding: 12px;
background-color: #CCD; background-color: #CCD;
} }
.chat-content-message {
padding: 8px;
margin: 8px;
border-radius: 8px;
background-color: #CCD;
display: inline-block;
float: left;
width: 80%;
}
.chat-content-message.sender {
background-color: #AAE;
float: right;
}