mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Swap ui_opacity for panel_disabled

Browse source 
Simplify the API for disabling panels in the UI. `mx_fadable_faded` is applied instead of setting opacity.
This commit is contained in:
Luke Barnard 2017-10-25 10:29:57 +01:00
parent bd15a88c89
commit 0561c5bd4f
4 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,7 @@ limitations under the License.
import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import classNames from 'classnames';
import KeyCode from 'matrix-react-sdk/lib/KeyCode';
import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher';
@ -55,7 +56,7 @@ var LeftPanel = React.createClass({
// We just need to update if any of these things change.
if (
this.props.collapsed !== nextProps.collapsed ||
this.props.opacity !== nextProps.opacity
this.props.disabled !== nextProps.disabled
) {
return true;
}
@ -176,21 +177,16 @@ var LeftPanel = React.createClass({
topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
}
let classes = "mx_LeftPanel mx_fadable";
if (this.props.collapsed) {
classes += " collapsed";
}
let classes = classNames(
"mx_LeftPanel", "mx_fadable",
{
"collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled,
}
);
return (
<aside className={classes}
style={{
opacity: this.props.opacity,
pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
}}
onKeyDown={ this._onKeyDown }
onFocus={ this._onFocus }
onBlur={ this._onBlur }
>
<aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
{ topBox }
<CallPreview ConferenceHandler={VectorConferenceHandler} />
<RoomList

19
src/components/structures/RightPanel.js
View file

@ -18,6 +18,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher';
@ -345,18 +346,16 @@ module.exports = React.createClass({
);
}
let classes = "mx_RightPanel mx_fadable";
if (this.props.collapsed) {
classes += " collapsed";
}
let classes = classNames(
"mx_RightPanel", "mx_fadable",
{
"collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled,
}
);
return (
<aside className={classes}
style={{
opacity: this.props.opacity,
pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
}}
>
<aside className={classes}>
<div className="mx_RightPanel_header">
<div className="mx_RightPanel_headerButtonGroup">
{headerButtons}

12
src/components/structures/RoomDirectory.js
View file

@ -89,17 +89,17 @@ module.exports = React.createClass({
});
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 0.3,
// middleOpacity: 0.3,
// action: 'panel_disable',
// sideDisabled: true,
// middleDisabled: true,
// });
},
componentWillUnmount: function() {
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 1.0,
// middleOpacity: 1.0,
// action: 'panel_disable',
// sideDisabled: false,
// middleDisabled: false,
// });
if (this.filterTimeout) {
clearTimeout(this.filterTimeout);