Swap ui_opacity for panel_disabled
Simplify the API for disabling panels in the UI. `mx_fadable_faded` is applied instead of setting opacity.pull/5422/head
parent
bd15a88c89
commit
0561c5bd4f
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -87,6 +87,11 @@ textarea {
|
|||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.mx_fadable.mx_fadable_faded {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
|
||||
Stop the scrollbar view from pushing out the container's overall sizing, which causes
|
||||
flexbox to adapt to the new size and cause the view to keep growing.
|
||||
|
|
Loading…
Reference in New Issue