imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reorganise room directory code so new room is always available

Browse source 
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/9046
This commit is contained in:
J. Ryan Stinnett 2019-03-27 14:17:24 +00:00
parent 8d27cfde36
commit 0466e0a306
1 changed files with 43 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/components/structures/RoomDirectory.js
View file

@ -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,33 +545,48 @@ module.exports = React.createClass({
</ScrollPanel>; </ScrollPanel>;
} }
const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId); let listHeader;
let instance_expected_field_type; if (!this.state.protocolsLoading) {
if ( const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
protocolName && const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
this.protocols &&
this.protocols[protocolName] &&
this.protocols[protocolName].location_fields.length > 0 &&
this.protocols[protocolName].field_types
) {
const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
}
const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
let placeholder = _t('Search for a room'); let instance_expected_field_type;
if (!this.state.instanceId) { if (
placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer; protocolName &&
} else if (instance_expected_field_type) { this.protocols &&
placeholder = instance_expected_field_type.placeholder; this.protocols[protocolName] &&
} this.protocols[protocolName].location_fields.length > 0 &&
this.protocols[protocolName].field_types
let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type); ) {
if (protocolName) { const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
const instance = instanceForInstanceId(this.protocols, this.state.instanceId); instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
showJoinButton = false;
} }
let placeholder = _t('Search for a room');
if (!this.state.instanceId) {
placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
} else if (instance_expected_field_type) {
placeholder = instance_expected_field_type.placeholder;
}
let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
if (protocolName) {
const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
showJoinButton = false;
}
}
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
@ -590,8 +594,6 @@ module.exports = React.createClass({
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>