replace weird sidebar snapping with better ui_opacity

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2017-05-19 00:20:32 +01:00
parent 3997974f0f
commit 0e7e4d8595
3 changed files with 18 additions and 24 deletions

View file

@ -194,7 +194,7 @@ export default React.createClass({
ConferenceHandler={this.props.ConferenceHandler} ConferenceHandler={this.props.ConferenceHandler}
scrollStateMap={this._scrollStateMap} scrollStateMap={this._scrollStateMap}
/>; />;
if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.sideOpacity} />; if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.rightOpacity} />;
break; break;
case PageTypes.UserSettings: case PageTypes.UserSettings:
@ -206,7 +206,7 @@ export default React.createClass({
referralBaseUrl={this.props.config.referralBaseUrl} referralBaseUrl={this.props.config.referralBaseUrl}
teamToken={this.props.teamToken} teamToken={this.props.teamToken}
/>; />;
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>; if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
break; break;
case PageTypes.CreateRoom: case PageTypes.CreateRoom:
@ -214,7 +214,7 @@ export default React.createClass({
onRoomCreated={this.props.onRoomCreated} onRoomCreated={this.props.onRoomCreated}
collapsedRhs={this.props.collapse_rhs} collapsedRhs={this.props.collapse_rhs}
/>; />;
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>; if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
break; break;
case PageTypes.RoomDirectory: case PageTypes.RoomDirectory:
@ -223,7 +223,7 @@ export default React.createClass({
collapsedRhs={this.props.collapse_rhs} collapsedRhs={this.props.collapse_rhs}
config={this.props.config.roomDirectory} config={this.props.config.roomDirectory}
/>; />;
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>; if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
break; break;
case PageTypes.HomePage: case PageTypes.HomePage:
@ -232,12 +232,12 @@ export default React.createClass({
teamServerUrl={this.props.config.teamServerConfig.teamServerURL} teamServerUrl={this.props.config.teamServerConfig.teamServerURL}
teamToken={this.props.teamToken} teamToken={this.props.teamToken}
/> />
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/> if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>
break; break;
case PageTypes.UserView: case PageTypes.UserView:
page_element = null; // deliberately null for now page_element = null; // deliberately null for now
right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.sideOpacity} />; right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.rightOpacity} />;
break; break;
} }
@ -266,7 +266,7 @@ export default React.createClass({
<LeftPanel <LeftPanel
selectedRoom={this.props.currentRoomId} selectedRoom={this.props.currentRoomId}
collapsed={this.props.collapse_lhs || false} collapsed={this.props.collapse_lhs || false}
opacity={this.props.sideOpacity} opacity={this.props.leftOpacity}
teamToken={this.props.teamToken} teamToken={this.props.teamToken}
/> />
<main className='mx_MatrixChat_middlePanel'> <main className='mx_MatrixChat_middlePanel'>

View file

@ -119,8 +119,9 @@ module.exports = React.createClass({
collapse_rhs: false, collapse_rhs: false,
ready: false, ready: false,
width: 10000, width: 10000,
sideOpacity: 1.0, leftOpacity: 1.0,
middleOpacity: 1.0, middleOpacity: 1.0,
rightOpacity: 1.0,
version: null, version: null,
newVersion: null, newVersion: null,
@ -547,29 +548,23 @@ module.exports = React.createClass({
}); });
break; break;
case 'hide_right_panel': case 'hide_right_panel':
this.was_rhs_collapsed = this.state.collapse_rhs;
this.setState({ this.setState({
collapse_rhs: true, collapse_rhs: true,
}); });
break; break;
case 'show_right_panel': case 'show_right_panel':
this.was_rhs_collapsed = this.state.collapse_rhs;
this.setState({ this.setState({
collapse_rhs: false, collapse_rhs: false,
}); });
break; break;
// sets the panel to its state before last show/hide event case 'ui_opacity': {
case 'restore_right_panel': const sideDefault = payload.sideOpacity >= 0.0 ? payload.sideOpacity : 1.0;
this.setState({ this.setState({
collapse_rhs: this.was_rhs_collapsed, leftOpacity: payload.leftOpacity >= 0.0 ? payload.leftOpacity : sideDefault,
middleOpacity: payload.middleOpacity || 1.0,
rightOpacity: payload.rightOpacity >= 0.0 ? payload.rightOpacity : sideDefault,
}); });
break; break; }
case 'ui_opacity':
this.setState({
sideOpacity: payload.sideOpacity,
middleOpacity: payload.middleOpacity,
});
break;
case 'set_theme': case 'set_theme':
this._onSetTheme(payload.value); this._onSetTheme(payload.value);
break; break;

View file

@ -34,11 +34,11 @@ module.exports = React.createClass({
componentWillMount: function() { componentWillMount: function() {
this._unmounted = false; this._unmounted = false;
dis.dispatch({action: 'hide_right_panel'});
dis.dispatch({ dis.dispatch({
action: 'ui_opacity', action: 'ui_opacity',
sideOpacity: 1.0, leftOpacity: 1.0,
middleOpacity: 0.3, rightOpacity: 0.3,
middleOpacity: 0.5,
}); });
}, },
@ -50,7 +50,6 @@ module.exports = React.createClass({
componentWillUnmount: function() { componentWillUnmount: function() {
this._unmounted = true; this._unmounted = true;
dis.dispatch({action: 'restore_right_panel'});
dis.dispatch({ dis.dispatch({
action: 'ui_opacity', action: 'ui_opacity',
sideOpacity: 1.0, sideOpacity: 1.0,