PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Minor fixes to image sizing

Browse source 
* use string refs instead of callback funcs
* Add a null-guard in case we don't have an image
This commit is contained in:
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() {
if (!this.refs.image) {
return;
}
var content = this.props.mxEvent.getContent();
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.
// 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);
this._image.style.height = thumbHeight + "px";
this.refs.image.style.height = thumbHeight + "px";
console.log("Imageheight now", thumbHeight);
},
render: function() {
@ -141,9 +146,9 @@ module.exports = React.createClass({
var thumbUrl = this._getThumbUrl();
if (thumbUrl) {
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 }>
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref={(c) => this._image = c}
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
alt={content.body}
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave}