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;
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;

View File

@ -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">

View File

@ -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")