Merge pull request #268 from matrix-org/matthew/fadable

make the UI fadable to help with decluttering

src/components/views/rooms/MessageComposer.js

@@ -40,6 +40,9 @@ module.exports = React.createClass({
 
         // callback when a file to upload is chosen
         uploadFile: React.PropTypes.func.isRequired,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     onUploadClick: function(ev) {
@@ -182,7 +185,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_MessageComposer">
+            <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         {controls}

src/components/views/rooms/RoomSettings.js

@@ -20,6 +20,7 @@ var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 var Modal = require('../../../Modal');
 var ObjectUtils = require("../../../ObjectUtils");
+var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'RoomSettings',
@@ -69,6 +70,20 @@ module.exports = React.createClass({
         }, (err) => {
             console.error("Failed to get room visibility: " + err);
         });
+
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 0.3,
+            middleOpacity: 0.3,
+        });
+    },
+
+    componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
+        });
     },
 
     setName: function(name) {