linkify topics

pull/21833/head
Matthew Hodgson 2016-01-11 12:46:12 +00:00
parent 6351258b0e
commit ddd8838b24
1 changed files with 19 additions and 4 deletions

View File

@ -21,6 +21,12 @@ var sdk = require('../../../index');
var dis = require("../../../dispatcher"); var dis = require("../../../dispatcher");
var MatrixClientPeg = require('../../../MatrixClientPeg'); var MatrixClientPeg = require('../../../MatrixClientPeg');
var linkify = require('linkifyjs');
var linkifyElement = require('linkifyjs/element');
var linkifyMatrix = require('../../../linkify-matrix');
linkifyMatrix(linkify);
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'RoomHeader', displayName: 'RoomHeader',
@ -54,6 +60,12 @@ module.exports = React.createClass({
} }
}, },
componentDidUpdate: function() {
if (this.refs.topic) {
linkifyElement(this.refs.topic, linkifyMatrix.options);
}
},
onVideoClick: function(e) { onVideoClick: function(e) {
dis.dispatch({ dis.dispatch({
action: 'place_call', action: 'place_call',
@ -121,7 +133,10 @@ module.exports = React.createClass({
// </div> // </div>
// if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div> // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
var placeholderName = this.state.implicitName || "Unnamed Room"; var placeholderName = "Unnamed Room";
if (this.state.implicitName && this.state.implicitName !== '?') {
placeholderName += " (" + this.state.implicitName + ")";
}
name = name =
<div className="mx_RoomHeader_name"> <div className="mx_RoomHeader_name">
@ -158,13 +173,13 @@ module.exports = React.createClass({
<div className="mx_RoomHeader_name"> <div className="mx_RoomHeader_name">
<div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div> <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
{ searchStatus } { searchStatus }
<div className="mx_RoomHeader_settingsButton" title="Settings"> <div className="mx_RoomHeader_settingsButton" title="Settings" onClick={this.props.onSettingsClick}>
<TintableSvg src="img/settings.svg" width="12" height="12"/> <TintableSvg src="img/settings.svg" width="12" height="12"/>
</div> </div>
</div> </div>
var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
if (topic) topic_el = <div className="mx_RoomHeader_topic" title={ topic.getContent().topic }>{ topic.getContent().topic }</div>; if (topic) topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic.getContent().topic }>{ topic.getContent().topic }</div>;
} }
var roomAvatar = null; var roomAvatar = null;
@ -204,7 +219,7 @@ module.exports = React.createClass({
header = header =
<div className="mx_RoomHeader_wrapper"> <div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow" onClick={this.props.onSettingsClick}> <div className="mx_RoomHeader_leftRow">
<div className="mx_RoomHeader_avatar"> <div className="mx_RoomHeader_avatar">
{ roomAvatar } { roomAvatar }
</div> </div>