Added settings page

This commit is contained in:
Mattias Erming 2014-06-22 23:54:15 +02:00
parent b8598ebbb1
commit 72ad03c6ea
3 changed files with 145 additions and 13 deletions

View File

@ -37,6 +37,9 @@ li {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
input {
outline: 0;
}
button { button {
border: none; border: none;
background: none; background: none;
@ -107,6 +110,7 @@ button {
padding: 6px 10px 8px; padding: 6px 10px 8px;
position: relative; position: relative;
transition: background .1s, color 5s; transition: background .1s, color 5s;
z-index: 2;
} }
#sidebar a:hover { #sidebar a:hover {
background: rgba(255, 255, 255, 0.025); background: rgba(255, 255, 255, 0.025);
@ -247,7 +251,7 @@ button {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
} }
#windows input { #windows input[type=text] {
border: 2px solid #e9ecef; border: 2px solid #e9ecef;
border-radius: 4px; border-radius: 4px;
font-size: 24px; font-size: 24px;
@ -257,23 +261,57 @@ button {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
} }
#windows input:hover, #windows input[type=text]:hover,
#windows input:focus { #windows input[type=text]:focus {
border-color: #95a5a6; border-color: #95a5a6;
} }
#windows .window {
padding: 12% 0;
overflow: auto;
}
#settings { #settings {
} }
#sign-in { #settings h2 {
padding: 12.5% 0; border-bottom: 1px solid #eee;
overflow: auto; margin-bottom: 10px;
} }
#sign-in h1, #settings section {
#sign-in h2 { margin-top: 20px;
text-align: center; }
#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 { #sign-in form {
margin: 0 auto; margin: 0 0;
max-width: 250px; max-width: 250px;
} }
#sign-in-input { #sign-in-input {
@ -432,6 +470,13 @@ button {
opacity: 1; opacity: 1;
position: inherit; 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 { #chat .toggle {
background: #f9f9f9; background: #f9f9f9;
border: 1px solid #eee; border: 1px solid #eee;

View File

@ -24,12 +24,12 @@
<aside id="sidebar"> <aside id="sidebar">
<section> <section>
<h1>Shout</h1> <h1>Shout</h1>
<a href="#settings"> <a id="settings-link" href="#settings" data-name="Settings">
<i class="octicon octicon-clippy"></i> <i class="octicon octicon-clippy"></i>
Settings Settings
</a> </a>
<% if (password) { %> <% 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> <i class="octicon octicon-sign-in"></i>
Sign in Sign in
</a> </a>
@ -51,6 +51,46 @@
<div id="settings" class="window"> <div id="settings" class="window">
<div class="wrap"> <div class="wrap">
<h1>Settings</h1> <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> </div>
<div id="sign-in" class="window"> <div id="sign-in" class="window">

View File

@ -123,6 +123,7 @@ $(function() {
var networks = render("networks", {networks: data.networks}); var networks = render("networks", {networks: data.networks});
var current = $("#networks") var current = $("#networks")
.html(networks) .html(networks)
.closest("#sidebar")
.find("a[href='" + $.cookie("current") + "']") .find("a[href='" + $.cookie("current") + "']")
.trigger("click"); .trigger("click");
if (!current.length) { 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() { setTimeout(function() {
// Enable transitions. // Enable transitions.
$("body").removeClass("preload"); $("body").removeClass("preload");
@ -254,7 +295,9 @@ $(function() {
var id = messages.closest(".window").find(".form").data("target"); var id = messages.closest(".window").find(".form").data("target");
var last = messages.find(".row:last-child"); var last = messages.find(".row:last-child");
if (last.hasClass("highlight")) { if (last.hasClass("highlight")) {
pop.play(); if ($.cookie("settings").notification) {
pop.play();
}
if (document.hidden) { if (document.hidden) {
favicon.badge("!"); favicon.badge("!");
} }
@ -371,6 +414,10 @@ $(function() {
socket.emit("auth", $("#sign-in-input").val()); socket.emit("auth", $("#sign-in-input").val());
}); });
$("#notification").on("click", function() {
pop.play();
});
function complete(word) { function complete(word) {
var words = commands.slice(); var words = commands.slice();
var users = $(this).closest(".window") var users = $(this).closest(".window")