make the UI fadable to help with decluttering

src/components/structures/MatrixChat.js

@@ -67,6 +67,8 @@ module.exports = React.createClass({
             collapse_rhs: false,
             ready: false,
             width: 10000,
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
         };
         if (s.logged_in) {
             if (MatrixClientPeg.get().getRooms().length) {
@@ -534,6 +536,12 @@ module.exports = React.createClass({
                     collapse_rhs: false,
                 });
                 break;
+            case 'ui_opacity':
+                this.setState({
+                    sideOpacity: payload.sideOpacity,
+                    middleOpacity: payload.middleOpacity,
+                });
+                break;
         }
     },
 
@@ -1060,21 +1068,22 @@ module.exports = React.createClass({
                             highlightedEventId={this.state.highlightedEventId}
                             eventPixelOffset={this.state.initialEventPixelOffset}
                             key={this.state.currentRoom}
+                            opacity={this.state.middleOpacity}
                             ConferenceHandler={this.props.ConferenceHandler} />
                     );
-                    right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
+                    right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity} />
                     break;
                 case this.PageTypes.UserSettings:
                     page_element = <UserSettings onClose={this.onUserSettingsClose} version={this.state.version} />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.CreateRoom:
                     page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.RoomDirectory:
                     page_element = <RoomDirectory />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
             }
 
@@ -1098,7 +1107,7 @@ module.exports = React.createClass({
                 <div className="mx_MatrixChat_wrapper">
                     {topBar}
                     <div className={bodyClasses}>
-                        <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
+                        <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} opacity={this.state.sideOpacity}/>
                         <main className="mx_MatrixChat_middlePanel">
                             {page_element}
                         </main>

src/components/structures/MessagePanel.js

@@ -65,6 +65,9 @@ module.exports = React.createClass({
 
         // callback which is called when more content is needed.
         onFillRequest: React.PropTypes.func,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     componentWillMount: function() {
@@ -423,12 +426,15 @@ module.exports = React.createClass({
             bottomSpinner = <li key="_bottomSpinner"><Spinner /></li>;
         }
 
+        var style = this.props.hidden ? { display: 'none' } : {};
+        style.opacity = this.props.opacity;
+
         return (
-            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
+            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel mx_fadable"
                     onScroll={ this.props.onScroll } 
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }
-                    style={ this.props.hidden ? { display: 'none' } : {} }
+                    style={ style }
                     stickyBottom={ this.props.stickyBottom }>
                 {topSpinner}
                 {this._getEventTiles()}

src/components/structures/RoomView.js

@@ -1339,7 +1339,7 @@ module.exports = React.createClass({
             messageComposer =
                 <MessageComposer
                     room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
-                    callState={this.state.callState} tabComplete={this.tabComplete} />
+                    callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
@@ -1394,8 +1394,12 @@ module.exports = React.createClass({
 
         if (this.state.searchResults) {
             searchResultsPanel = (
-                <ScrollPanel ref="searchResultsPanel" className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                <ScrollPanel ref="searchResultsPanel"
-                        onFillRequest={ this.onSearchResultsFillRequest } onResize={ this.onSearchResultsResize }>
+                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                    onFillRequest={ this.onSearchResultsFillRequest }
+                    onResize={ this.onSearchResultsResize }
+                    style={{ opacity: this.props.opacity }}
+                >
                     <li className={scrollheader_classes}></li>
                     {this.getSearchResultTiles()}
                 </ScrollPanel>
@@ -1412,6 +1416,7 @@ module.exports = React.createClass({
                 eventPixelOffset={this.props.eventPixelOffset}
                 onScroll={ this.onMessageListScroll }
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
+                opacity={ this.props.opacity }
             />);
 
         var topUnreadMessagesBar = null;
@@ -1446,7 +1451,7 @@ module.exports = React.createClass({
                 { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
-                <div className="mx_RoomView_statusArea">
+                <div className="mx_RoomView_statusArea mx_fadable" style={{ opacity: this.props.opacity }}>
                     <div className="mx_RoomView_statusAreaBox">
                         <div className="mx_RoomView_statusAreaBox_line"></div>
                         { statusBar }

src/components/structures/TimelinePanel.js

@@ -76,6 +76,9 @@ var TimelinePanel = React.createClass({
 
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: React.PropTypes.func,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     statics: {
@@ -861,6 +864,7 @@ var TimelinePanel = React.createClass({
                     stickyBottom={ stickyBottom }
                     onScroll={ this.onMessageListScroll }
                     onFillRequest={ this.onMessageListFillRequest }
+                    opacity={ this.props.opacity }
             />
         );
     },

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