Merge pull request #1340 from aviraldg/fix-65

Show full-size avatar on MemberInfo avatar click
This commit is contained in:
Matthew Hodgson 2016-04-02 23:20:39 +01:00
commit 4331fbf422
2 changed files with 46 additions and 9 deletions

View File

@ -27,7 +27,8 @@ module.exports = React.createClass({
displayName: 'ImageView', displayName: 'ImageView',
propTypes: { propTypes: {
onFinished: React.PropTypes.func.isRequired onFinished: React.PropTypes.func.isRequired,
name: React.PropTypes.string
}, },
// XXX: keyboard shortcuts for managing dialogs should be done by the modal // XXX: keyboard shortcuts for managing dialogs should be done by the modal
@ -65,6 +66,20 @@ module.exports = React.createClass({
}); });
}, },
getName: function () {
var name;
if(this.props.name) {
name = this.props.name;
} else if(this.props.mxEvent) {
name = props.mxEvent.getContent().body;
} else {
name = null;
}
return name;
},
render: function() { render: function() {
/* /*
@ -106,10 +121,28 @@ module.exports = React.createClass({
} }
var size; var size;
if (this.props.mxEvent.getContent().info && this.props.mxEvent.getContent().info.size) { if (this.props.mxEvent &&
this.props.mxEvent.getContent().info &&
this.props.mxEvent.getContent().info.size) {
size = filesize(this.props.mxEvent.getContent().info.size); size = filesize(this.props.mxEvent.getContent().info.size);
} }
var showEventMeta = !!this.props.mxEvent;
var eventMeta;
if(showEventMeta) {
eventMeta = (<div className="mx_ImageView_metadata">
Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
</div>);
}
var eventRedact;
if(showEventMeta) {
eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
Redact
</div>);
}
return ( return (
<div className="mx_ImageView"> <div className="mx_ImageView">
<div className="mx_ImageView_lhs"> <div className="mx_ImageView_lhs">
@ -122,11 +155,9 @@ module.exports = React.createClass({
<div className="mx_ImageView_shim"> <div className="mx_ImageView_shim">
</div> </div>
<div className="mx_ImageView_name"> <div className="mx_ImageView_name">
{ this.props.mxEvent.getContent().body } { this.getName() }
</div>
<div className="mx_ImageView_metadata">
Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
</div> </div>
{ eventMeta }
<a className="mx_ImageView_link" href={ this.props.src } target="_blank"> <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
<div className="mx_ImageView_download"> <div className="mx_ImageView_download">
Download this file<br/> Download this file<br/>
@ -138,9 +169,7 @@ module.exports = React.createClass({
View full screen View full screen
</a> </a>
</div> </div>
<div className="mx_ImageView_button" onClick={this.onRedactClick}> { eventRedact }
Redact
</div>
<div className="mx_ImageView_shim"> <div className="mx_ImageView_shim">
</div> </div>
</div> </div>

View File

@ -32,6 +32,14 @@ limitations under the License.
clear: both; clear: both;
} }
.mx_MemberInfo_avatar .mx_BaseAvatar {
cursor: not-allowed;
}
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: pointer;
}
.mx_MemberInfo_profile { .mx_MemberInfo_profile {
margin-bottom: 16px; margin-bottom: 16px;
} }