Added settings page

client/css/style.css

@@ -37,6 +37,9 @@ li {
 	margin: 0;
 	padding: 0;
 }
+input {
+	outline: 0;
+}
 button {
 	border: none;
 	background: none;
@@ -107,6 +110,7 @@ button {
 	padding: 6px 10px 8px;
 	position: relative;
 	transition: background .1s, color 5s;
+	z-index: 2;
 }
 #sidebar a:hover {
 	background: rgba(255, 255, 255, 0.025);
@@ -247,7 +251,7 @@ button {
 	font-size: 18px;
 	font-weight: normal;
 }
-#windows input {
+#windows input[type=text] {
 	border: 2px solid #e9ecef;
 	border-radius: 4px;
 	font-size: 24px;
@@ -257,23 +261,57 @@ button {
 	-webkit-appearance: none;
 	width: 100%;
 }
-#windows input:hover,
-#windows input:focus {
+#windows input[type=text]:hover,
+#windows input[type=text]:focus {
 	border-color: #95a5a6;
 }
+#windows .window {
+	padding: 12% 0;
+	overflow: auto;
+}
 #settings {
 	
 }
-#sign-in {
-	padding: 12.5% 0;
-	overflow: auto;
+#settings h2 {
+	border-bottom: 1px solid #eee;
+	margin-bottom: 10px;
 }
-#sign-in h1,
-#sign-in h2 {
-	text-align: center;
+#settings section {
+	margin-top: 20px;
+}
+#settings button:hover {
+	opacity: 0.85;
+}
+#settings button:active {
+	opacity: 0.70;
+}
+#settings .options {
+	overflow: hidden;
+	margin: 0 -10px;
+}
+#settings .opt {
+	float: left;
+	margin: 10px 20px;
+	width: 180px;
+}
+#settings .opt input {
+	float: left;
+	margin-top: 4px;
+	margin-right: 10px;
+}
+#settings .opt.wide {
+	width: 400px;
+}
+#settings .octicon {
+	float: left;
+	margin-top: 3px;
+	margin-right: 8px;
+}
+#settings #notification {
+	color: #7f8c8d;
 }
 #sign-in form {
-	margin: 0 auto;
+	margin: 0 0;
 	max-width: 250px;
 }
 #sign-in-input {
@@ -432,6 +470,13 @@ button {
 	opacity: 1;
 	position: inherit;
 }
+#chat.hide-join .join,
+#chat.hide-nick .nick,
+#chat.hide-part .nick,
+#chat.hide-mode .mode,
+#chat.hide-quit .quit {
+	display: none;
+}
 #chat .toggle {
 	background: #f9f9f9;
 	border: 1px solid #eee;

client/index.html

@@ -24,12 +24,12 @@
 		<aside id="sidebar">
 			<section>
 				<h1>Shout</h1>
-				<a href="#settings">
+				<a id="settings-link" href="#settings" data-name="Settings">
 					<i class="octicon octicon-clippy"></i>
 					Settings
 				</a>
 				<% if (password) { %>
-				<a id="login" href="#sign-in">
+				<a id="login" href="#sign-in" data-name="Sign in">
 					<i class="octicon octicon-sign-in"></i>
 					Sign in
 				</a>
@@ -51,6 +51,46 @@
 			<div id="settings" class="window">
 				<div class="wrap">
 					<h1>Settings</h1>
+					<section>
+						<h2>Messages</h2>
+						<div class="options">
+							<label class="opt">
+								<input type="checkbox" name="join">
+								Show joins
+							</label>
+							<label class="opt">
+								<input type="checkbox" name="nick">
+								Show nick changes
+							</label>
+							<label class="opt">
+								<input type="checkbox" name="part">
+								Show parts
+							</label>
+							<label class="opt">
+								<input type="checkbox" name="mode">
+								Show modes
+							</label>
+							<label class="opt">
+								<input type="checkbox" name="quit">
+								Show quits
+							</label>
+						</div>
+					</section>
+					<section>
+						<h2>Sound</h2>
+						<div class="options">
+							<label class="opt wide">
+								<input type="checkbox" name="notification">
+								Enable notification sound
+							</label>
+							<label class="opt wide">
+								<button id="notification">
+									<i class="octicon octicon-unmute"></i>
+									Play sound
+								</button>
+							</label>
+						</div>
+					</section>
 				</div>
 			</div>
 			<div id="sign-in" class="window">

client/js/chat.js

@@ -123,6 +123,7 @@ $(function() {
 			var networks = render("networks", {networks: data.networks});
 			var current = $("#networks")
 				.html(networks)
+				.closest("#sidebar")
 				.find("a[href='" + $.cookie("current") + "']")
 				.trigger("click");
 			if (!current.length) {
@@ -166,6 +167,46 @@ $(function() {
 		}
 	}
 	
+	var settings = $("#settings");
+	var options = {
+		join: true,
+		nick: true,
+		part: true,
+		mode: true,
+		quit: true,
+		notification: true,
+	};
+
+	$.cookie.json = true;
+	$.cookie("settings", $.cookie("settings") || options);
+	$.extend(options, $.cookie("settings")); 
+	
+	for (var i in options) {
+		if (options[i]) {
+			settings.find("input[name=" + i + "]").prop("checked", true);
+		}
+	}
+	
+	settings.on("change", "input", function() {
+		settings.find("input").each(function() {
+			var input = $(this);
+			var name = input.attr("name");
+			if ([
+				"join",
+				"nick",
+				"part",
+				"mode",
+				"quit",
+			].indexOf(name) !== -1) {
+				chat.toggleClass("hide-" + name, !this.checked);
+			}
+			options[name] = this.checked;
+			$.cookie("settings", options);
+		});
+	}).find("input")
+		.first()
+		.trigger("change");
+	
 	setTimeout(function() {
 		// Enable transitions.
 		$("body").removeClass("preload");
@@ -254,7 +295,9 @@ $(function() {
 		var id = messages.closest(".window").find(".form").data("target");
 		var last = messages.find(".row:last-child");
 		if (last.hasClass("highlight")) {
-			pop.play();
+			if ($.cookie("settings").notification) {
+				pop.play();
+			}
 			if (document.hidden) {
 				favicon.badge("!");
 			}
@@ -371,6 +414,10 @@ $(function() {
 		socket.emit("auth", $("#sign-in-input").val());
 	});
 	
+	$("#notification").on("click", function() {
+		pop.play();
+	});
+	
 	function complete(word) {
 		var words = commands.slice();
 		var users = $(this).closest(".window")