cgould/lingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve chat box

Browse Source
This commit is contained in:
Charles Gould 2017-01-28 14:10:23 -05:00
parent cde596132c
commit 64359f1121
4 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
server/src/main/resources/static/client.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Lingo | Client</title> <title>Lingo | Client</title>
<link rel="stylesheet" href="cube-grid.css">
<link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
@ -60,7 +59,7 @@
<div class="header row">Chat</div> <div class="header row">Chat</div>
<div id="messageList" class="body row scroll-y"></div> <div id="messageList" class="body row scroll-y"></div>
<div class="footer row"> <div class="footer row">
<input id="messageInput" placeholder="Type here to chat..." /> <textarea id="messageInput" placeholder="Send a message" tabindex="2"></textarea>
</div> </div>
</div> </div>
</div> </div>

8
server/src/main/resources/static/client.js
View File

@ -148,9 +148,9 @@ function start() {
function addKeydownListener() { function addKeydownListener() {
canvasDiv.addEventListener('keydown', function(e) { canvasDiv.addEventListener('keydown', function(e) {
if (e.which === KEYCODE_BACKSPACE) { if (e.which === KEYCODE_BACKSPACE) {
e.preventDefault();
myGuess = myGuess.substr(0, myGuess.length - 1); myGuess = myGuess.substr(0, myGuess.length - 1);
repaint(); repaint();
e.preventDefault();
} }
else if (e.which === KEYCODE_RETURN) { else if (e.which === KEYCODE_RETURN) {
if (myGuess.length === 5) { if (myGuess.length === 5) {
@ -181,8 +181,11 @@ function addKeypressListener() {
function addChatMessageListener() { function addChatMessageListener() {
var messageInput = document.getElementById('messageInput'); var messageInput = document.getElementById('messageInput');
messageInput.addEventListener('keydown', function(e) { messageInput.addEventListener('keypress', function(e) {
if (e.which === KEYCODE_RETURN) { if (e.which === KEYCODE_RETURN) {
// Shift+Enter -> new line
if (!e.shiftKey) {
e.preventDefault();
var text = messageInput.value.trim(); var text = messageInput.value.trim();
if (text.length === 0) { if (text.length === 0) {
return; return;
@ -191,6 +194,7 @@ function addChatMessageListener() {
client.send('/app/chat', {}, text); client.send('/app/chat', {}, text);
addChatMessage(myUsername, text); addChatMessage(myUsername, text);
} }
}
}); });
} }

12
server/src/main/resources/static/layout.css
View File

@ -46,7 +46,7 @@ body {
.body.row { .body.row {
top: 75px; top: 75px;
bottom: 50px; bottom: 66px;
} }
.body.row.nofooter { .body.row.nofooter {
@ -58,9 +58,8 @@ body {
} }
.footer.row { .footer.row {
height: 50px; height: 66px;
bottom: 0; bottom: 0;
line-height: 50px;
} }
.chat.column { .chat.column {
@ -71,6 +70,13 @@ body {
padding: 0 10px; padding: 0 10px;
} }
.chat.column .footer {
border-top: 1px solid black;
box-sizing: border-box;
padding: 10px;
padding-bottom: 5px;
}
.lobby.column { .lobby.column {
width: 300px; width: 300px;
left: 0; left: 0;

26
server/src/main/resources/static/style.css
View File

@ -11,6 +11,7 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
background: linen;
} }
button { button {
@ -35,10 +36,6 @@ button:hover:disabled {
padding: 0 0.5em; padding: 0 0.5em;
} }
.body {
background: linen
}
/* Chat pane */ /* Chat pane */
.message-item { .message-item {
@ -59,13 +56,14 @@ button:hover:disabled {
#messageInput { #messageInput {
width: 100%; width: 100%;
height: 50px; height: 100%;
font-size: 100%; font-size: 14px;
padding-left: 10px;
background-color: linen; background-color: linen;
border-color: black; border-color: transparent;
border-left: none; border-style: none;
border-width: 1px; outline: none;
padding: 0;
resize: none;
} }
#messageInput::-webkit-input-placeholder { #messageInput::-webkit-input-placeholder {
@ -158,11 +156,3 @@ button.list-group-item:hover {
padding-bottom: 15px; padding-bottom: 15px;
text-align: center; text-align: center;
} }
/* Waiting pane */
#waitingDiv h1 {
color: steelblue;
font-size: 28px;
text-align: center
}