From 4ae9ffa2bc5130847486e6c32dde259578666414 Mon Sep 17 00:00:00 2001
From: khlieng <kk_998@hotmail.com>
Date: Sat, 21 Feb 2015 07:11:38 +0100
Subject: [PATCH] Add clickable nicks in messages for starting private chats

---
 client/src/css/style.css                   |  1 +
 client/src/js/components/MessageBox.jsx    | 10 +----
 client/src/js/components/MessageHeader.jsx | 47 ++++++++++++++++++++++
 3 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 client/src/js/components/MessageHeader.jsx

diff --git a/client/src/css/style.css b/client/src/css/style.css
index 16e64d80..133acbb4 100644
--- a/client/src/css/style.css
+++ b/client/src/css/style.css
@@ -237,6 +237,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 
 .message-sender {
 	color: #6BB758;
+	cursor: pointer;
 }
 
 .message-input-wrap {
diff --git a/client/src/js/components/MessageBox.jsx b/client/src/js/components/MessageBox.jsx
index 1d6a71d7..86b4b598 100644
--- a/client/src/js/components/MessageBox.jsx
+++ b/client/src/js/components/MessageBox.jsx
@@ -4,7 +4,7 @@ var _ = require('lodash');
 var Infinite = require('react-infinite');
 var Autolinker = require('autolinker');
 
-var util = require('../util');
+var MessageHeader = require('./MessageHeader.jsx');
 var messageLineStore = require('../stores/messageLine');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');
@@ -81,13 +81,7 @@ var MessageBox = React.createClass({
 				messageClass += ' message-' + message.type;
 			}
 
-			lines.push(
-				<p key={key} className={messageClass}>
-					<span className="message-time">{util.timestamp(message.time)}</span>
-					{message.from ? <span className="message-sender"> {message.from}</span> : null}
-					<span dangerouslySetInnerHTML={{ __html: ' ' + Autolinker.link(message.lines[0]) }}></span>
-				</p>
-			);
+			lines.push(<MessageHeader key={key} message={message} />);
 
 			for (var i = 1; i < message.lines.length; i++) {
 				lines.push(
diff --git a/client/src/js/components/MessageHeader.jsx b/client/src/js/components/MessageHeader.jsx
new file mode 100644
index 00000000..cf02e650
--- /dev/null
+++ b/client/src/js/components/MessageHeader.jsx
@@ -0,0 +1,47 @@
+var React = require('react');
+var Reflux = require('reflux');
+var Autolinker = require('autolinker');
+
+var util = require('../util');
+var privateChatActions = require('../actions/privateChat');
+var tabActions = require('../actions/tab');
+
+var MessageHeader = React.createClass({
+	handleSenderClick: function() {
+		var message = this.props.message;
+
+		privateChatActions.open(message.server, message.from);
+		tabActions.select(message.server, message.from);
+	},
+
+	render: function() {
+		var message = this.props.message;
+		var sender = null;
+		var messageClass = 'message';
+
+		if (message.from) {
+			sender = (
+				<span 
+					className="message-sender" 
+					style={{ marginLeft: window.charWidth + 'px' }}
+					onClick={this.handleSenderClick}>
+						{message.from}
+				</span>
+			);
+		}
+
+		if (message.type) {
+			messageClass += ' message-' + message.type;
+		}
+
+		return (
+			<p className={messageClass}>
+				<span className="message-time">{util.timestamp(message.time)}</span>
+				{sender}
+				<span dangerouslySetInnerHTML={{ __html: ' ' + Autolinker.link(message.lines[0]) }}></span>
+			</p>
+		);
+	}
+});
+
+module.exports = MessageHeader;
\ No newline at end of file