diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 66e2daddd5..aaa00934cb 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -16,6 +16,7 @@ limitations under the License. var React = require('react'); var ReactDOM = require("react-dom"); +var dis = require("../../dispatcher"); var sdk = require('../../index'); /* (almost) stateless UI component which builds the event tiles in the room timeline. @@ -301,8 +302,7 @@ module.exports = React.createClass({ ref={this._collectEventNode.bind(this, eventId)} data-scroll-token={scrollToken}> + last={last} isSelectedEvent={highlight} /> ); @@ -368,14 +368,8 @@ module.exports = React.createClass({ this.eventNodes[eventId] = node; }, - - // once images in the events load, make the scrollPanel check the - // scroll offsets. - _onImageLoad: function() { - var scrollPanel = this.refs.scrollPanel; - if (scrollPanel) { - scrollPanel.checkScroll(); - } + onResize: function() { + dis.dispatch({ action: 'timeline_resize' }, true); }, render: function() { @@ -392,6 +386,7 @@ module.exports = React.createClass({ return ( diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 3f4a666c56..1c1b0ede40 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -485,6 +485,10 @@ module.exports = React.createClass({ } }, + onSearchResultsResize: function() { + dis.dispatch({ action: 'timeline_resize' }, true); + }, + onSearchResultsFillRequest: function(backwards) { if (!backwards) return q(false); @@ -1361,7 +1365,7 @@ module.exports = React.createClass({ if (this.state.searchResults) { searchResultsPanel = ( + onFillRequest={ this.onSearchResultsFillRequest } onResize={ this.onSearchResultsResize }>
  • {this.getSearchResultTiles()}
    diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js index 874078456e..ddec81c107 100644 --- a/src/components/structures/ScrollPanel.js +++ b/src/components/structures/ScrollPanel.js @@ -94,6 +94,11 @@ module.exports = React.createClass({ */ onScroll: React.PropTypes.func, + /* onResize: a callback which is called whenever the Gemini scroll + * panel is resized + */ + onResize: React.PropTypes.func, + /* className: classnames to add to the top-level div */ className: React.PropTypes.string, @@ -181,6 +186,12 @@ module.exports = React.createClass({ this.checkFillState(); }, + onResize: function() { + this.props.onResize(); + this.checkScroll(); + this.refs.geminiPanel.forceUpdate(); + }, + // after an update to the contents of the panel, check that the scroll is // where it ought to be, and set off pagination requests if necessary. checkScroll: function() { @@ -481,7 +492,7 @@ module.exports = React.createClass({ // reflect the fact that we don't necessarily contain a list of messages. // it's not obvious why we have a separate div and ol anyway. return (
      diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index b60098295a..ff05cf8609 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -105,24 +105,52 @@ module.exports = React.createClass({ return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600); }, + componentDidMount: function() { + this.dispatcherRef = dis.register(this.onAction); + this.fixupHeight(); + }, + + componentWillUnmount: function() { + dis.unregister(this.dispatcherRef); + }, + + onAction: function(payload) { + if (payload.action === "timeline_resize") { + this.fixupHeight(); + } + }, + + fixupHeight: function() { + if (!this.refs.image) { + console.warn("Refusing to fix up height on MImageBody with no image element"); + return; + } + + var content = this.props.mxEvent.getContent(); + + var thumbHeight = null; + 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.refs.body.offsetWidth + " or " + this.refs.body.clientWidth); + if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight); + this.refs.image.style.height = thumbHeight + "px"; + // console.log("Image height now", thumbHeight); + }, + render: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); var content = this.props.mxEvent.getContent(); var cli = MatrixClientPeg.get(); - var thumbHeight = null; - if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 800, 600); - - var imgStyle = {}; - if (thumbHeight) imgStyle['maxHeight'] = thumbHeight; - var thumbUrl = this._getThumbUrl(); if (thumbUrl) { return ( - + - {content.body}