Merge pull request #4647 from JorikSchellekens/joriks/fix-filepanel-regression

Fix FilePanel and NotificationsPanel regression

Author: JorikSchellekens

res/css/structures/_NotificationPanel.scss

@@ -63,6 +63,10 @@ limitations under the License.
     padding-left: 32px;
     padding-top: 8px;
     position: relative;
+
+    a {
+        display: flex;
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a,

src/components/structures/MessagePanel.js

@@ -108,6 +108,9 @@ export default class MessagePanel extends React.Component {
 
         // whether to show reactions for an event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     };
 
     // Force props to be loaded for useIRCLayout
@@ -119,7 +122,6 @@ export default class MessagePanel extends React.Component {
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
-            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -172,8 +174,6 @@ export default class MessagePanel extends React.Component {
 
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
-
-        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
     }
 
     componentDidMount() {
@@ -183,7 +183,6 @@ export default class MessagePanel extends React.Component {
     componentWillUnmount() {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
-        SettingsStore.unwatchSetting(this._layoutWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -202,17 +201,6 @@ export default class MessagePanel extends React.Component {
         });
     };
 
-    onLayoutChange = () => {
-        this.setState({
-            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
-        });
-    }
-
-    useIRCLayout(ircLayoutSelected) {
-        // if room is null we are not in a normal room list
-        return ircLayoutSelected && this.props.room;
-    }
-
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -614,7 +602,7 @@ export default class MessagePanel extends React.Component {
                         isSelectedEvent={highlight}
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
-                        useIRCLayout={this.state.useIRCLayout}
+                        useIRCLayout={this.props.useIRCLayout}
                     />
                 </TileErrorBoundary>
             </li>,
@@ -797,8 +785,6 @@ export default class MessagePanel extends React.Component {
             this.props.className,
             {
                 "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
-                "mx_IRCLayout": this.state.useIRCLayout,
-                "mx_GroupLayout": !this.state.useIRCLayout,
             },
         );
 

src/components/structures/RoomView.js

@@ -165,6 +165,8 @@ export default createReactClass({
             canReact: false,
             canReply: false,
 
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
     },
@@ -195,6 +197,8 @@ export default createReactClass({
 
         this._roomView = createRef();
         this._searchResultsPanel = createRef();
+
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
     },
 
     _onReadReceiptsChange: function() {
@@ -535,6 +539,14 @@ export default createReactClass({
         // no need to do this as Dir & Settings are now overlays. It just burnt CPU.
         // console.log("Tinter.tint from RoomView.unmount");
         // Tinter.tint(); // reset colourscheme
+
+        SettingsStore.unwatchSetting(this._layoutWatcherRef);
+    },
+
+    onLayoutChange: function() {
+        this.setState({
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+        });
     },
 
     _onRightPanelStoreUpdate: function() {
@@ -1996,6 +2008,13 @@ export default createReactClass({
             highlightedEventId = this.state.initialEventId;
         }
 
+        const messagePanelClassNames = classNames(
+            "mx_RoomView_messagePanel",
+            {
+                "mx_IRCLayout": this.state.useIRCLayout,
+                "mx_GroupLayout": !this.state.useIRCLayout,
+            });
+
         // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
         const messagePanel = (
             <TimelinePanel
@@ -2011,11 +2030,12 @@ export default createReactClass({
                 onScroll={this.onMessageListScroll}
                 onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
-                className="mx_RoomView_messagePanel"
+                className={messagePanelClassNames}
                 membersLoaded={this.state.membersLoaded}
                 permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
                 resizeNotifier={this.props.resizeNotifier}
                 showReactions={true}
+                useIRCLayout={this.state.useIRCLayout}
             />);
 
         let topUnreadMessagesBar = null;

src/components/structures/TimelinePanel.js

@@ -112,6 +112,9 @@ const TimelinePanel = createReactClass({
 
         // whether to show reactions for an event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     },
 
     statics: {
@@ -1447,6 +1450,7 @@ const TimelinePanel = createReactClass({
                 getRelationsForEvent={this.getRelationsForEvent}
                 editState={this.state.editState}
                 showReactions={this.props.showReactions}
+                useIRCLayout={this.props.useIRCLayout}
             />
         );
     },