Use a textarea instead of an input for channel messages
This commit is contained in:
parent
51666b6db6
commit
2d3464aa04
@ -501,10 +501,11 @@ button {
|
||||
border-radius: 2px;
|
||||
bottom: 4px;
|
||||
left: 220px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.signed-out #main {
|
||||
@ -520,10 +521,9 @@ button {
|
||||
}
|
||||
|
||||
#windows {
|
||||
bottom: 48px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#windows label {
|
||||
@ -1172,32 +1172,23 @@ button {
|
||||
#form {
|
||||
background: #eee;
|
||||
border-top: 1px solid #ddd;
|
||||
bottom: 0;
|
||||
height: 48px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#form .inner {
|
||||
bottom: 7px;
|
||||
left: 7px;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 6px;
|
||||
min-height: 48px;
|
||||
flex: 0 0 auto;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#form .input {
|
||||
font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
left: 0;
|
||||
height: 34px;
|
||||
position: relative;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#form #nick {
|
||||
background: #f6f6f6;
|
||||
color: #666;
|
||||
position: absolute;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
margin: 5px;
|
||||
@ -1210,6 +1201,7 @@ button {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#form #nick:empty {
|
||||
@ -1221,24 +1213,27 @@ button {
|
||||
}
|
||||
|
||||
#form #input {
|
||||
border: 1px solid #ddd;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: inherit;
|
||||
border-radius: 2px;
|
||||
height: 100%;
|
||||
height: 18px;
|
||||
max-height: 90px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
padding: 0 34px 0 10px;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
flex: 1 0 auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#form #submit {
|
||||
color: #9ca5b4;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity .3s;
|
||||
width: 34px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#form #submit:before {
|
||||
|
@ -324,12 +324,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<form id="form" method="post" action="">
|
||||
<div class="inner">
|
||||
<div class="input">
|
||||
<label for="input" id="nick"></label>
|
||||
<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
|
||||
<input id="input" class="mousetrap">
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="input" id="nick"></label>
|
||||
<textarea id="input" class="mousetrap"></textarea>
|
||||
<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
15
client/js/libs/jquery/inputhistory.js
vendored
15
client/js/libs/jquery/inputhistory.js
vendored
@ -32,6 +32,10 @@
|
||||
var key = e.which;
|
||||
switch (key) {
|
||||
case 13: // Enter
|
||||
if (e.shiftKey) {
|
||||
return; // multiline input
|
||||
}
|
||||
|
||||
if (self.val() != "") {
|
||||
i = history.length;
|
||||
history[i - 1] = self.val();
|
||||
@ -53,6 +57,17 @@
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
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();
|
||||
if (key == 38 && i != 0) {
|
||||
i--;
|
||||
|
@ -621,6 +621,19 @@ $(function() {
|
||||
|
||||
var input = $("#input")
|
||||
.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});
|
||||
|
||||
var form = $("#form");
|
||||
@ -1133,10 +1146,7 @@ $(function() {
|
||||
}
|
||||
|
||||
function setNick(nick) {
|
||||
var width = $("#nick")
|
||||
.html(nick)
|
||||
.outerWidth(true);
|
||||
input.css("padding-left", width);
|
||||
$("#nick").text(nick);
|
||||
}
|
||||
|
||||
function move(array, old_index, new_index) {
|
||||
|
@ -145,7 +145,7 @@ body {
|
||||
border-color: #242a33;
|
||||
}
|
||||
|
||||
#form #input {
|
||||
#form .input {
|
||||
background-color: #2e3642;
|
||||
border-color: #242a33;
|
||||
color: #ccc;
|
||||
|
@ -172,7 +172,7 @@ body {
|
||||
border-color: #101010;
|
||||
}
|
||||
|
||||
#form #input {
|
||||
#form .input {
|
||||
background-color: #434443;
|
||||
border-color: #101010;
|
||||
color: #dcdccc;
|
||||
|
@ -300,6 +300,14 @@ Client.prototype.setPassword = function(hash, callback) {
|
||||
};
|
||||
|
||||
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 text = data.text;
|
||||
var target = client.find(data.target);
|
||||
|
Loading…
Reference in New Issue
Block a user