Use a textarea instead of an input for channel messages

This commit is contained in:
Maxime Poulin 2016-06-04 22:48:41 -04:00
parent 51666b6db6
commit 2d3464aa04
No known key found for this signature in database
GPG Key ID: CB63C36252F40D4B
7 changed files with 68 additions and 42 deletions

View File

@ -501,10 +501,11 @@ button {
border-radius: 2px; border-radius: 2px;
bottom: 4px; bottom: 4px;
left: 220px; left: 220px;
overflow: hidden;
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 4px; top: 4px;
display: flex;
flex-direction: column;
} }
.signed-out #main { .signed-out #main {
@ -520,10 +521,9 @@ button {
} }
#windows { #windows {
bottom: 48px; position: relative;
position: absolute; overflow: hidden;
top: 0; flex: 1;
width: 100%;
} }
#windows label { #windows label {
@ -1172,32 +1172,23 @@ button {
#form { #form {
background: #eee; background: #eee;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
bottom: 0; min-height: 48px;
height: 48px; flex: 0 0 auto;
left: 0; padding: 7px;
position: absolute;
right: 0;
}
#form .inner {
bottom: 7px;
left: 7px;
position: absolute;
right: 7px;
top: 6px;
} }
#form .input { #form .input {
font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace; font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
left: 0; border: 1px solid #ddd;
height: 34px; border-radius: 2px;
position: relative; background: white;
display: flex;
align-items: flex-end;
} }
#form #nick { #form #nick {
background: #f6f6f6; background: #f6f6f6;
color: #666; color: #666;
position: absolute;
font: inherit; font: inherit;
font-size: 11px; font-size: 11px;
margin: 5px; margin: 5px;
@ -1210,6 +1201,7 @@ button {
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
flex: 0 0 auto;
} }
#form #nick:empty { #form #nick:empty {
@ -1221,24 +1213,27 @@ button {
} }
#form #input { #form #input {
border: 1px solid #ddd; background: transparent;
border: none;
font: inherit; font: inherit;
border-radius: 2px; height: 18px;
height: 100%; max-height: 90px;
line-height: 1.5;
outline: none; outline: none;
padding: 0 34px 0 10px; margin: 5px;
-webkit-appearance: none; padding: 0;
width: 100%; resize: none;
flex: 1 0 auto;
align-self: center;
} }
#form #submit { #form #submit {
color: #9ca5b4; color: #9ca5b4;
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
position: absolute;
right: 0;
transition: opacity .3s; transition: opacity .3s;
width: 34px; width: 34px;
flex: 0 0 auto;
} }
#form #submit:before { #form #submit:before {

View File

@ -324,12 +324,10 @@
</div> </div>
</div> </div>
<form id="form" method="post" action=""> <form id="form" method="post" action="">
<div class="inner"> <div class="input">
<div class="input"> <label for="input" id="nick"></label>
<label for="input" id="nick"></label> <textarea id="input" class="mousetrap"></textarea>
<button id="submit" type="submit" title="Send" aria-label="Send message"></button> <button id="submit" type="submit" title="Send" aria-label="Send message"></button>
<input id="input" class="mousetrap">
</div>
</div> </div>
</form> </form>
</div> </div>

View File

@ -32,6 +32,10 @@
var key = e.which; var key = e.which;
switch (key) { switch (key) {
case 13: // Enter case 13: // Enter
if (e.shiftKey) {
return; // multiline input
}
if (self.val() != "") { if (self.val() != "") {
i = history.length; i = history.length;
history[i - 1] = self.val(); history[i - 1] = self.val();
@ -53,6 +57,17 @@
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
break; break;
} }
if (
this.value.indexOf("\n") >= 0
&&
(key === 38 && this.selectionStart > 0)
||
(key === 40 && this.selectionStart < this.value.length))
{
return; // don't prevent default
}
history[i] = self.val(); history[i] = self.val();
if (key == 38 && i != 0) { if (key == 38 && i != 0) {
i--; i--;

View File

@ -621,6 +621,19 @@ $(function() {
var input = $("#input") var input = $("#input")
.history() .history()
.on("input keyup", function() {
var style = window.getComputedStyle(this);
this.style.height = "0px";
this.offsetHeight; // force reflow
this.style.height = Math.min(
Math.round(window.innerHeight - 100), // prevent overflow
this.scrollHeight
+ Math.round(parseFloat(style.borderTopWidth) || 0)
+ Math.round(parseFloat(style.borderBottomWidth) || 0)
) + "px";
$("#chat .chan.active .chat").trigger("msg.sticky"); // fix growing
})
.tab(complete, {hint: false}); .tab(complete, {hint: false});
var form = $("#form"); var form = $("#form");
@ -1133,10 +1146,7 @@ $(function() {
} }
function setNick(nick) { function setNick(nick) {
var width = $("#nick") $("#nick").text(nick);
.html(nick)
.outerWidth(true);
input.css("padding-left", width);
} }
function move(array, old_index, new_index) { function move(array, old_index, new_index) {

View File

@ -145,7 +145,7 @@ body {
border-color: #242a33; border-color: #242a33;
} }
#form #input { #form .input {
background-color: #2e3642; background-color: #2e3642;
border-color: #242a33; border-color: #242a33;
color: #ccc; color: #ccc;

View File

@ -172,7 +172,7 @@ body {
border-color: #101010; border-color: #101010;
} }
#form #input { #form .input {
background-color: #434443; background-color: #434443;
border-color: #101010; border-color: #101010;
color: #dcdccc; color: #dcdccc;

View File

@ -300,6 +300,14 @@ Client.prototype.setPassword = function(hash, callback) {
}; };
Client.prototype.input = function(data) { Client.prototype.input = function(data) {
var client = this;
data.text.split("\n").forEach(function(line) {
data.text = line;
client.inputLine(data);
});
};
Client.prototype.inputLine = function(data) {
var client = this; var client = this;
var text = data.text; var text = data.text;
var target = client.find(data.target); var target = client.find(data.target);