EventTile: add classes to indicate verifiedness

Add a couple of CSS classes to event tiles to reflect whether encrypted events
have been verified or not.
This commit is contained in:
Richard van der Hoff 2016-06-08 17:01:13 +01:00
parent f3e66e6fd2
commit 1616431d27

View file

@ -128,18 +128,25 @@ module.exports = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return {menu: false, allReadAvatars: false}; return {menu: false, allReadAvatars: false, verified: null};
}, },
componentWillMount: function() { componentWillMount: function() {
// don't do RR animations until we are mounted // don't do RR animations until we are mounted
this._suppressReadReceiptAnimation = true; this._suppressReadReceiptAnimation = true;
this._verifyEvent(this.props.mxEvent);
}, },
componentDidMount: function() { componentDidMount: function() {
this._suppressReadReceiptAnimation = false; this._suppressReadReceiptAnimation = false;
}, },
componentWillReceiveProps: function (nextProps) {
if (nextProps.mxEvent !== this.props.mxEvent) {
this._verifyEvent(nextProps.mxEvent);
}
},
shouldComponentUpdate: function (nextProps, nextState) { shouldComponentUpdate: function (nextProps, nextState) {
if (!ObjectUtils.shallowEqual(this.state, nextState)) { if (!ObjectUtils.shallowEqual(this.state, nextState)) {
return true; return true;
@ -152,6 +159,18 @@ module.exports = React.createClass({
return false; return false;
}, },
_verifyEvent: function(mxEvent) {
var verified = null;
if (mxEvent.isEncrypted()) {
verified = MatrixClientPeg.get().isEventSenderVerified(mxEvent);
}
this.setState({
verified: verified
});
},
_propsEqual: function(objA, objB) { _propsEqual: function(objA, objB) {
var keysA = Object.keys(objA); var keysA = Object.keys(objA);
var keysB = Object.keys(objB); var keysB = Object.keys(objB);
@ -346,6 +365,8 @@ module.exports = React.createClass({
mx_EventTile_last: this.props.last, mx_EventTile_last: this.props.last,
mx_EventTile_contextual: this.props.contextual, mx_EventTile_contextual: this.props.contextual,
menu: this.state.menu, menu: this.state.menu,
mx_EventTile_verified: this.state.verified == true,
mx_EventTile_unverified: this.state.verified == false,
}); });
var timestamp = <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }> var timestamp = <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }>
<MessageTimestamp ts={this.props.mxEvent.getTs()} /> <MessageTimestamp ts={this.props.mxEvent.getTs()} />