get rid of emptyContent, also cleanup sublist render method

also assume empty list in css by default and add nonEmpty class

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 {
+.mx_RoomSubList_nonEmpty {
-    min-height: unset;
+    min-height: 80px;
+    flex: 1;
 }
 
 

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 <div className={["mx_RoomSubList", "mx_RoomSubList_hidden"]}>
+                return <div className={subListClasses}>
                     {this._getHeaderJsx()}
                 </div>;
             } else {
@@ -377,23 +353,26 @@ const RoomSubList = React.createClass({
                     maxHeight: `${heightEstimation}px`,
                 };
                 const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-                return <div className={"mx_RoomSubList"} style={style}>
+                const tiles = this.makeRoomTiles();
+                tiles.push(...this.props.extraTiles);
+                return <div className={subListClasses} style={style}>
                     {this._getHeaderJsx()}
                     <GeminiScrollbarWrapper>
-                        { content }
+                        { tiles }
                     </GeminiScrollbarWrapper>
                 </div>;
             }
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
-            if (this.props.showSpinner) {
+            let content;
+            if (this.props.showSpinner && !this.state.hidden) {
                 content = <Loader />;
             }
 
             return (
                 <div className="mx_RoomSubList">
                     {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
-                    { this.state.hidden ? undefined : content }
+                    { content }
                 </div>
             );
         }

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 <RoomDropTarget label="" />;
-        }
-
-        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 = <div className="mx_RoomList_emptySubListTip">
-                    { _t(
-                        "Press <StartChatButton> to start a chat with someone",
-                        {},
-                        { 'StartChatButton': <StartChatButton size="16" callout={true} /> },
-                    ) }
-                </div>;
-                break;
-            case 'im.vector.fake.recent':
-                tip = <div className="mx_RoomList_emptySubListTip">
-                    { _t(
-                        "You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+
-                        " <RoomDirectoryButton> to browse the directory",
-                        {},
-                        {
-                            'CreateRoomButton': <CreateRoomButton size="16" callout={true} />,
-                            'RoomDirectoryButton': <RoomDirectoryButton size="16" callout={true} />,
-                        },
-                    ) }
-                </div>;
-                break;
-        }
-
-        if (tip) {
-            return <div className="mx_RoomList_emptySubListTip_container">
-                { tip }
-            </div>;
-        }
-
-        // 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 <RoomDropTarget label={labelText} />;
-    },
-
     _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 :
-                    <div className="mx_RoomList_emptySubListTip_container">
-                        <div className="mx_RoomList_emptySubListTip">
-                            { _t('You have no historical rooms') }
-                        </div>
-                    </div>,
                 label: _t('Historical'),
                 order: "recent",
                 alwaysShowHeader: true,