cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added settings

This commit is contained in:
Mattias Erming 2014-07-10 00:40:51 +02:00
parent e946633c18
commit daf384f18b
3 changed files with 154 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
client/css/style.css
View File

@ -278,6 +278,22 @@ button {
top: 0px;
width: 100%;
}
#windows .input {
border: 2px solid #e9ecef;
border-radius: 4px;
color: #222;
font-size: 14px;
margin: 2px 0;
outline: 0;
padding: 8px 10px;
transition: border-color .2s;
-webkit-appearance: none;
width: 100%;
}
#windows .input:hover,
#windows .input:focus {
border-color: #bdc3c7;
}
#windows .chan,
#windows .window {
background: #fff;
@ -294,22 +310,6 @@ button {
#windows .window h1 {
font: 36px Lato;
}
#windows .window input {
border: 2px solid #e9ecef;
border-radius: 4px;
color: #222;
font-size: 14px;
margin: 2px 0;
outline: 0;
padding: 8px 10px;
transition: border-color .2s;
-webkit-appearance: none;
width: 100%;
}
#windows .window input:hover,
#windows .window input:focus {
border-color: #bdc3c7;
}
#windows .active {
display: block;
}
@ -402,18 +402,26 @@ button {
#chat .kick .type,
#chat .quit .type,
#chat .quit .type,
#chat .notice .type,
#chat .topic .type {
display: inline;
}
#chat .error,
#chat .error .user,
#chat .error .from,
#chat .highlight,
#chat .highlight .user {
#chat .highlight .from {
color: #f00;
}
#chat.hide-join .join,
#chat.hide-nick .nick,
#chat.hide-part .nick,
#chat.hide-mode .mode,
#chat.hide-quit .quit {
display: none !important;
}
#chat .notice .type {
display: none;
}
#chat .meta {
height: 80px;
padding: 25px 0 0 20px;
}
@ -487,6 +495,32 @@ button {
#connect .btn {
margin-top: 30px;
}
#settings h2 {
border-bottom: 1px solid #eee;
color: #7f8c8d;
font-size: 26px;
margin: 30px 0 10px;
padding-bottom: 7px;
}
#settings .opt {
display: block;
padding: 10px 0 10px 1px;
}
#settings .opt input {
float: left;
margin: 4px 10px 0 0;
}
#settings #play {
color: #7f8c8d;
}
#settings #play:hover {
opacity: .8;
}
#settings #play:before {
content: "\f0ba";
font: 16px Octicons;
margin-right: 9px;
}
#form {
bottom: 0;
height: 40px;

59
client/index.html
View File

@ -47,31 +47,31 @@
<div class="col-xs-8">
<label>
Server
<input name="host" placeholder="irc.freenode.org">
<input class="input" name="host" placeholder="irc.freenode.org">
</label>
</div>
<div class="col-xs-4">
<label class="port">
Port
<input name="port" placeholder="6667">
<input class="input" name="port" placeholder="6667">
</label>
</div>
<div class="col-xs-5">
<label>
Nick
<input name="nick" placeholder="shout">
<input class="input" name="nick" placeholder="shout">
</label>
</div>
<div class="col-xs-7">
<label>
Real Name
<input name="realname" class="input" placeholder="Shout User">
<input class="input" name="realname" class="input" placeholder="Shout User">
</label>
</div>
<div class="col-xs-12">
<label>
Channels
<input name="join" class="input" placeholder="#shout-irc">
<input class="input" name="join" class="input" placeholder="#shout-irc">
</label>
</div>
<div class="col-xs-12">
@ -88,6 +88,53 @@
<div class="col-sm-12">
<h1 class="title">Settings</h1>
</div>
<div class="col-sm-12">
<h2>Messages</h2>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="join">
Show joins
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="nick">
Show nick changes
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="part">
Show parts
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="mode">
Show mode
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="quit">
Show quits
</label>
</div>
<div class="col-sm-12">
<h2>Sound</h2>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="checkbox" name="notification">
Enable notification sound
</label>
</div>
<div class="col-sm-12">
<div class="opt">
<button id="play">Play sound</button>
</div>
</div>
</div>
</div>
</div>
@ -121,7 +168,7 @@
<script type="text/html" class="chat">
{{#each channels}}
<div id="chan-{{id}}" data-type="{{type}}" class="chan">
<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan">
<div class="chat">
<div class="messages">
{{partial "messages"}}

49
client/js/chat.js
View File

@ -34,6 +34,8 @@ $(function() {
var pop = new Audio();
pop.src = "/audio/pop.ogg";
$("#play").on("click", function() { pop.play(); });
var favico = new Favico({
animation: "none"
});
@ -105,7 +107,11 @@ $(function() {
});
socket.on("msg", function(data) {
var target = "#chan-" + data.chan;
var target = data.chan;
if (data.msg.type == "error") {
target = chat.find(".active").data("id");
}
target = "#chan-" + target;
chat.find(target)
.find(".messages")
.append(render("messages", {messages: [data.msg]}))
@ -116,7 +122,6 @@ $(function() {
});
socket.on("network", function(data) {
$("#connect").find(".btn").prop("disabled", false);
sidebar.find(".empty").hide();
sidebar.find(".networks").append(
render("networks", {
@ -131,6 +136,11 @@ $(function() {
sidebar.find(".chan")
.last()
.trigger("click");
connect.find(".btn")
.prop("disabled", false)
.end()
.find("input")
.val("");
});
socket.on("nick", function(data) {
@ -163,6 +173,41 @@ $(function() {
.html(render("users", data));
});
$.cookie.json = true;
var settings = $("#settings");
var options = $.extend({
join: true,
mode: true,
nick: true,
notification: true,
part: true,
quit: true,
}, $.cookie("settings"));
for (var i in options) {
if (options[i]) {
settings.find("input[name=" + i + "]").prop("checked", true);
}
}
settings.on("change", "input", function() {
var self = $(this);
var name = self.attr("name");
options[name] = self.prop("checked");
$.cookie("settings", options);
if ([
"join",
"nick",
"part",
"mode",
"quit",
].indexOf(name) !== -1) {
chat.toggleClass("hide-" + name, !self.prop("checked"));
}
}).find("input")
.eq(0)
.trigger("change");
var viewport = $("#viewport");
$("#rt, #lt").on("click", function(e) {
var self = $(this);