Make indenting lines after the first work with the new message rendering

client/src/js/components/Chat.jsx

@@ -10,7 +10,7 @@ var Chat = React.createClass({
         return (
             <div>
                 <ChatTitle />
-                <MessageBox />
+                <MessageBox indent={window.messageIndent} />
                 <MessageInput />
                 <UserList />
             </div>

client/src/js/components/MessageBox.jsx

@@ -64,6 +64,9 @@ var MessageBox = React.createClass({
 		var dest = tab.channel || tab.server;
 		var lines = [];
 		var style = {};
+		var innerStyle = {
+			paddingLeft: this.props.indent + 'px'
+		};
 
 		if (!tab.channel || tab.channel[0] !== '#') {
 			style.right = 0;
@@ -88,7 +91,7 @@ var MessageBox = React.createClass({
 
 			for (var i = 1; i < message.lines.length; i++) {
 				lines.push(
-					<p key={key + '-' + i} className={messageClass}>
+					<p key={key + '-' + i} className={messageClass} style={innerStyle}>
 						<span dangerouslySetInnerHTML={{ __html: Autolinker.link(message.lines[i]) }}></span>
 					</p>
 				);

client/src/js/stores/messageLine.js

@@ -7,14 +7,15 @@ var selectedTabStore = require('./selectedTab');
 var messageActions = require('../actions/message');
 
 var width = window.innerWidth;
-var charWidth = util.stringWidth(' ', '16px Droid Sans Mono');
+window.charWidth = util.stringWidth(' ', '16px Droid Sans Mono');
+window.messageIndent = 6 * charWidth;
 
 var tab = selectedTabStore.getState();
 var messages;
 
 function wrap() {
 	messages = messageStore.getMessages(tab.server, tab.channel || tab.server);
-	util.wrapMessages(messages, width, charWidth);
+	util.wrapMessages(messages, width, charWidth, messageIndent);
 }
 
 wrap();
@@ -29,7 +30,7 @@ var messageLineStore = Reflux.createStore({
 	setWrapWidth: function(w) {
 		width = w;
 
-		util.wrapMessages(messages, width, charWidth);
+		util.wrapMessages(messages, width, charWidth, messageIndent);
 		this.trigger(messages);
 	},
 

client/src/js/util.js

@@ -16,7 +16,9 @@ exports.timestamp = function(date) {
 	return h + ':' + m;
 };
 
-exports.wrapMessages = function(messages, width, charWidth) {
+exports.wrapMessages = function(messages, width, charWidth, indent) {
+	indent = indent || 0;
+
 	for (var j = 0, llen = messages.length; j < llen; j++) {
 		var message = messages[j];
 		var words = message.message.split(' ');
@@ -24,9 +26,10 @@ exports.wrapMessages = function(messages, width, charWidth) {
 		var wrapped = [];
 		var lineWidth = (6 + (message.from ? message.from.length + 1 : 0)) * charWidth;
 		var wordCount = 0;
+		var hasWrapped = false;
 
 		// Add empty line if first word after timestamp + sender wraps
-		if (words.length > 0 && lineWidth + words[0].length * charWidth >= width) {
+		if (words.length > 0 && message.from && lineWidth + words[0].length * charWidth >= width) {
 			wrapped.push(line);
 			lineWidth = 0;
 		}
@@ -34,6 +37,11 @@ exports.wrapMessages = function(messages, width, charWidth) {
 		for (var i = 0, wlen = words.length; i < wlen; i++) {
 			var word = words[i];
 
+			if (hasWrapped) {
+				hasWrapped = false;
+				lineWidth += indent;
+			}
+
 			lineWidth += word.length * charWidth;
 			wordCount++;
 
@@ -53,6 +61,8 @@ exports.wrapMessages = function(messages, width, charWidth) {
 					lineWidth = 0;
 					wordCount = 0;
 				}
+
+				hasWrapped = true;
 			} else if (i !== wlen - 1) {
 				line += word + ' ';
 				lineWidth += charWidth;