mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
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:
commit
7c7ae3a31f
@ -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
|
||||
|
@ -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}
|
||||
|
@ -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.
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user