From 9174bf49ff745db327b21dd4698840e2d7ecc3d5 Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Wed, 30 Apr 2014 17:14:22 +0200 Subject: [PATCH] Implemented flat UI design --- client/index.html | 25 +++--- client/js/chat.js | 7 +- client/style.css | 171 +++++++++++++++++++++++--------------- client/themes/default.css | 0 config.js | 2 +- lib/models/chan.js | 24 +++--- lib/models/network.js | 14 +++- lib/server.js | 6 +- package.json | 1 + 9 files changed, 144 insertions(+), 106 deletions(-) delete mode 100644 client/themes/default.css diff --git a/client/index.html b/client/index.html index 4de8ce4f..14978ad8 100644 --- a/client/index.html +++ b/client/index.html @@ -19,12 +19,20 @@
+ + diff --git a/client/js/chat.js b/client/js/chat.js index 95dddf19..b4bea020 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -108,12 +108,7 @@ $(function() { break; case "users": - var users = $.map(data.users, function(u) { return u.name; }); - var tabComplete = commands.concat(users); $("#window-" + data.id) - .find(".input") - .data("list", tabComplete) - .end() .find(".users") .html(render("#users", {users: data.users})) .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 html = $.parseHTML(more.next(".hidden").remove().html()); more.replaceWith(html); diff --git a/client/style.css b/client/style.css index e7692805..954abdb8 100644 --- a/client/style.css +++ b/client/style.css @@ -3,10 +3,22 @@ } html, body { - font: 12px "Consolas", monospace; + background: #fff; + color: #34495e; + font: 13px Helvetica, Arial, sans-serif; height: 100%; margin: 0; } +a, +.user { + color: #16a085; + text-decoration: none; + transition: all .25s; +} +a:hover, +.user:hover { + color: #1abc9c; +} a:focus, button:focus { outline: 0; @@ -16,59 +28,103 @@ h2 { font: inherit; margin: 0; } -.user { +button { background: none; border: 0; + color: inherit; font: inherit; margin: 0; padding: 0; } - -.user:hover { - color: #f00; +button { cursor: pointer; } -.user::-moz-focus-inner { - padding: 0; - border: 0 +button::-moz-focus-inner { + padding: 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, #viewport { height: 100%; - min-width: 640px; + min-width: 720px; position: relative; width: 100%; } #sidebar { - border-right: 1px solid #e1e1e8; + border-right: 4px solid #bdc3c7; float: left; height: 100%; + padding: 20px; width: 200px; } -#sidebar .network { - margin: 20px; +#sidebar .network + .network { + 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 { + border-radius: 2px; + color: #16a085; display: block; - margin: 5px; - margin-left: 10px; + font-size: 15px; + font-weight: bold; + line-height: 1.2; + padding: 6px 12px; + text-align: left; + transition: all .25s; + width: 100%; } -#sidebar .channel:first-child { - margin-left: 0; +#sidebar .channel + .channel { + margin-top: 3px; +} +#sidebar .channel:hover { + background-color: #f1f2f3; + color: #1abc9c; +} +#sidebar .channel.active { + background-color: #ebedef; + color: #526476; } #chat { + background: #fff; bottom: 0; + font: 12px "Consolas", monospace; left: 200px; line-height: 16px; position: absolute; right: 0; top: 0; } -#chat a { - color: inherit; -} #chat form { - border-top: 1px solid #ddd; + border-top: 1px solid #bdc3c7; bottom: 1px; height: 30px; left: 0; @@ -89,8 +145,6 @@ h2 { #chat .lobby .close { display: none; } -#chat .query .title, -#chat .lobby .title, #chat .query .messages, #chat .lobby .messages { right: 0; @@ -101,95 +155,76 @@ h2 { position: absolute; 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 { - box-shadow: inset 8px 0 0 #f5f5f5; bottom: 30px; left: 0; overflow-y: auto; - padding: 4px 0; + padding: 0 8px 4px; position: absolute; right: 160px; - top: 42px; + top: 0; word-wrap: break-word; z-index: 0; } #chat .show-more { display: none; - padding: 2px 8px 0 16px; + margin-top: 4px; + padding: 2px 0; } -#chat .show-more-button { - padding: 6px 0; +#chat .show-more .btn { width: 100%; } #chat .msg { - border-left: 8px solid transparent; - line-height: 1.3em; - padding: 2px 8px; + margin: 4px 0; } #chat .time { - color: #aaa; -} -#chat .highlight { - background: #fcf8e3; - border-left-color: #faebcc; -} -#chat .user { - color: #f00; + color: #bdc3c7; } #chat .error, #chat .join, #chat .kick, #chat .mode, +#chat .motd, #chat .nick, #chat .notice, #chat .part, #chat .quit, #chat .topic, #chat .whois { - color: #888; + color: #95a5a6; } -#chat .highlight .type, #chat .motd .type, #chat .notice .type, #chat .whois .type { display: none; } #chat .users { - background: #fff; - border-left: 1px solid #ddd; + border-left: 4px solid #bdc3c7; bottom: 30px; - line-height: 1.4em; overflow-y: auto; - padding: 4px 8px; + padding-bottom: 6px; position: absolute; right: 0; - top: 42px; + top: 0; width: 160px; } #chat .users .count { - color: #888; + background: #ecf0f1; + color: #aeb6bf; + margin-bottom: 4px; + padding: 8px 12px; } #chat .users .user { display: block; - padding: 2px 0; + padding: 4px 12px; +} +#footer { + bottom: 0; + position: absolute; + text-align: center; + width: 195px; +} +#footer .btn { + display: block; + margin: 20px; } diff --git a/client/themes/default.css b/client/themes/default.css deleted file mode 100644 index e69de29b..00000000 diff --git a/config.js b/config.js index 4ff1d78a..818386b9 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,6 @@ module.exports = { port: 9000, - theme: "/themes/default.css", + theme: "", defaults: { nick: "shout_user", realname: "http://github.com/erming/shout", diff --git a/lib/models/chan.js b/lib/models/chan.js index 3f5944fc..debe427e 100644 --- a/lib/models/chan.js +++ b/lib/models/chan.js @@ -12,18 +12,16 @@ function Chan(attr) { }, attr)); }; -Chan.prototype = { - sortUsers: function() { - this.users = _.sortBy( +Chan.prototype.sortUsers = function() { + this.users = _.sortBy( + this.users, + function(u) { return u.name.toLowerCase(); } + ); + var modes = ["+", "@"]; + modes.forEach(function(mode) { + this.users = _.remove( this.users, - function(u) { return u.name.toLowerCase(); } - ); - var modes = ["+", "@"]; - modes.forEach(function(mode) { - this.users = _.remove( - this.users, - function(u) { return u.mode == mode; } - ).concat(this.users); - }, this); - } + function(u) { return u.mode == mode; } + ).concat(this.users); + }, this); }; diff --git a/lib/models/network.js b/lib/models/network.js index d0e5cb2a..37ecf6fa 100644 --- a/lib/models/network.js +++ b/lib/models/network.js @@ -14,12 +14,18 @@ function Network(attr) { // Add lobby this.channels.unshift( - new Chan({name: this.host, type: "lobby"}) + new Chan({name: "Status", type: "lobby"}) ); }; -Network.prototype = { - toJSON: function() { - return _.omit(this, "client"); +Network.prototype.toJSON = function() { + var copy = _.omit( + this, + "client" + ); + var name = copy.host.split(".")[1]; + if (name) { + copy.host = name; } + return copy; }; diff --git a/lib/server.js b/lib/server.js index fa10572f..2b46c7b3 100644 --- a/lib/server.js +++ b/lib/server.js @@ -15,7 +15,7 @@ var User = require("./models/user"); var sockets = null; var networks = [ - new Network({host: "Status"}) + new Network({host: "Shout Client"}) ]; var events = [ @@ -357,7 +357,7 @@ function event(e, data) { var type = ""; var text = data.message; var network = this; - text.split(/ |'|:/).forEach(function(w) { + text.split(' ').forEach(function(w) { if (w.indexOf(network.client.me) == 0) type = "highlight"; }); var msg = new Msg({ @@ -433,7 +433,7 @@ function event(e, data) { var chan = channels[0]; var msg = new Msg({ type: "notice", - from: data.to == "*" ? "-!-" : data.from, + from: (data.to == "*" ? "-!-" : data.from) || "-!-", text: data.message, }); chan.messages.push(msg); diff --git a/package.json b/package.json index eb60b004..f494ae2e 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "shout", "description": "The modern IRC client", "version": "1.0.0-alpha1", + "homepage": "http://github.com/erming/shout", "author": { "name": "Mattias Erming", "email": "mattias@mattiaserming.com"