Merge pull request #4808 from matrix-org/travis/room-list/collapsed

Fix layout of minimized view for new room list

res/css/views/rooms/_RoomSublist2.scss

@@ -304,18 +304,18 @@ limitations under the License.
             position: relative;
 
             .mx_RoomSublist2_badgeContainer {
-                order: 1;
+                order: 0;
                 align-self: flex-end;
                 margin-right: 0;
             }
 
-            .mx_RoomSublist2_headerText {
+            .mx_RoomSublist2_stickable {
-                order: 2;
+                order: 1;
                 max-width: 100%;
             }
 
             .mx_RoomSublist2_auxButton {
-                order: 4;
+                order: 2;
                 visibility: visible;
                 width: 32px !important; // !important to override hover styles
                 height: 32px !important; // !important to override hover styles

src/components/views/rooms/RoomSublist2.tsx

@@ -291,7 +291,18 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         'mx_RoomSublist2_headerContainer_withAux': !!addRoomButton,
                     });
 
+                    const badgeContainer = (
+                        <div className="mx_RoomSublist2_badgeContainer">
+                            {badge}
+                        </div>
+                    );
+
                     // TODO: a11y (see old component)
+                    // Note: the addRoomButton conditionally gets moved around
+                    // the DOM depending on whether or not the list is minimized.
+                    // If we're minimized, we want it below the header so it
+                    // doesn't become sticky.
+                    // The same applies to the notification badge.
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
@@ -307,11 +318,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     <span>{this.props.label}</span>
                                 </AccessibleButton>
                                 {this.renderMenu()}
-                                {addRoomButton}
+                                {this.props.isMinimized ? null : addRoomButton}
-                                <div className="mx_RoomSublist2_badgeContainer">
+                                {this.props.isMinimized ? null : badgeContainer}
-                                    {badge}
-                                </div>
                             </div>
+                            {this.props.isMinimized ? badgeContainer : null}
+                            {this.props.isMinimized ? addRoomButton : null}
                         </div>
                     );
                 }}