From 2d3464aa04980953b3067d93a5e2d228eeb9474c Mon Sep 17 00:00:00 2001 From: Maxime Poulin Date: Sat, 4 Jun 2016 22:48:41 -0400 Subject: [PATCH] Use a textarea instead of an input for channel messages --- client/css/style.css | 55 ++++++++++++--------------- client/index.html | 10 ++--- client/js/libs/jquery/inputhistory.js | 15 ++++++++ client/js/lounge.js | 18 +++++++-- client/themes/morning.css | 2 +- client/themes/zenburn.css | 2 +- src/client.js | 8 ++++ 7 files changed, 68 insertions(+), 42 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 0bffa4dc..9aead5b6 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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 { diff --git a/client/index.html b/client/index.html index 6648e9d7..070402b9 100644 --- a/client/index.html +++ b/client/index.html @@ -324,12 +324,10 @@
-
-
- - - -
+
+ + +
diff --git a/client/js/libs/jquery/inputhistory.js b/client/js/libs/jquery/inputhistory.js index 91029b9b..0cd118e1 100644 --- a/client/js/libs/jquery/inputhistory.js +++ b/client/js/libs/jquery/inputhistory.js @@ -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--; diff --git a/client/js/lounge.js b/client/js/lounge.js index c0e2103a..47a990a7 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -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) { diff --git a/client/themes/morning.css b/client/themes/morning.css index 600f364e..46267804 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -145,7 +145,7 @@ body { border-color: #242a33; } -#form #input { +#form .input { background-color: #2e3642; border-color: #242a33; color: #ccc; diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index 494d25a8..20a9f17d 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -172,7 +172,7 @@ body { border-color: #101010; } -#form #input { +#form .input { background-color: #434443; border-color: #101010; color: #dcdccc; diff --git a/src/client.js b/src/client.js index 9a588efe..9bb3ea62 100644 --- a/src/client.js +++ b/src/client.js @@ -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);