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

Hide RoomStatusBar when it displays nothing (#615)

Browse source 
Use CSS class `mx_RoomView_statusArea_expanded` to indicate an expanded status bar. Without this, the status bar may be hidden from view. A 10s debounce will prevent it from bouncing frequently.
This commit is contained in:
Luke Barnard 2017-01-23 16:01:39 +01:00 • committed by GitHub
parent 7a445e05f8
commit a06ecb87bc
2 changed files with 62 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/structures/RoomView.js
View file

@ -146,6 +146,8 @@ module.exports = React.createClass({
showTopUnreadMessagesBar: false,
auxPanelMaxHeight: undefined,
statusBarVisible: false,
};
},
@ -1333,6 +1335,18 @@ module.exports = React.createClass({
// no longer anything to do here
},
onStatusBarVisible: function() {
this.setState({
statusBarVisible: true,
});
},
onStatusBarHidden: function() {
this.setState({
statusBarVisible: false,
});
},
showSettings: function(show) {
// XXX: this is a bit naughty; we should be doing this via props
if (show) {
@ -1515,7 +1529,9 @@ module.exports = React.createClass({
onCancelAllClick={this.onCancelAllClick}
onScrollToBottomClick={this.jumpToLiveTimeline}
onResize={this.onChildResize}
/>;
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
/>;
}
var aux = null;
@ -1669,6 +1685,10 @@ module.exports = React.createClass({
</div>
);
}
let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
if (this.state.statusBarVisible) {
statusBarAreaClass += " mx_RoomView_statusArea_expanded";
}
return (
<div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
@ -1691,7 +1711,7 @@ module.exports = React.createClass({
{ topUnreadMessagesBar }
{ messagePanel }
{ searchResultsPanel }
<div className="mx_RoomView_statusArea mx_fadable" style={{ opacity: this.props.opacity }}>
<div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line"></div>
{ statusBar }