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; top: 0px;
width: 100%; 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 .chan,
#windows .window { #windows .window {
background: #fff; background: #fff;
@ -294,22 +310,6 @@ button {
#windows .window h1 { #windows .window h1 {
font: 36px Lato; 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 { #windows .active {
display: block; display: block;
} }
@ -402,18 +402,26 @@ button {
#chat .kick .type, #chat .kick .type,
#chat .quit .type, #chat .quit .type,
#chat .quit .type, #chat .quit .type,
#chat .notice .type,
#chat .topic .type { #chat .topic .type {
display: inline; display: inline;
} }
#chat .error, #chat .error,
#chat .error .user, #chat .error .from,
#chat .highlight, #chat .highlight,
#chat .highlight .user { #chat .highlight .from {
color: #f00; 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 { #chat .meta {
height: 80px; height: 80px;
padding: 25px 0 0 20px; padding: 25px 0 0 20px;
} }
@ -487,6 +495,32 @@ button {
#connect .btn { #connect .btn {
margin-top: 30px; 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 { #form {
bottom: 0; bottom: 0;
height: 40px; height: 40px;

59
client/index.html
View File

@ -47,31 +47,31 @@
<div class="col-xs-8"> <div class="col-xs-8">
<label> <label>
Server Server
<input name="host" placeholder="irc.freenode.org"> <input class="input" name="host" placeholder="irc.freenode.org">
</label> </label>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<label class="port"> <label class="port">
Port Port
<input name="port" placeholder="6667"> <input class="input" name="port" placeholder="6667">
</label> </label>
</div> </div>
<div class="col-xs-5"> <div class="col-xs-5">
<label> <label>
Nick Nick
<input name="nick" placeholder="shout"> <input class="input" name="nick" placeholder="shout">
</label> </label>
</div> </div>
<div class="col-xs-7"> <div class="col-xs-7">
<label> <label>
Real Name Real Name
<input name="realname" class="input" placeholder="Shout User"> <input class="input" name="realname" class="input" placeholder="Shout User">
</label> </label>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<label> <label>
Channels Channels
<input name="join" class="input" placeholder="#shout-irc"> <input class="input" name="join" class="input" placeholder="#shout-irc">
</label> </label>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
@ -88,6 +88,53 @@
<div class="col-sm-12"> <div class="col-sm-12">
<h1 class="title">Settings</h1> <h1 class="title">Settings</h1>
</div> </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> </div>
</div> </div>
@ -121,7 +168,7 @@
<script type="text/html" class="chat"> <script type="text/html" class="chat">
{{#each channels}} {{#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="chat">
<div class="messages"> <div class="messages">
{{partial "messages"}} {{partial "messages"}}

49
client/js/chat.js
View File

@ -34,6 +34,8 @@ $(function() {
var pop = new Audio(); var pop = new Audio();
pop.src = "/audio/pop.ogg"; pop.src = "/audio/pop.ogg";
$("#play").on("click", function() { pop.play(); });
var favico = new Favico({ var favico = new Favico({
animation: "none" animation: "none"
}); });
@ -105,7 +107,11 @@ $(function() {
}); });
socket.on("msg", function(data) { 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) chat.find(target)
.find(".messages") .find(".messages")
.append(render("messages", {messages: [data.msg]})) .append(render("messages", {messages: [data.msg]}))
@ -116,7 +122,6 @@ $(function() {
}); });
socket.on("network", function(data) { socket.on("network", function(data) {
$("#connect").find(".btn").prop("disabled", false);
sidebar.find(".empty").hide(); sidebar.find(".empty").hide();
sidebar.find(".networks").append( sidebar.find(".networks").append(
render("networks", { render("networks", {
@ -131,6 +136,11 @@ $(function() {
sidebar.find(".chan") sidebar.find(".chan")
.last() .last()
.trigger("click"); .trigger("click");
connect.find(".btn")
.prop("disabled", false)
.end()
.find("input")
.val("");
}); });
socket.on("nick", function(data) { socket.on("nick", function(data) {
@ -163,6 +173,41 @@ $(function() {
.html(render("users", data)); .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"); var viewport = $("#viewport");
$("#rt, #lt").on("click", function(e) { $("#rt, #lt").on("click", function(e) {
var self = $(this); var self = $(this);