OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Minor fixes to image sizing 

* use string refs instead of callback funcs
* Add a null-guard in case we don't have an image
pull/21833/head
Richard van der Hoff 2016-03-24 16:58:27 +00:00
parent 8b67a1059d
commit c227b2279b
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/views/messages/MImageBody.js
View File

@ -121,16 +121,21 @@ module.exports = React.createClass({
}, },
fixupHeight: function() { fixupHeight: function() {
if (!this.refs.image) {
return;
}
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
var thumbHeight = null; var thumbHeight = null;
var timelineWidth = this._body.offsetWidth; var timelineWidth = this.refs.body.offsetWidth;
var maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px. var maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
// the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
//console.log("trying to fit image into timelineWidth of " + this._body.offsetWidth + " or " + this._body.clientWidth); //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight); if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
this._image.style.height = thumbHeight + "px"; this.refs.image.style.height = thumbHeight + "px";
console.log("Imageheight now", thumbHeight);
}, },
render: function() { render: function() {
@ -141,9 +146,9 @@ module.exports = React.createClass({
var thumbUrl = this._getThumbUrl(); var thumbUrl = this._getThumbUrl();
if (thumbUrl) { if (thumbUrl) {
return ( return (
<span className="mx_MImageBody" ref={(c) => this._body = c}> <span className="mx_MImageBody" ref="body">
<a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }> <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref={(c) => this._image = c} <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
alt={content.body} alt={content.body}
onMouseEnter={this.onImageEnter} onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave} onMouseLeave={this.onImageLeave}