From d6732496818a134d2f732a6cb2b54f41942fffe0 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 23 Feb 2016 11:06:16 +0000 Subject: [PATCH] Wire up StatusBar size changes to a geminipanel update When the statusbar changes size, we need to tell the gemini panel to update. This is slightly tortuous as figuring out the size of the statusbar isn't completely trivial. Fixes https://github.com/vector-im/vector-web/issues/945 and https://github.com/vector-im/vector-web/issues/986 --- src/components/structures/RoomStatusBar.js | 42 ++++++++++++++++++++++ src/components/structures/RoomView.js | 8 +++-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js index 75cb06daf6..2e0897e3d0 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.js @@ -51,6 +51,11 @@ module.exports = React.createClass({ // callback for when the user clicks on the 'scroll to bottom' button onScrollToBottomClick: React.PropTypes.func, + + // callback for when we do something that changes the size of the + // status bar. This is used to trigger a re-layout in the parent + // component. + onResize: React.PropTypes.func, }, getInitialState: function() { @@ -63,6 +68,12 @@ module.exports = React.createClass({ MatrixClientPeg.get().on("sync", this.onSyncStateChange); }, + componentDidUpdate: function(prevProps, prevState) { + if(this.props.onResize && this._checkForResize(prevProps, prevState)) { + this.props.onResize(); + } + }, + componentWillUnmount: function() { // we may have entirely lost our client as we're logging out before clicking login on the guest bar... if (MatrixClientPeg.get()) { @@ -79,6 +90,37 @@ module.exports = React.createClass({ }); }, + // determine if we need to call onResize + _checkForResize: function(prevProps, prevState) { + // figure out the old height and the new height of the status bar. We + // don't need the actual height - just whether it is likely to have + // changed - so we use '0' to indicate normal size, and other values to + // indicate other sizes. + var oldSize, newSize; + + if (prevState.syncState === "ERROR") { + oldSize = 1; + } else if (prevProps.tabCompleteEntries) { + oldSize = 0; + } else if (prevProps.hasUnsentMessages) { + oldSize = 2; + } else { + oldSize = 0; + } + + if (this.state.syncState === "ERROR") { + newSize = 1; + } else if (this.props.tabCompleteEntries) { + newSize = 0; + } else if (this.props.hasUnsentMessages) { + newSize = 2; + } else { + newSize = 0; + } + + return newSize != oldSize; + }, + // return suitable content for the image on the left of the status bar. // // if wantPlaceholder is true, we include a "..." placeholder if diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 856ab955a4..61248313db 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1444,9 +1444,10 @@ module.exports = React.createClass({ }, onChildResize: function() { - // When the video or the message composer resizes, the scroll panel - // also changes size. Work around GeminiScrollBar fail by telling it - // about it. This also ensures that the scroll offset is updated. + // When the video, status bar, or the message composer resizes, the + // scroll panel also changes size. Work around GeminiScrollBar fail by + // telling it about it. This also ensures that the scroll offset is + // updated. if (this.refs.messagePanel) { this.refs.messagePanel.forceUpdate(); } @@ -1577,6 +1578,7 @@ module.exports = React.createClass({ hasActiveCall={inCall} onResendAllClick={this.onResendAllClick} onScrollToBottomClick={this.jumpToLiveTimeline} + onResize={this.onChildResize} /> }