From 05e963d1e2acc8b43c1ec5d00bd8b3190f6e2725 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 12 Apr 2016 17:17:08 +0100
Subject: [PATCH] make the UI fadable to help with decluttering

---
 src/components/structures/LeftPanel.js                   | 4 ++--
 src/components/structures/RightPanel.js                  | 4 ++--
 src/skins/vector/css/common.css                          | 9 +++++++++
 .../vector/css/matrix-react-sdk/structures/RoomView.css  | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 0e13f39e4a..5c27abc58e 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -89,7 +89,7 @@ var LeftPanel = React.createClass({
         var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
 
         var collapseButton;
-        var classes = "mx_LeftPanel";
+        var classes = "mx_LeftPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
@@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 { collapseButton }
                 { callPreview }
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 6c8c09f1b3..eab75fe3e2 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -158,13 +158,13 @@ module.exports = React.createClass({
 
         }
 
-        var classes = "mx_RightPanel";
+        var classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index c18d05e04d..f179a20f6c 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -ms-transition: opacity 0.2s ease-in-out;
+    -o-transition: opacity 0.2s ease-in-out;
+}
+
 /* 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.
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index caaeb43a64..4c014461d2 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ccc;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;