fix layout bug for general auxPanel

pull/21833/head
Matthew Hodgson 2016-01-10 13:03:37 +00:00
parent 684255044a
commit aa80a5d494
1 changed files with 14 additions and 9 deletions

View File

@ -1065,20 +1065,25 @@ module.exports = React.createClass({
// a minimum of the height of the video element, whilst also capping it from pushing out the page // a minimum of the height of the video element, whilst also capping it from pushing out the page
// so we have to do it via JS instead. In this implementation we cap the height by putting // so we have to do it via JS instead. In this implementation we cap the height by putting
// a maxHeight on the underlying remote video tag. // a maxHeight on the underlying remote video tag.
var auxPanelMaxHeight;
if (this.refs.callView) {
// XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
// header + footer + status + give us at least 100px of scrollback at all times. // header + footer + status + give us at least 100px of scrollback at all times.
auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100); var auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
// XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
// but it's better than the video going missing entirely // but it's better than the video going missing entirely
if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50; if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
if (this.refs.callView) {
// XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
video.style.maxHeight = auxPanelMaxHeight + "px"; video.style.maxHeight = auxPanelMaxHeight + "px";
} }
// we need to do this for general auxPanels too
if (this.refs.auxPanel) {
this.refs.auxPanel.style.maxHeight = auxPanelMaxHeight + "px";
}
}, },
onFullscreenClick: function() { onFullscreenClick: function() {
@ -1404,7 +1409,7 @@ module.exports = React.createClass({
(myMember && myMember.membership === "join") ? this.onLeaveClick : null (myMember && myMember.membership === "join") ? this.onLeaveClick : null
} /> } />
{ fileDropTarget } { fileDropTarget }
<div className="mx_RoomView_auxPanel"> <div className="mx_RoomView_auxPanel" ref="auxPanel">
<CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/> <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
{ conferenceCallNotification } { conferenceCallNotification }
{ aux } { aux }