Make styling work with the new message rendering

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

client/src/index.html

@@ -6,7 +6,7 @@
 
 	<title>IRC</title>
 
-	<link href="//fonts.googleapis.com/css?family=Montserrat|Ubuntu+Mono:400,700" rel="stylesheet">
+	<link href="//fonts.googleapis.com/css?family=Montserrat|Droid+Sans+Mono" rel="stylesheet">
 	<link href="css/fontello.css" rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet">
 </head>

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(
 				<p className={messageClass}>
 					<span className="message-time">{util.timestamp(message.time)}</span>
-					{ message.from ? <span className="message-sender"> {message.from}</span> : null }
-					{' ' + message.message}
+					{message.from ? <span className="message-sender"> {message.from}</span> : null}
+					<span dangerouslySetInnerHTML={{ __html: ' ' + Autolinker.link(message.lines[0]) }}></span>
 				</p>
 			);
-		});*/
 
-		if (!tab.channel || tab.channel[0] !== '#') {
-			style.right = 0;
+			for (var i = 1; i < message.lines.length; i++) {
+				lines.push(
+					<p className={messageClass}>
+						<span dangerouslySetInnerHTML={{ __html: Autolinker.link(message.lines[i]) }}></span>
+					</p>
+				);
+			}
 		}
 
-		var lines = _.map(this.state.lines, function(line) {
-			return <p className="message" dangerouslySetInnerHTML={{ __html: Autolinker.link(line) }}></p>;
-		});
-
 		if (lines.length !== 1) {
 			return (
 				<div className="messagebox" style={style}>

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

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