Dramatically simplify use of mx_fadable

by applying it to parent elements of things that need to be faded.

src/components/structures/FilePanel.js

@@ -116,7 +116,6 @@ const FilePanel = React.createClass({
                     timelineSet={this.state.timelineSet}
                     showUrlPreview = {false}
                     tileShape="file_grid"
-                    disabled={this.props.disabled}
                     empty={_t('There are no visible files in this room')}
                 />
             );

src/components/structures/MessagePanel.js

@@ -79,9 +79,6 @@ module.exports = React.createClass({
         // callback which is called when more content is needed.
         onFillRequest: React.PropTypes.func,
 
-        // whether to display as faded and uninteractable
-        disabled: React.PropTypes.bool,
-
         // className for the panel
         className: React.PropTypes.string.isRequired,
 
@@ -652,10 +649,9 @@ module.exports = React.createClass({
         const style = this.props.hidden ? { display: 'none' } : {};
 
         const className = classNames(
-            this.props.className, "mx_fadable",
+            this.props.className,
             {
                 "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
-                "mx_fadable_faded": this.props.disabled,
             },
         );
 

src/components/structures/NotificationPanel.js

@@ -45,7 +45,6 @@ const NotificationPanel = React.createClass({
                     manageReadMarkers={false}
                     timelineSet={timelineSet}
                     showUrlPreview = {false}
-                    opacity={this.props.opacity}
                     tileShape="notif"
                     empty={_t('You have no visible notifications')}
                 />

src/components/structures/RoomView.js

@@ -1753,15 +1753,9 @@ module.exports = React.createClass({
         let hideMessagePanel = false;
 
         if (this.state.searchResults) {
-            const searchResultsClasses = classNames(
-                "mx_RoomView_messagePanel", "mx_RoomView_searchResultsPanel", "mx_fadable",
-                {
-                    "mx_fadable_faded": this.props.disabled,
-                },
-            );
             searchResultsPanel = (
                 <ScrollPanel ref="searchResultsPanel"
-                    className={searchResultsClasses}
+                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
                     onFillRequest={this.onSearchResultsFillRequest}
                     onResize={this.onSearchResultsResize}
                 >
@@ -1794,21 +1788,14 @@ module.exports = React.createClass({
                 onScroll={this.onMessageListScroll}
                 onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
-                disabled={this.props.disabled}
                 className="mx_RoomView_messagePanel"
             />);
 
         let topUnreadMessagesBar = null;
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
-            const topUnreadMessagesBarClasses = classNames(
-                "mx_RoomView_topUnreadMessagesBar", "mx_fadable",
-                {
-                    "mx_fadable_faded": this.props.disabled,
-                },
-            );
             topUnreadMessagesBar = (
-                <div className={topUnreadMessagesBarClasses}>
+                <div className="mx_RoomView_topUnreadMessagesBar">
                     <TopUnreadMessagesBar
                        onScrollUpClick={this.jumpToReadMarker}
                        onCloseClick={this.forgetReadMarker}
@@ -1817,9 +1804,15 @@ module.exports = React.createClass({
             );
         }
         const statusBarAreaClass = classNames(
-            "mx_RoomView_statusArea", "mx_fadable",
+            "mx_RoomView_statusArea",
             {
                 "mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
+            },
+        );
+
+        const fadableSectionClasses = classNames(
+            "mx_RoomView_body", "mx_fadable",
+            {
                 "mx_fadable_faded": this.props.disabled,
             },
         );
@@ -1841,16 +1834,18 @@ module.exports = React.createClass({
                     onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null}
                 />
                 { auxPanel }
-                { topUnreadMessagesBar }
+                <div className={fadableSectionClasses}>
-                { messagePanel }
+                    { topUnreadMessagesBar }
-                { searchResultsPanel }
+                    { messagePanel }
-                <div className={statusBarAreaClass}>
+                    { searchResultsPanel }
-                    <div className="mx_RoomView_statusAreaBox">
+                    <div className={statusBarAreaClass}>
-                        <div className="mx_RoomView_statusAreaBox_line"></div>
+                        <div className="mx_RoomView_statusAreaBox">
-                        { statusBar }
+                            <div className="mx_RoomView_statusAreaBox_line"></div>
+                            { statusBar }
+                        </div>
                     </div>
+                    { messageComposer }
                 </div>
-                { messageComposer }
             </div>
         );
     },

src/components/structures/TimelinePanel.js

@@ -89,9 +89,6 @@ var TimelinePanel = React.createClass({
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: React.PropTypes.func,
 
-        // whether to display as faded and uninteractable
-        disabled: React.PropTypes.bool,
-
         // maximum number of events to show in a timeline
         timelineCap: React.PropTypes.number,
 
@@ -1157,7 +1154,6 @@ var TimelinePanel = React.createClass({
                           onScroll={this.onMessageListScroll}
                           onFillRequest={this.onMessageListFillRequest}
                           onUnfillRequest={this.onMessageListUnfillRequest}
-                          disabled={this.props.disabled}
                           isTwelveHour={this.state.isTwelveHour}
                           alwaysShowTimestamps={this.state.alwaysShowTimestamps}
                           className={this.props.className}

src/components/views/rooms/MessageComposer.js

@@ -371,7 +371,7 @@ export default class MessageComposer extends React.Component {
         );
 
         return (
-            <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
+            <div className="mx_MessageComposer">
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         { controls }
@@ -410,9 +410,6 @@ MessageComposer.propTypes = {
     // callback when a file to upload is chosen
     uploadFile: React.PropTypes.func.isRequired,
 
-    // opacity for dynamic UI fading effects
-    opacity: React.PropTypes.number,
-
     // string representing the current room app drawer state
     showApps: React.PropTypes.bool,
 };