mirror of https://github.com/vector-im/riot-web
Reorganise room directory code so new room is always available
This reorganises the room directory so that the new room buttons is always available no matter what state the overall directory is in. Part of https://github.com/vector-im/riot-web/issues/9046pull/21833/head
parent
8d27cfde36
commit
0466e0a306
|
@ -515,20 +515,9 @@ module.exports = React.createClass({
|
||||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
|
|
||||||
// TODO: clean this up
|
|
||||||
if (this.state.protocolsLoading) {
|
|
||||||
return (
|
|
||||||
<div className="mx_RoomDirectory">
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let content;
|
let content;
|
||||||
if (this.state.loading) {
|
if (this.state.protocolsLoading || this.state.loading) {
|
||||||
content = <div className="mx_RoomDirectory">
|
content = <Loader />;
|
||||||
<Loader />
|
|
||||||
</div>;
|
|
||||||
} else {
|
} else {
|
||||||
const rows = this.getRows();
|
const rows = this.getRows();
|
||||||
// we still show the scrollpanel, at least for now, because
|
// we still show the scrollpanel, at least for now, because
|
||||||
|
@ -556,6 +545,11 @@ module.exports = React.createClass({
|
||||||
</ScrollPanel>;
|
</ScrollPanel>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let listHeader;
|
||||||
|
if (!this.state.protocolsLoading) {
|
||||||
|
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
|
||||||
|
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
|
||||||
|
|
||||||
const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
|
const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
|
||||||
let instance_expected_field_type;
|
let instance_expected_field_type;
|
||||||
if (
|
if (
|
||||||
|
@ -585,13 +579,21 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
listHeader = <div className="mx_RoomDirectory_listheader">
|
||||||
|
<DirectorySearchBox
|
||||||
|
className="mx_RoomDirectory_searchbox"
|
||||||
|
onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
|
||||||
|
placeholder={placeholder} showJoinButton={showJoinButton}
|
||||||
|
/>
|
||||||
|
<NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
const createRoomButton = (<AccessibleButton
|
const createRoomButton = (<AccessibleButton
|
||||||
onClick={this.onCreateRoomClicked}
|
onClick={this.onCreateRoomClicked}
|
||||||
className="mx_RoomDirectory_createRoom"
|
className="mx_RoomDirectory_createRoom"
|
||||||
>{_t("Create new room")}</AccessibleButton>);
|
>{_t("Create new room")}</AccessibleButton>);
|
||||||
|
|
||||||
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
|
|
||||||
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
|
|
||||||
return (
|
return (
|
||||||
<BaseDialog
|
<BaseDialog
|
||||||
className={'mx_RoomDirectory_dialog'}
|
className={'mx_RoomDirectory_dialog'}
|
||||||
|
@ -602,14 +604,7 @@ module.exports = React.createClass({
|
||||||
>
|
>
|
||||||
<div className="mx_RoomDirectory">
|
<div className="mx_RoomDirectory">
|
||||||
<div className="mx_RoomDirectory_list">
|
<div className="mx_RoomDirectory_list">
|
||||||
<div className="mx_RoomDirectory_listheader">
|
{listHeader}
|
||||||
<DirectorySearchBox
|
|
||||||
className="mx_RoomDirectory_searchbox"
|
|
||||||
onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
|
|
||||||
placeholder={placeholder} showJoinButton={showJoinButton}
|
|
||||||
/>
|
|
||||||
<NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
|
|
||||||
</div>
|
|
||||||
{content}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue