mirror of
https://github.com/element-hq/element-web
synced 2024-11-25 18:55:58 +03:00
get rid of emptyContent, also cleanup sublist render method
also assume empty list in css by default and add nonEmpty class
This commit is contained in:
Bruno Windels
parent
57a9d3ca98
commit
5091aa3b43
3 changed files with 15 additions and 106 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue