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
+ return
{this._getHeaderJsx()}
; } else { @@ -377,23 +353,26 @@ const RoomSubList = React.createClass({ maxHeight: `${heightEstimation}px`, }; const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); - return
+ const tiles = this.makeRoomTiles(); + tiles.push(...this.props.extraTiles); + return
{this._getHeaderJsx()} - { content } + { tiles }
; } } else { const Loader = sdk.getComponent("elements.Spinner"); - if (this.props.showSpinner) { + let content; + if (this.props.showSpinner && !this.state.hidden) { content = ; } return (
{this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined} - { this.state.hidden ? undefined : content } + { content }
); } diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 180112ddfc..ad4d348b2a 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -406,64 +406,6 @@ module.exports = React.createClass({ } }, - _getEmptyContent: function(section) { - if (this.state.selectedTags.length > 0) { - return null; - } - - const RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); - - if (this.props.collapsed) { - return ; - } - - const StartChatButton = sdk.getComponent('elements.StartChatButton'); - const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); - const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton'); - - let tip = null; - - switch (section) { - case 'im.vector.fake.direct': - tip =
- { _t( - "Press to start a chat with someone", - {}, - { 'StartChatButton': }, - ) } -
; - break; - case 'im.vector.fake.recent': - tip =
- { _t( - "You're not in any rooms yet! Press to make a room or"+ - " to browse the directory", - {}, - { - 'CreateRoomButton': , - 'RoomDirectoryButton': , - }, - ) } -
; - break; - } - - if (tip) { - return
- { tip } -
; - } - - // We don't want to display drop targets if there are no room tiles to drag'n'drop - if (this.state.totalRoomCount === 0) { - return null; - } - - const labelText = phraseForSection(section); - - return ; - }, - _getHeaderItems: function(section) { const StartChatButton = sdk.getComponent('elements.StartChatButton'); const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton'); @@ -551,14 +493,12 @@ module.exports = React.createClass({ list: self.state.lists['m.favourite'], label: _t('Favourites'), tagName: "m.favourite", - emptyContent: this._getEmptyContent('m.favourite'), order: "manual", }, { list: self.state.lists['im.vector.fake.direct'], label: _t('People'), tagName: "im.vector.fake.direct", - emptyContent: this._getEmptyContent('im.vector.fake.direct'), headerItems: this._getHeaderItems('im.vector.fake.direct'), order: "recent", alwaysShowHeader: true, @@ -567,7 +507,6 @@ module.exports = React.createClass({ { list: self.state.lists['im.vector.fake.recent'], label: _t('Rooms'), - emptyContent: this._getEmptyContent('im.vector.fake.recent'), headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", onAddRoom: () => {dis.dispatch({action: 'view_create_room'})}, @@ -582,7 +521,6 @@ module.exports = React.createClass({ key: tagName, label: labelForTagName(tagName), tagName: tagName, - emptyContent: this._getEmptyContent(tagName), order: "manual", }; }); @@ -592,18 +530,10 @@ module.exports = React.createClass({ list: self.state.lists['m.lowpriority'], label: _t('Low priority'), tagName: "m.lowpriority", - emptyContent: this._getEmptyContent('m.lowpriority'), order: "recent", }, { list: self.state.lists['im.vector.fake.archived'], - emptyContent: self.props.collapsed ? - null : -
-
- { _t('You have no historical rooms') } -
-
, label: _t('Historical'), order: "recent", alwaysShowHeader: true,