diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 7f74d65e938..8e29977786a 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -616,6 +616,14 @@ export default class RoomList extends React.PureComponent { alwaysVisible = false; } + let forceExpanded = false; + if ( + (this.props.activeSpace === MetaSpace.Favourites && orderedTagId === DefaultTagID.Favourite) || + (this.props.activeSpace === MetaSpace.People && orderedTagId === DefaultTagID.DM) + ) { + forceExpanded = true; + } + // The cost of mounting/unmounting this component offsets the cost // of keeping it in the DOM and hiding it when it is not required return { resizeNotifier={this.props.resizeNotifier} alwaysVisible={alwaysVisible} onListCollapse={this.props.onListCollapse} + forceExpanded={forceExpanded} />; }); } diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 292bde921a5..c1c6672b721 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -79,6 +79,7 @@ interface IProps { tagId: TagID; showSkeleton?: boolean; alwaysVisible?: boolean; + forceExpanded?: boolean; resizeNotifier: ResizeNotifier; extraTiles?: ReactComponentElement[]; onListCollapse?: (isExpanded: boolean) => void; @@ -460,6 +461,7 @@ export default class RoomSublist extends React.Component { }; private toggleCollapsed = () => { + if (this.props.forceExpanded) return; this.layout.isCollapsed = this.state.isExpanded; this.setState({ isExpanded: !this.layout.isCollapsed }); if (this.props.onListCollapse) { @@ -508,7 +510,7 @@ export default class RoomSublist extends React.Component { }; private renderVisibleTiles(): React.ReactElement[] { - if (!this.state.isExpanded) { + if (!this.state.isExpanded && !this.props.forceExpanded) { // don't waste time on rendering return []; } @@ -516,7 +518,11 @@ export default class RoomSublist extends React.Component { const tiles: React.ReactElement[] = []; if (this.state.rooms) { - const visibleRooms = this.state.rooms.slice(0, this.numVisibleTiles); + let visibleRooms = this.state.rooms; + if (!this.props.forceExpanded) { + visibleRooms = visibleRooms.slice(0, this.numVisibleTiles); + } + for (const room of visibleRooms) { tiles.push( { // to avoid spending cycles on slicing. It's generally fine to do this though // as users are unlikely to have more than a handful of tiles when the extra // tiles are used. - if (tiles.length > this.numVisibleTiles) { + if (tiles.length > this.numVisibleTiles && !this.props.forceExpanded) { return tiles.slice(0, this.numVisibleTiles); } @@ -731,7 +737,13 @@ export default class RoomSublist extends React.Component { }); let content = null; - if (visibleTiles.length > 0) { + if (visibleTiles.length > 0 && this.props.forceExpanded) { + content =
+
+ { visibleTiles } +
+
; + } else if (visibleTiles.length > 0) { const layout = this.layout; // to shorten calls const minTiles = Math.min(layout.minVisibleTiles, this.numTiles);