Added settings page
This commit is contained in:
Mattias Erming
parent
b8598ebbb1
commit
72ad03c6ea
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Reference in New Issue