Merge pull request #5422 from vector-im/luke/fix-interactable-greyed-ui

Use CSS to stop greyed Right/LeftPanel UI from being interactable
This commit is contained in:
Luke Barnard 2017-10-25 15:30:38 +01:00 committed by GitHub
commit 7c7ae3a31f
5 changed files with 50 additions and 39 deletions

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,14 +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 }}
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

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,13 +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 }}>
<aside className={classes}>
<div className="mx_RightPanel_header">
<div className="mx_RightPanel_headerButtonGroup">
{headerButtons}

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);

View File

@ -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.

View File

@ -80,17 +80,32 @@ limitations under the License.
max-width: 1920px ! important;
}
.mx_RoomView_topUnreadMessagesBar {
.mx_RoomView_body {
order: 3;
flex: 1 1 0;
flex-direction: column;
display: flex;
}
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
order: 1;
}
.mx_RoomView_body .mx_RoomView_messagePanel {
order: 2;
}
.mx_RoomView_body .mx_RoomView_statusArea {
order: 3;
}
.mx_RoomView_messagePanel {
.mx_RoomView_body .mx_MessageComposer {
order: 4;
}
flex: 1 1 0;
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
}
@ -131,18 +146,6 @@ limitations under the License.
clear: both;
}
.mx_RoomView_invitePrompt {
order: 2;
min-width: 0px;
max-width: 960px;
width: 100%;
margin: auto;
margin-top: 12px;
margin-bottom: 12px;
}
li.mx_RoomView_myReadMarker_container {
height: 0px;
margin: 0px;
@ -160,8 +163,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_statusArea {
order: 5;
width: 100%;
flex: 0 0 auto;
@ -236,8 +237,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView .mx_MessageComposer {
order: 6;
width: 100%;
flex: 0 0 auto;
margin-right: 2px;