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