From cf92fc37d42c10616835124543790aad1ff9b84d Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 22 Jun 2020 12:51:53 -0600
Subject: [PATCH] Fix layout of minimized view for new room list
---
res/css/views/rooms/_RoomSublist2.scss | 8 ++++----
src/components/views/rooms/RoomSublist2.tsx | 19 +++++++++++++++----
2 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 66615fb6a8..24151b15b0 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/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 {
- order: 2;
+ .mx_RoomSublist2_stickable {
+ 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
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 08a41570e3..4a145ede11 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/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}
- <div className="mx_RoomSublist2_badgeContainer">
- {badge}
- </div>
+ {this.props.isMinimized ? null : addRoomButton}
+ {this.props.isMinimized ? null : badgeContainer}
</div>
+ {this.props.isMinimized ? badgeContainer : null}
+ {this.props.isMinimized ? addRoomButton : null}
</div>
);
}}