From bd15a88c89d2a11eecb638984b1cac51cf93a84e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Oct 2017 17:10:29 +0100
Subject: [PATCH 1/3] Use CSS to stop greyed Right/LeftPanel UI from being
 interactable

---
 src/components/structures/LeftPanel.js  | 11 +++++++++--
 src/components/structures/RightPanel.js |  7 ++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 1988dc5e..b48d03be 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -182,8 +182,15 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}
-                   onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+            <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 }
+            >
                 { topBox }
                 <CallPreview ConferenceHandler={VectorConferenceHandler} />
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 0225f765..c32c0646 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -351,7 +351,12 @@ module.exports = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
+            <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_headerButtonGroup">
                         {headerButtons}

From 0561c5bd4f785d1f2f1d7ccc3399823e9205c0ad Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 10:29:57 +0100
Subject: [PATCH 2/3] Swap ui_opacity for panel_disabled

Simplify the API for disabling panels in the UI. `mx_fadable_faded` is applied instead of setting opacity.
---
 src/components/structures/LeftPanel.js     | 24 +++++++++-------------
 src/components/structures/RightPanel.js    | 19 ++++++++---------
 src/components/structures/RoomDirectory.js | 12 +++++------
 src/skins/vector/css/_common.scss          |  5 +++++
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index b48d03be..60f07a62 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -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
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index c32c0646..6b025ac9 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -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}
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index cd9ac565..323af86c 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -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);
diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index bf742cd0..a9b80928 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -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.

From 967905126956c896223d4a9fe772a9edd7f53693 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 15:16:28 +0100
Subject: [PATCH 3/3] Introduce mx_RoomView_body for fadable things in the
 RoomView

Part of simplifying use of mx_fadable
---
 .../structures/_RoomView.scss                 | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index faed5b8b..dfd91885 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -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;