Implemented flat UI design

This commit is contained in:
Mattias Erming 2014-04-30 17:14:22 +02:00
parent fd29a95260
commit 9174bf49ff
9 changed files with 144 additions and 106 deletions

View file

@ -19,12 +19,20 @@
<aside id="sidebar"></aside> <aside id="sidebar"></aside>
<div id="chat"></div> <div id="chat"></div>
<footer id="footer">
<a href="<%= homepage %>" target="_blank" class="btn">
<strong><%= name %></strong>
<%= version %>
</a>
</footer>
</div> </div>
</div> </div>
<script type="text/html" id="networks"> <script type="text/html" id="networks">
{{#each networks}} {{#each networks}}
<div id="network-{{id}}" data-nick="{{nick}}" class="network"> <div id="network-{{id}}" data-nick="{{nick}}" class="network">
<h2 class="header">{{host}}</h2>
{{partial "#channels"}} {{partial "#channels"}}
</div> </div>
{{/each}} {{/each}}
@ -41,16 +49,12 @@
<script type="text/html" id="windows"> <script type="text/html" id="windows">
{{#each windows}} {{#each windows}}
<div id="window-{{id}}" class="window {{type}}"> <div id="window-{{id}}" class="window {{type}}">
<div class="title">
<h1>{{name}}</h1>
<button class="close">Close</button>
</div>
<div class="users"> <div class="users">
{{partial "#users"}} {{partial "#users"}}
</div> </div>
<div class="messages"> <div class="messages">
<div class="show-more"> <div class="show-more">
<button class="show-more-button">Show more</button> <button class="btn">Show more</button>
</div> </div>
{{partial "#messages"}} {{partial "#messages"}}
</div> </div>
@ -74,7 +78,7 @@
</script> </script>
<script type="text/html" id="messages"> <script type="text/html" id="messages">
{{#slice messages limit="200"}} {{#slice messages limit="20"}}
<div class="msg {{type}}"> <div class="msg {{type}}">
<span class="time"> <span class="time">
{{time}} {{time}}
@ -82,14 +86,13 @@
<button class="user"> <button class="user">
{{from}} {{from}}
</button> </button>
{{#if type}}
<span class="type">
{{type}}
</span>
{{/if}}
<span class="text"> <span class="text">
{{#if type}}
<em class="type">{{type}}</em>
{{/if}}
{{{uri text}}} {{{uri text}}}
</span> </span>
</div> </div>
{{/slice}} {{/slice}}
</script> </script>

View file

@ -108,12 +108,7 @@ $(function() {
break; break;
case "users": case "users":
var users = $.map(data.users, function(u) { return u.name; });
var tabComplete = commands.concat(users);
$("#window-" + data.id) $("#window-" + data.id)
.find(".input")
.data("list", tabComplete)
.end()
.find(".users") .find(".users")
.html(render("#users", {users: data.users})) .html(render("#users", {users: data.users}))
.end(); .end();
@ -159,7 +154,7 @@ $(function() {
}); });
}); });
chat.on("click", ".show-more-button", function() { chat.on("click", ".show-more .btn", function() {
var more = $(this).parent(); var more = $(this).parent();
var html = $.parseHTML(more.next(".hidden").remove().html()); var html = $.parseHTML(more.next(".hidden").remove().html());
more.replaceWith(html); more.replaceWith(html);

View file

@ -3,10 +3,22 @@
} }
html, html,
body { body {
font: 12px "Consolas", monospace; background: #fff;
color: #34495e;
font: 13px Helvetica, Arial, sans-serif;
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
a,
.user {
color: #16a085;
text-decoration: none;
transition: all .25s;
}
a:hover,
.user:hover {
color: #1abc9c;
}
a:focus, a:focus,
button:focus { button:focus {
outline: 0; outline: 0;
@ -16,59 +28,103 @@ h2 {
font: inherit; font: inherit;
margin: 0; margin: 0;
} }
.user { button {
background: none; background: none;
border: 0; border: 0;
color: inherit;
font: inherit; font: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
button {
.user:hover {
color: #f00;
cursor: pointer; cursor: pointer;
} }
.user::-moz-focus-inner { button::-moz-focus-inner {
padding: 0; padding: 0;
border: 0 border: 0;
}
.btn {
border: 2px solid #bdc3c7;
border-radius: 3px;
color: #aeb6bf;
font: 14px Helvetica, Arial, sans-serif;
padding: 8px 12px;
text-decoration: none;
transition: all .25s;
}
.btn:hover {
border-color: #7f8c8d;
color: #7f8c8d;
}
.badge {
background-color: #d8dce0;
border-radius: 4px;
color: #ffffff;
font-size: 13px;
line-height: 1.615;
padding: 0 8px;
} }
#wrap, #wrap,
#viewport { #viewport {
height: 100%; height: 100%;
min-width: 640px; min-width: 720px;
position: relative; position: relative;
width: 100%; width: 100%;
} }
#sidebar { #sidebar {
border-right: 1px solid #e1e1e8; border-right: 4px solid #bdc3c7;
float: left; float: left;
height: 100%; height: 100%;
padding: 20px;
width: 200px; width: 200px;
} }
#sidebar .network { #sidebar .network + .network {
margin: 20px; border-top: 2px solid #ebedef;
margin-top: 14px;
padding-top: 14px;
}
#sidebar .header {
color: #aeb6bf;
font-size: 13px;
font-weight: bold;
padding: 6px 12px;
text-transform: uppercase;
} }
#sidebar .channel { #sidebar .channel {
border-radius: 2px;
color: #16a085;
display: block; display: block;
margin: 5px; font-size: 15px;
margin-left: 10px; font-weight: bold;
line-height: 1.2;
padding: 6px 12px;
text-align: left;
transition: all .25s;
width: 100%;
} }
#sidebar .channel:first-child { #sidebar .channel + .channel {
margin-left: 0; margin-top: 3px;
}
#sidebar .channel:hover {
background-color: #f1f2f3;
color: #1abc9c;
}
#sidebar .channel.active {
background-color: #ebedef;
color: #526476;
} }
#chat { #chat {
background: #fff;
bottom: 0; bottom: 0;
font: 12px "Consolas", monospace;
left: 200px; left: 200px;
line-height: 16px; line-height: 16px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
#chat a {
color: inherit;
}
#chat form { #chat form {
border-top: 1px solid #ddd; border-top: 1px solid #bdc3c7;
bottom: 1px; bottom: 1px;
height: 30px; height: 30px;
left: 0; left: 0;
@ -89,8 +145,6 @@ h2 {
#chat .lobby .close { #chat .lobby .close {
display: none; display: none;
} }
#chat .query .title,
#chat .lobby .title,
#chat .query .messages, #chat .query .messages,
#chat .lobby .messages { #chat .lobby .messages {
right: 0; right: 0;
@ -101,95 +155,76 @@ h2 {
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
#chat .close {
float: right;
margin-top: 10px;
}
#chat .title {
border-bottom: 1px solid #ddd;
height: 42px;
left: 0;
overflow: hidden;
padding: 0 10px;
position: absolute;
right: 0;
top: 0;
}
#chat .title h1 {
color: #333;
display: inline-block;
font-size: 18px;
line-height: 42px;
}
#chat .messages { #chat .messages {
box-shadow: inset 8px 0 0 #f5f5f5;
bottom: 30px; bottom: 30px;
left: 0; left: 0;
overflow-y: auto; overflow-y: auto;
padding: 4px 0; padding: 0 8px 4px;
position: absolute; position: absolute;
right: 160px; right: 160px;
top: 42px; top: 0;
word-wrap: break-word; word-wrap: break-word;
z-index: 0; z-index: 0;
} }
#chat .show-more { #chat .show-more {
display: none; display: none;
padding: 2px 8px 0 16px; margin-top: 4px;
padding: 2px 0;
} }
#chat .show-more-button { #chat .show-more .btn {
padding: 6px 0;
width: 100%; width: 100%;
} }
#chat .msg { #chat .msg {
border-left: 8px solid transparent; margin: 4px 0;
line-height: 1.3em;
padding: 2px 8px;
} }
#chat .time { #chat .time {
color: #aaa; color: #bdc3c7;
}
#chat .highlight {
background: #fcf8e3;
border-left-color: #faebcc;
}
#chat .user {
color: #f00;
} }
#chat .error, #chat .error,
#chat .join, #chat .join,
#chat .kick, #chat .kick,
#chat .mode, #chat .mode,
#chat .motd,
#chat .nick, #chat .nick,
#chat .notice, #chat .notice,
#chat .part, #chat .part,
#chat .quit, #chat .quit,
#chat .topic, #chat .topic,
#chat .whois { #chat .whois {
color: #888; color: #95a5a6;
} }
#chat .highlight .type,
#chat .motd .type, #chat .motd .type,
#chat .notice .type, #chat .notice .type,
#chat .whois .type { #chat .whois .type {
display: none; display: none;
} }
#chat .users { #chat .users {
background: #fff; border-left: 4px solid #bdc3c7;
border-left: 1px solid #ddd;
bottom: 30px; bottom: 30px;
line-height: 1.4em;
overflow-y: auto; overflow-y: auto;
padding: 4px 8px; padding-bottom: 6px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 42px; top: 0;
width: 160px; width: 160px;
} }
#chat .users .count { #chat .users .count {
color: #888; background: #ecf0f1;
color: #aeb6bf;
margin-bottom: 4px;
padding: 8px 12px;
} }
#chat .users .user { #chat .users .user {
display: block; display: block;
padding: 2px 0; padding: 4px 12px;
}
#footer {
bottom: 0;
position: absolute;
text-align: center;
width: 195px;
}
#footer .btn {
display: block;
margin: 20px;
} }

View file

@ -1,6 +1,6 @@
module.exports = { module.exports = {
port: 9000, port: 9000,
theme: "/themes/default.css", theme: "",
defaults: { defaults: {
nick: "shout_user", nick: "shout_user",
realname: "http://github.com/erming/shout", realname: "http://github.com/erming/shout",

View file

@ -12,18 +12,16 @@ function Chan(attr) {
}, attr)); }, attr));
}; };
Chan.prototype = { Chan.prototype.sortUsers = function() {
sortUsers: function() { this.users = _.sortBy(
this.users = _.sortBy( this.users,
function(u) { return u.name.toLowerCase(); }
);
var modes = ["+", "@"];
modes.forEach(function(mode) {
this.users = _.remove(
this.users, this.users,
function(u) { return u.name.toLowerCase(); } function(u) { return u.mode == mode; }
); ).concat(this.users);
var modes = ["+", "@"]; }, this);
modes.forEach(function(mode) {
this.users = _.remove(
this.users,
function(u) { return u.mode == mode; }
).concat(this.users);
}, this);
}
}; };

View file

@ -14,12 +14,18 @@ function Network(attr) {
// Add lobby // Add lobby
this.channels.unshift( this.channels.unshift(
new Chan({name: this.host, type: "lobby"}) new Chan({name: "Status", type: "lobby"})
); );
}; };
Network.prototype = { Network.prototype.toJSON = function() {
toJSON: function() { var copy = _.omit(
return _.omit(this, "client"); this,
"client"
);
var name = copy.host.split(".")[1];
if (name) {
copy.host = name;
} }
return copy;
}; };

View file

@ -15,7 +15,7 @@ var User = require("./models/user");
var sockets = null; var sockets = null;
var networks = [ var networks = [
new Network({host: "Status"}) new Network({host: "Shout Client"})
]; ];
var events = [ var events = [
@ -357,7 +357,7 @@ function event(e, data) {
var type = ""; var type = "";
var text = data.message; var text = data.message;
var network = this; var network = this;
text.split(/ |'|:/).forEach(function(w) { text.split(' ').forEach(function(w) {
if (w.indexOf(network.client.me) == 0) type = "highlight"; if (w.indexOf(network.client.me) == 0) type = "highlight";
}); });
var msg = new Msg({ var msg = new Msg({
@ -433,7 +433,7 @@ function event(e, data) {
var chan = channels[0]; var chan = channels[0];
var msg = new Msg({ var msg = new Msg({
type: "notice", type: "notice",
from: data.to == "*" ? "-!-" : data.from, from: (data.to == "*" ? "-!-" : data.from) || "-!-",
text: data.message, text: data.message,
}); });
chan.messages.push(msg); chan.messages.push(msg);

View file

@ -2,6 +2,7 @@
"name": "shout", "name": "shout",
"description": "The modern IRC client", "description": "The modern IRC client",
"version": "1.0.0-alpha1", "version": "1.0.0-alpha1",
"homepage": "http://github.com/erming/shout",
"author": { "author": {
"name": "Mattias Erming", "name": "Mattias Erming",
"email": "mattias@mattiaserming.com" "email": "mattias@mattiaserming.com"