Added 'Send' button

client/css/style.css

@@ -685,7 +685,6 @@ button {
 	left: 0;
 	position: absolute;
 	right: 0px;
-	/*z-index: 1;*/
 }
 #form input {
 	border: 1px solid #cfdae1;
@@ -693,7 +692,7 @@ button {
 	border-radius: 2px;
 	height: 100%;
 	outline: none;
-	padding: 0 12px;
+	padding: 0 10px;
 	-webkit-appearance: none;
 	width: 100%;
 }
@@ -704,11 +703,29 @@ button {
 	right: 7px;
 	top: 6px;
 }
+#form .input {
+	left: 0;
+	height: 34px;
+	margin-right: 60px;
+	position: relative;
+}
 #form #submit {
-	height: 0;
+	background: #f4f4f4;
-	margin-left: -9999px;
+	background-image: linear-gradient(#f4f4f4, #ececec);
+	border: 1px solid #d7d7d7;
+	border-bottom-color: #b7b7b7;
+	border-radius: 2px;
+	font: 12px Lato, sans-serif;
+	color: #555;
+	height: 34px;
+	opacity: .5;
 	position: absolute;
-	width: 0;
+	right: 0;
+	transition: opacity .3s;
+	width: 54px;
+}
+#form #submit.enabled {
+	opacity: 1;
 }
 
 /**

client/index.html

@@ -235,8 +235,13 @@
 			</div>
 			<form id="form" action="">
 				<div class="inner">
-					<input id="submit" tabindex="-1" type="submit">
+					<!--<input id="submit" tabindex="-1" type="submit">-->
-					<input id="input" class="mousetrap">
+					<button id="submit" type="submit">
+						Send
+					</button>
+					<div class="input">
+						<input id="input" class="mousetrap">
+					</div>
 				</div>
 			</form>
 		</div>

client/js/shout.js

@@ -332,19 +332,28 @@ $(function() {
 		.history()
 		.tab(complete, {hint: false});
 
-	var form = $("#form").on("submit", function(e) {
+	var form = $("#form");
+	var submit = $("#submit");
+
+	form.on("submit", function(e) {
 		e.preventDefault();
 		var text = input.val();
 		input.val("");
 		if (text.indexOf("/clear") === 0) {
-			return clear();
+			clear();
+			return;
 		}
+		submit.removeClass("enabled");
 		socket.emit("input", {
 			target: chat.data("id"),
 			text: text
 		});
 	});
 
+	form.on("input", "#input", function() {
+		submit.toggleClass("enabled", $(this).val() != "");
+	});
+
 	chat.on("click", focus);
 	$(window).on("focus", focus);
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "A web IRC client",
-  "version": "0.31.6",
+  "version": "0.31.7",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {