diff --git a/client/src/css/style.css b/client/src/css/style.css
index 6bbececa..16e64d80 100644
--- a/client/src/css/style.css
+++ b/client/src/css/style.css
@@ -5,12 +5,12 @@
}
body {
- font-family: Ubuntu Mono, monospace;
+ font-family: Droid Sans Mono, monospace;
background: #f0f0f0;
}
input {
- font: 16px Ubuntu Mono, monospace;
+ font: 16px Droid Sans Mono, monospace;
border: none;
outline: none;
}
@@ -193,7 +193,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
.chat-topic {
display: none;
- font: 16px Ubuntu Mono, monospace;
+ font: 16px Droid Sans Mono, monospace;
line-height: 50px;
vertical-align: top;
color: #222;
@@ -236,7 +236,6 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
}
.message-sender {
- font-weight: 700;
color: #6BB758;
}
diff --git a/client/src/index.html b/client/src/index.html
index 7faca1bb..da1e042b 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -6,7 +6,7 @@
IRC
-
+
diff --git a/client/src/js/components/MessageBox.jsx b/client/src/js/components/MessageBox.jsx
index cf90e6e8..bb4ea8fd 100644
--- a/client/src/js/components/MessageBox.jsx
+++ b/client/src/js/components/MessageBox.jsx
@@ -11,13 +11,13 @@ var messageActions = require('../actions/message');
var MessageBox = React.createClass({
mixins: [
- Reflux.connect(messageLineStore, 'lines'),
+ Reflux.connect(messageLineStore, 'messages'),
Reflux.connect(selectedTabStore, 'selectedTab')
],
getInitialState: function() {
return {
- lines: messageLineStore.getState(),
+ messages: messageLineStore.getState(),
selectedTab: selectedTabStore.getState(),
height: window.innerHeight - 100
};
@@ -62,32 +62,39 @@ var MessageBox = React.createClass({
render: function() {
var tab = this.state.selectedTab;
var dest = tab.channel || tab.server;
- var style = {}
+ var lines = [];
+ var style = {};
+
+ if (!tab.channel || tab.channel[0] !== '#') {
+ style.right = 0;
+ }
+
+ for (var j = 0; j < this.state.messages.length; j++) {
+ var message = this.state.messages[j];
- /*var messages = _.map(messageStore.getMessages(tab.server, dest), function(message) {
var messageClass = 'message';
if (message.type) {
messageClass += ' message-' + message.type;
}
- return (
+ lines.push(
{util.timestamp(message.time)}
- { message.from ? {message.from} : null }
- {' ' + message.message}
+ {message.from ? {message.from} : null}
+
);
- });*/
- if (!tab.channel || tab.channel[0] !== '#') {
- style.right = 0;
+ for (var i = 1; i < message.lines.length; i++) {
+ lines.push(
+
+
+
+ );
+ }
}
- var lines = _.map(this.state.lines, function(line) {
- return ;
- });
-
if (lines.length !== 1) {
return (
diff --git a/client/src/js/stores/messageLine.js b/client/src/js/stores/messageLine.js
index aade04b2..ac3f575a 100644
--- a/client/src/js/stores/messageLine.js
+++ b/client/src/js/stores/messageLine.js
@@ -7,28 +7,18 @@ var selectedTabStore = require('./selectedTab');
var messageActions = require('../actions/message');
var width = window.innerWidth;
-var charWidth = util.stringWidth(' ', '16px Ubuntu Mono');
+var charWidth = util.stringWidth(' ', '16px Droid Sans Mono');
var tab = selectedTabStore.getState();
var messages;
-var lines;
-
-wrap();
function wrap() {
messages = messageStore.getMessages(tab.server, tab.channel || tab.server);
-
- lines = util.wrap(_.map(messages, function(message) {
- var line = util.timestamp(message.time);
- if (message.from) {
- line += ' ' + message.from;
- }
- line += ' ' + message.message;
-
- return line;
- }), width, charWidth);
+ util.wrapMessages(messages, width, charWidth);
}
+wrap();
+
var messageLineStore = Reflux.createStore({
init: function() {
this.listenTo(messageActions.setWrapWidth, 'setWrapWidth');
@@ -38,25 +28,25 @@ var messageLineStore = Reflux.createStore({
setWrapWidth: function(w) {
width = w;
-
+
wrap();
- this.trigger(lines);
+ this.trigger(messages);
},
messagesChanged: function() {
wrap();
- this.trigger(lines);
+ this.trigger(messages);
},
selectedTabChanged: function(selectedTab) {
tab = selectedTab;
wrap();
- this.trigger(lines);
+ this.trigger(messages);
},
getState: function() {
- return lines;
+ return messages;
}
});
diff --git a/client/src/js/util.js b/client/src/js/util.js
index 9f0c19d2..37177e25 100644
--- a/client/src/js/util.js
+++ b/client/src/js/util.js
@@ -16,16 +16,20 @@ exports.timestamp = function(date) {
return h + ':' + m;
};
-exports.wrap = function(lines, width, charWidth) {
- var wrapped = [];
- var lineWidth;
- var wordCount;
-
- for (var j = 0, llen = lines.length; j < llen; j++) {
- var words = lines[j].split(' ');
+exports.wrapMessages = function(messages, width, charWidth) {
+ for (var j = 0, llen = messages.length; j < llen; j++) {
+ var message = messages[j];
+ var words = message.message.split(' ');
var line = '';
- lineWidth = 0;
- wordCount = 0;
+ var wrapped = [];
+ var lineWidth = (6 + (message.from ? message.from.length + 1 : 0)) * charWidth;
+ var wordCount = 0;
+
+ // Add empty line if first word after timestamp + sender wraps
+ if (words.length > 0 && lineWidth + words[0].length * charWidth >= width) {
+ wrapped.push(line);
+ lineWidth = 0;
+ }
for (var i = 0, wlen = words.length; i < wlen; i++) {
var word = words[i];
@@ -57,9 +61,9 @@ exports.wrap = function(lines, width, charWidth) {
wrapped.push(line);
}
}
- }
- return wrapped;
+ message.lines = wrapped;
+ }
};
var canvas = document.createElement('canvas');