imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the scrollpanel update itself correctly on video resize.

Browse source 
When we first get video, the video component will resize itself. This will
cause the page to be reflowed, but that doesn't trigger an update on the gemini
scrollbar. We therefore need to force an update on the messagepanel. Implement
this by providing an onResize property on the CallView component.

We need to do the same when we change the maxHeight on the video panel.

The same applies to resizing of the MessageComposer. That was previously
handled with a fugly roomView.forceUpdate() from MessageComposer - make it use
the same mechanism.

Finally: the messageComposer is at least 70 pixels, and up to 100 pixels high -
not 36. Fix the auxPanelMaxHeight calculation - and use a static constant
rather than hardcoding the number to avoid this happening again.
This commit is contained in:
Richard van der Hoff 2016-01-11 15:28:59 +00:00 • committed by review.rocks
parent e7740cbc8b
commit 243b2e4587
5 changed files with 67 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/rooms/MessageComposer.js
View file

@ -65,8 +65,17 @@ function mdownToHtml(mdown) {
module.exports = React.createClass({
displayName: 'MessageComposer',
statics: {
// the height we limit the composer to
MAX_HEIGHT: 100,
},
propTypes: {
tabComplete: React.PropTypes.any
tabComplete: React.PropTypes.any,
// a callback which is called when the height of the composer is
// changed due to a change in content.
onResize: React.PropTypes.function,
},
componentWillMount: function() {
@ -237,13 +246,15 @@ module.exports = React.createClass({
// scrollHeight is at least equal to clientHeight, so we have to
// temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
this.refs.textarea.style.height = "0px";
var newHeight = this.refs.textarea.scrollHeight < 100 ? this.refs.textarea.scrollHeight : 100;
var newHeight = Math.min(this.refs.textarea.scrollHeight,
this.constructor.MAX_HEIGHT);
this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
if (this.props.roomView) {
// kick gemini-scrollbar to re-layout
this.props.roomView.forceUpdate();
}
this.oldScrollHeight = this.refs.textarea.scrollHeight;
if (this.props.onResize) {
// kick gemini-scrollbar to re-layout
this.props.onResize();
}
},
onKeyUp: function(ev) {