diff --git a/client/src/js/components/Chat.jsx b/client/src/js/components/Chat.jsx index 6da5e4fb..ccec3540 100644 --- a/client/src/js/components/Chat.jsx +++ b/client/src/js/components/Chat.jsx @@ -10,7 +10,7 @@ var Chat = React.createClass({ return (
- +
diff --git a/client/src/js/components/MessageBox.jsx b/client/src/js/components/MessageBox.jsx index 4b50f517..1d6a71d7 100644 --- a/client/src/js/components/MessageBox.jsx +++ b/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( -

+

); diff --git a/client/src/js/stores/messageLine.js b/client/src/js/stores/messageLine.js index d5942550..62596379 100644 --- a/client/src/js/stores/messageLine.js +++ b/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); }, diff --git a/client/src/js/util.js b/client/src/js/util.js index 37177e25..c87c3487 100644 --- a/client/src/js/util.js +++ b/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;