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

room directory makeover

Browse source
This commit is contained in:
Bruno Windels 2019-01-29 15:34:58 +01:00
parent cc2b6f9524
commit 9f1b4ac4cc
13 changed files with 157 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/structures/LoggedInView.js
View file

@ -323,8 +323,6 @@ const LoggedInView = React.createClass({
_onScrollKeyPressed: function(ev) {
if (this.refs.roomView) {
this.refs.roomView.handleScrollKey(ev);
} else if (this.refs.roomDirectory) {
this.refs.roomDirectory.handleScrollKey(ev);
}
},
@ -422,7 +420,6 @@ const LoggedInView = React.createClass({
const LeftPanel = sdk.getComponent('structures.LeftPanel');
const RoomView = sdk.getComponent('structures.RoomView');
const UserSettings = sdk.getComponent('structures.UserSettings');
const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
const HomePage = sdk.getComponent('structures.HomePage');
const GroupView = sdk.getComponent('structures.GroupView');
const MyGroups = sdk.getComponent('structures.MyGroups');
@ -464,10 +461,7 @@ const LoggedInView = React.createClass({
break;
case PageTypes.RoomDirectory:
pageElement = <RoomDirectory
ref="roomDirectory"
config={this.props.config.roomDirectory}
/>;
// handled by MatrixChat for now
break;
case PageTypes.HomePage:

8
src/components/structures/MatrixChat.js
View file

@ -615,8 +615,12 @@ export default React.createClass({
}
break;
case 'view_room_directory':
this._setPage(PageTypes.RoomDirectory);
this.notifyNewScreen('directory');
const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
config: this.props.config,
}, 'mx_RoomDirectory_dialogWrapper');
// this._setPage(PageTypes.RoomDirectory);
// this.notifyNewScreen('directory');
break;
case 'view_my_groups':
this._setPage(PageTypes.MyGroups);

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

@ -44,6 +44,7 @@ module.exports = React.createClass({
propTypes: {
config: React.PropTypes.object,
onFinished: React.PropTypes.func.isRequired,
},
getDefaultProps: function() {
@ -64,6 +65,16 @@ module.exports = React.createClass({
};
},
childContextTypes: {
matrixClient: React.PropTypes.object,
},
getChildContext: function() {
return {
matrixClient: MatrixClientPeg.get(),
};
},
componentWillMount: function() {
this._unmounted = false;
this.nextBatch = null;
@ -301,6 +312,11 @@ module.exports = React.createClass({
}
},
onCreateRoomClicked: function() {
this.props.onFinished();
dis.dispatch({action: 'view_create_room'});
},
onJoinClick: function(alias) {
// If we don't have a particular instance id selected, just show that rooms alias
if (!this.state.instanceId) {
@ -348,6 +364,7 @@ module.exports = React.createClass({
},
showRoom: function(room, room_alias) {
this.props.onFinished();
const payload = {action: 'view_room'};
if (room) {
// Don't let the user view a room they won't be able to either
@ -496,11 +513,13 @@ module.exports = React.createClass({
render: function() {
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const Loader = sdk.getComponent("elements.Spinner");
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
// TODO: clean this up
if (this.state.protocolsLoading) {
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title={ _t('Directory') } />
<Loader />
</div>
);
@ -554,7 +573,7 @@ module.exports = React.createClass({
let placeholder = _t('Search for a room');
if (!this.state.instanceId) {
placeholder = _t('#example') + ':' + this.state.roomServer;
placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
} else if (instance_expected_field_type) {
placeholder = instance_expected_field_type.placeholder;
}
@ -567,23 +586,35 @@ module.exports = React.createClass({
}
}
const createRoomButton = (<AccessibleButton
onClick={this.onCreateRoomClicked}
className="mx_RoomDirectory_createRoom"
>{_t("Create new room")}</AccessibleButton>);
const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
return (
<div className="mx_RoomDirectory">
<SimpleRoomHeader title={ _t('Directory') } icon={require("../../../res/img/icons-directory.svg")} />
<div className="mx_RoomDirectory_list">
<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} />
<BaseDialog
className={'mx_RoomDirectory_dialog'}
hasCancel={true}
onFinished={this.props.onFinished}
headerButton={createRoomButton}
title={_t("Room directory")}
>
<div className="mx_RoomDirectory">
<div className="mx_RoomDirectory_list">
<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>
{content}
</div>
{content}
</div>
</div>
</BaseDialog>
);
},
});

12
src/components/views/dialogs/BaseDialog.js
View file

@ -111,7 +111,6 @@ export default React.createClass({
let cancelButton;
if (this.props.hasCancel) {
cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
<TintableSvg src={require("../../../../res/img/icons-close-button.svg")} width="35" height="35" />
</AccessibleButton>;
}
@ -128,10 +127,15 @@ export default React.createClass({
// AT users can skip its presentation.
aria-describedby={this.props.contentId}
>
{ cancelButton }
<div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
{ this.props.title }
<div className={classNames('mx_Dialog_header', {
'mx_Dialog_headerWithButton': !!this.props.headerButton,
})}>
<div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
{ this.props.title }
</div>
{ this.props.headerButton }
</div>
{ cancelButton }
{ this.props.children }
</FocusTrap>
);

2
src/components/views/directory/NetworkDropdown.js
View file

@ -232,7 +232,7 @@ export default class NetworkDropdown extends React.Component {
}
return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
<div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
<div className="mx_NetworkDropdown_input mx_no_textinput" onClick={this.onInputClick}>
{current_value}
<span className="mx_NetworkDropdown_arrow"></span>
{menu}

22
src/components/views/elements/DirectorySearchBox.js
View file

@ -17,6 +17,8 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
export default class DirectorySearchBox extends React.Component {
constructor() {
@ -74,6 +76,8 @@ export default class DirectorySearchBox extends React.Component {
}
render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const searchbox_classes = {
mx_DirectorySearchBox: true,
};
@ -81,27 +85,21 @@ export default class DirectorySearchBox extends React.Component {
let join_button;
if (this.props.showJoinButton) {
join_button = <span className="mx_DirectorySearchBox_joinButton"
join_button = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
onClick={this._onJoinButtonClick}
>
Join
</span>;
>{_t("Join")}</AccessibleButton>;
}
return <span className={classnames(searchbox_classes)}>
<div className="mx_DirectorySearchBox_container">
return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>
<input type="text" name="dirsearch" value={this.state.value}
className="mx_DirectorySearchBox_input"
className="mx_textinput_icon mx_textinput_search"
ref={this._collectInput}
onChange={this._onChange} onKeyUp={this._onKeyUp}
placeholder={this.props.placeholder} autoFocus
/>
{ join_button }
<span className="mx_DirectorySearchBox_clear_wrapper">
<span className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
</span>
</div>
</span>;
<AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick}></AccessibleButton>
</div>;
}
}

2
src/components/views/rooms/RoomList.js
View file

@ -689,7 +689,7 @@ module.exports = React.createClass({
headerItems: this._getHeaderItems('im.vector.fake.recent'),
order: "recent",
incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
onAddRoom: () => {dis.dispatch({action: 'view_create_room'})},
onAddRoom: () => {dis.dispatch({action: 'view_room_directory'})},
},
];
const tagSubLists = Object.keys(this.state.lists)