Merge pull request #744 from matrix-org/luke/add-onclick-permalinks

Add onClick to permalinks to route within Riot
This commit is contained in:
Matthew Hodgson 2017-03-09 18:29:42 +00:00 committed by GitHub
commit 7fb9ce2b78

View file

@ -25,7 +25,7 @@ var TextForEvent = require('../../../TextForEvent');
import WithMatrixClient from '../../../wrappers/WithMatrixClient'; import WithMatrixClient from '../../../wrappers/WithMatrixClient';
var ContextualMenu = require('../../structures/ContextualMenu'); var ContextualMenu = require('../../structures/ContextualMenu');
var dispatcher = require("../../../dispatcher"); import dis from '../../../dispatcher';
var ObjectUtils = require('../../../ObjectUtils'); var ObjectUtils = require('../../../ObjectUtils');
@ -354,7 +354,7 @@ module.exports = WithMatrixClient(React.createClass({
onSenderProfileClick: function(event) { onSenderProfileClick: function(event) {
var mxEvent = this.props.mxEvent; var mxEvent = this.props.mxEvent;
dispatcher.dispatch({ dis.dispatch({
action: 'insert_displayname', action: 'insert_displayname',
displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''), displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''),
}); });
@ -370,6 +370,17 @@ module.exports = WithMatrixClient(React.createClass({
}); });
}, },
onPermalinkClicked: function(e) {
// This allows the permalink to be opened in a new tab/window or copied as
// matrix.to, but also for it to enable routing within Riot when clicked.
e.preventDefault();
dis.dispatch({
action: 'view_room',
event_id: this.props.mxEvent.getId(),
room_id: this.props.mxEvent.getRoomId(),
});
},
render: function() { render: function() {
var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp'); var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
var SenderProfile = sdk.getComponent('messages.SenderProfile'); var SenderProfile = sdk.getComponent('messages.SenderProfile');
@ -413,7 +424,10 @@ module.exports = WithMatrixClient(React.createClass({
mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted', mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted',
mx_EventTile_redacted: isRedacted, mx_EventTile_redacted: isRedacted,
}); });
var permalink = "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId();
const permalink = "https://matrix.to/#/" +
this.props.mxEvent.getRoomId() + "/" +
this.props.mxEvent.getId();
var readAvatars = this.getReadAvatars(); var readAvatars = this.getReadAvatars();
@ -498,13 +512,13 @@ module.exports = WithMatrixClient(React.createClass({
return ( return (
<div className={classes}> <div className={classes}>
<div className="mx_EventTile_roomName"> <div className="mx_EventTile_roomName">
<a href={ permalink }> <a href={ permalink } onClick={this.onPermalinkClicked}>
{ room ? room.name : '' } { room ? room.name : '' }
</a> </a>
</div> </div>
<div className="mx_EventTile_senderDetails"> <div className="mx_EventTile_senderDetails">
{ avatar } { avatar }
<a href={ permalink }> <a href={ permalink } onClick={this.onPermalinkClicked}>
{ sender } { sender }
{ timestamp } { timestamp }
</a> </a>
@ -532,7 +546,11 @@ module.exports = WithMatrixClient(React.createClass({
tileShape={this.props.tileShape} tileShape={this.props.tileShape}
onWidgetLoad={this.props.onWidgetLoad} /> onWidgetLoad={this.props.onWidgetLoad} />
</div> </div>
<a className="mx_EventTile_senderDetailsLink" href={ permalink }> <a
className="mx_EventTile_senderDetailsLink"
href={ permalink }
onClick={this.onPermalinkClicked}
>
<div className="mx_EventTile_senderDetails"> <div className="mx_EventTile_senderDetails">
{ sender } { sender }
{ timestamp } { timestamp }
@ -550,7 +568,7 @@ module.exports = WithMatrixClient(React.createClass({
{ avatar } { avatar }
{ sender } { sender }
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<a href={ permalink }> <a href={ permalink } onClick={this.onPermalinkClicked}>
{ timestamp } { timestamp }
</a> </a>
{ e2e } { e2e }