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

This commit is contained in:
khlieng 2015-02-21 06:25:52 +01:00
parent 305ee753e3
commit 14dee89304
4 changed files with 21 additions and 7 deletions

View File

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

View File

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

View File

@ -7,14 +7,15 @@ var selectedTabStore = require('./selectedTab');
var messageActions = require('../actions/message'); var messageActions = require('../actions/message');
var width = window.innerWidth; 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 tab = selectedTabStore.getState();
var messages; var messages;
function wrap() { function wrap() {
messages = messageStore.getMessages(tab.server, tab.channel || tab.server); messages = messageStore.getMessages(tab.server, tab.channel || tab.server);
util.wrapMessages(messages, width, charWidth); util.wrapMessages(messages, width, charWidth, messageIndent);
} }
wrap(); wrap();
@ -29,7 +30,7 @@ var messageLineStore = Reflux.createStore({
setWrapWidth: function(w) { setWrapWidth: function(w) {
width = w; width = w;
util.wrapMessages(messages, width, charWidth); util.wrapMessages(messages, width, charWidth, messageIndent);
this.trigger(messages); this.trigger(messages);
}, },

View File

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