diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index b66c015ade..5ffb3039e2 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -15,14 +15,14 @@ limitations under the License. */ .mx_RoomSubList { - min-height: 80px; flex: 0; display: flex; flex-direction: column; } -.mx_RoomSubList_hidden { - min-height: unset; +.mx_RoomSubList_nonEmpty { + min-height: 80px; + flex: 1; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c07f8306f1..003c0541a2 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -53,7 +53,6 @@ const RoomSubList = React.createClass({ alwaysShowHeader: PropTypes.bool, incomingCall: PropTypes.object, searchFilter: PropTypes.string, - emptyContent: PropTypes.node, // content shown if the list is empty headerItems: PropTypes.node, // content shown in the sublist header extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles }, @@ -337,37 +336,14 @@ const RoomSubList = React.createClass({ }, render: function() { - let content; - - if (this.props.showEmpty) { - // this is new behaviour with still controversial UX in that in hiding RoomSubLists the drop zones for DnD - // are also gone so when filtering users can't DnD rooms to some tags but is a lot cleaner otherwise. - if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) { - content = this.props.emptyContent; - } else { - content = this.makeRoomTiles(); - content.push(...this.props.extraTiles); - } - } else { - if (this.state.sortedList.length === 0 && this.props.extraTiles.length === 0) { - // if no search filter is applied and there is a placeholder defined then show it, otherwise show nothing - if (!this.props.searchFilter && this.props.emptyContent) { - content = this.props.emptyContent; - } else { - // don't show an empty sublist - return null; - } - } else { - content = this.makeRoomTiles(); - content.push(...this.props.extraTiles); - } - } - const len = this.state.sortedList.length + this.props.extraTiles.length; - if (len) { + const subListClasses = classNames({ + "mx_RoomSubList": true, + "mx_RoomSubList_nonEmpty": len && !this.state.hidden, + }); if (this.state.hidden) { - return