From 5091aa3b433bc23dfbdd143d7fae24b99e876a6c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 19 Oct 2018 14:40:59 +0200
Subject: [PATCH] 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 | 6 +-
src/components/structures/RoomSubList.js | 45 ++++-----------
src/components/views/rooms/RoomList.js | 70 ------------------------
3 files changed, 15 insertions(+), 106 deletions(-)
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 <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>
);
}
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 <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,