mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki 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
Show stats 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 React from 'react';
import { DragDropContext } from 'react-dnd'; import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend'; import HTML5Backend from 'react-dnd-html5-backend';
import classNames from 'classnames';
import KeyCode from 'matrix-react-sdk/lib/KeyCode'; import KeyCode from 'matrix-react-sdk/lib/KeyCode';
import sdk from 'matrix-react-sdk'; import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher'; 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. // We just need to update if any of these things change.
if ( if (
this.props.collapsed !== nextProps.collapsed || this.props.collapsed !== nextProps.collapsed ||
this.props.opacity !== nextProps.opacity this.props.disabled !== nextProps.disabled
) { ) {
return true; return true;
} }
@ -176,21 +177,16 @@ var LeftPanel = React.createClass({
topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />; topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
} }
let classes = "mx_LeftPanel mx_fadable"; let classes = classNames(
if (this.props.collapsed) { "mx_LeftPanel", "mx_fadable",
classes += " collapsed"; {
} "collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled,
}
);
return ( return (
<aside className={classes} <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
style={{
opacity: this.props.opacity,
pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
}}
onKeyDown={ this._onKeyDown }
onFocus={ this._onFocus }
onBlur={ this._onBlur }
>
{ topBox } { topBox }
<CallPreview ConferenceHandler={VectorConferenceHandler} /> <CallPreview ConferenceHandler={VectorConferenceHandler} />
<RoomList <RoomList

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

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

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

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

5
src/skins/vector/css/_common.scss
View file

@ -87,6 +87,11 @@ textarea {
transition: opacity 0.2s ease-in-out; 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. /* 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 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. flexbox to adapt to the new size and cause the view to keep growing.