deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-05-09 01:36:42 +02:00
Code Issues Projects Releases Wiki Activity

Implemented flat UI design

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
client/index.html
View file

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

7
client/js/chat.js
View file

@ -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);

171
client/style.css
View file

@ -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;
}

0
client/themes/default.css
View file

2
config.js
View file

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

24
lib/models/chan.js
View file

@ -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);
};

14
lib/models/network.js
View file

@ -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;
};

6
lib/server.js
View file

@ -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);

1
package.json
View file

@ -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"