From 64359f1121964680d012033160d8212306ec8187 Mon Sep 17 00:00:00 2001 From: Charles Gould Date: Sat, 28 Jan 2017 14:10:23 -0500 Subject: [PATCH] Improve chat box --- server/src/main/resources/static/client.html | 3 +-- server/src/main/resources/static/client.js | 20 +++++++++------ server/src/main/resources/static/layout.css | 12 ++++++--- server/src/main/resources/static/style.css | 26 ++++++-------------- 4 files changed, 30 insertions(+), 31 deletions(-) diff --git a/server/src/main/resources/static/client.html b/server/src/main/resources/static/client.html index 202683a..7420010 100644 --- a/server/src/main/resources/static/client.html +++ b/server/src/main/resources/static/client.html @@ -3,7 +3,6 @@ Lingo | Client - @@ -60,7 +59,7 @@
Chat
- +
diff --git a/server/src/main/resources/static/client.js b/server/src/main/resources/static/client.js index 7ddd456..fa49b1a 100644 --- a/server/src/main/resources/static/client.js +++ b/server/src/main/resources/static/client.js @@ -148,9 +148,9 @@ function start() { function addKeydownListener() { canvasDiv.addEventListener('keydown', function(e) { if (e.which === KEYCODE_BACKSPACE) { + e.preventDefault(); myGuess = myGuess.substr(0, myGuess.length - 1); repaint(); - e.preventDefault(); } else if (e.which === KEYCODE_RETURN) { if (myGuess.length === 5) { @@ -181,15 +181,19 @@ function addKeypressListener() { function addChatMessageListener() { var messageInput = document.getElementById('messageInput'); - messageInput.addEventListener('keydown', function(e) { + messageInput.addEventListener('keypress', function(e) { if (e.which === KEYCODE_RETURN) { - var text = messageInput.value.trim(); - if (text.length === 0) { - return; + // Shift+Enter -> new line + if (!e.shiftKey) { + e.preventDefault(); + var text = messageInput.value.trim(); + if (text.length === 0) { + return; + } + messageInput.value = ''; + client.send('/app/chat', {}, text); + addChatMessage(myUsername, text); } - messageInput.value = ''; - client.send('/app/chat', {}, text); - addChatMessage(myUsername, text); } }); } diff --git a/server/src/main/resources/static/layout.css b/server/src/main/resources/static/layout.css index 8bc8daf..60d3efe 100644 --- a/server/src/main/resources/static/layout.css +++ b/server/src/main/resources/static/layout.css @@ -46,7 +46,7 @@ body { .body.row { top: 75px; - bottom: 50px; + bottom: 66px; } .body.row.nofooter { @@ -58,9 +58,8 @@ body { } .footer.row { - height: 50px; + height: 66px; bottom: 0; - line-height: 50px; } .chat.column { @@ -71,6 +70,13 @@ body { padding: 0 10px; } +.chat.column .footer { + border-top: 1px solid black; + box-sizing: border-box; + padding: 10px; + padding-bottom: 5px; +} + .lobby.column { width: 300px; left: 0; diff --git a/server/src/main/resources/static/style.css b/server/src/main/resources/static/style.css index 336b188..f2bf6e7 100644 --- a/server/src/main/resources/static/style.css +++ b/server/src/main/resources/static/style.css @@ -11,6 +11,7 @@ body { font-family: sans-serif; + background: linen; } button { @@ -35,10 +36,6 @@ button:hover:disabled { padding: 0 0.5em; } -.body { - background: linen -} - /* Chat pane */ .message-item { @@ -59,13 +56,14 @@ button:hover:disabled { #messageInput { width: 100%; - height: 50px; - font-size: 100%; - padding-left: 10px; + height: 100%; + font-size: 14px; background-color: linen; - border-color: black; - border-left: none; - border-width: 1px; + border-color: transparent; + border-style: none; + outline: none; + padding: 0; + resize: none; } #messageInput::-webkit-input-placeholder { @@ -158,11 +156,3 @@ button.list-group-item:hover { padding-bottom: 15px; text-align: center; } - -/* Waiting pane */ - -#waitingDiv h1 { - color: steelblue; - font-size: 28px; - text-align: center -}