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>
<meta charset="UTF-8">
<title>Lingo | Client</title>
<link rel="stylesheet" href="cube-grid.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="style.css">
<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 id="messageList" class="body row scroll-y"></div>
<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>

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

@ -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,8 +181,11 @@ function addKeypressListener() {
function addChatMessageListener() {
var messageInput = document.getElementById('messageInput');
messageInput.addEventListener('keydown', function(e) {
messageInput.addEventListener('keypress', function(e) {
if (e.which === KEYCODE_RETURN) {
// Shift+Enter -> new line
if (!e.shiftKey) {
e.preventDefault();
var text = messageInput.value.trim();
if (text.length === 0) {
return;
@ -191,6 +194,7 @@ function addChatMessageListener() {
client.send('/app/chat', {}, text);
addChatMessage(myUsername, text);
}
}
});
}

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

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

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

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