add back button to all pages and widen textarea

This commit is contained in:
Michael Telatynski 2017-08-10 23:13:40 +01:00
parent 4bb8aecc25
commit 3fd1a366bf
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
1 changed files with 32 additions and 31 deletions

View File

@ -22,13 +22,12 @@ import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
class SendCustomEvent extends React.Component {
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onFinished: React.PropTypes.func.isRequired,
onBack: React.PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this._send = this._send.bind(this);
this.onCancel = this.onCancel.bind(this);
}
async _send() {
@ -46,10 +45,6 @@ class SendCustomEvent extends React.Component {
}
}
onCancel() {
this.props.onFinished(false);
}
render() {
return <div>
<div className="mx_Dialog_content">
@ -71,12 +66,12 @@ class SendCustomEvent extends React.Component {
<label htmlFor="evContent"> Event Content </label>
</div>
<div>
<textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
<textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
</div>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onBack}>Back</button>
<button onClick={this._send}>Send</button>
<button onClick={this.onCancel}>Cancel</button>
</div>
</div>;
}
@ -85,13 +80,12 @@ class SendCustomEvent extends React.Component {
class SendCustomStateEvent extends React.Component {
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onFinished: React.PropTypes.func.isRequired,
onBack: React.PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this._send = this._send.bind(this);
this.onCancel = this.onCancel.bind(this);
}
async _send() {
@ -105,16 +99,12 @@ class SendCustomStateEvent extends React.Component {
this.props.onFinished(false);
const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
Modal.createDialog(ErrorDialog, {
title: 'Failed to send custom event',
title: 'Failed to send custom state event',
description: e.toString(),
});
}
}
onCancel() {
this.props.onFinished(false);
}
render() {
return <div>
<div className="mx_Dialog_content">
@ -143,12 +133,12 @@ class SendCustomStateEvent extends React.Component {
<label htmlFor="evContent"> Event Content </label>
</div>
<div>
<textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} size="64" />
<textarea id="evContent" ref="evContent" className="mx_TextInputDialog_input" defaultValue={"{\n\n}"} cols="64" />
</div>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onBack}>Back</button>
<button onClick={this._send}>Send</button>
<button onClick={this.onCancel}>Cancel</button>
</div>
</div>;
}
@ -157,18 +147,21 @@ class SendCustomStateEvent extends React.Component {
class RoomStateExplorer extends React.Component {
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onFinished: React.PropTypes.func.isRequired,
onBack: React.PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
this.roomStateEvents = room.currentState.events;
this.onBack = this.onBack.bind(this);
}
state = {
eventType: null,
event: null,
};
browseEventType(eventType) {
@ -178,32 +171,40 @@ class RoomStateExplorer extends React.Component {
};
}
onViewSourceClick(ev) {
const ViewSource = sdk.getComponent('structures.ViewSource');
onViewSourceClick(event) {
const self = this;
return () => {
Modal.createDialog(ViewSource, {
content: ev,
}, 'mx_Dialog_viewsource');
self.setState({ event });
};
}
onBack() {
if (this.state.eventType === null) {
this.props.onBack();
} else {
if (this.state.event) {
this.setState({ event: null });
} else if (this.state.eventType) {
this.setState({ eventType: null });
} else {
this.props.onBack();
}
}
render() {
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
const roomStateEvents = room.currentState.events;
if (this.state.event) {
return <div className="mx_ViewSource">
<div className="mx_Dialog_content">
<pre>{JSON.stringify(this.state.event, null, 2)}</pre>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>Back</button>
</div>
</div>;
}
const rows = [];
if (this.state.eventType === null) {
Object.keys(roomStateEvents).forEach((evType) => {
const stateGroup = roomStateEvents[evType];
Object.keys(this.roomStateEvents).forEach((evType) => {
const stateGroup = this.roomStateEvents[evType];
const stateKeys = Object.keys(stateGroup);
let onClickFn;
@ -217,7 +218,7 @@ class RoomStateExplorer extends React.Component {
});
} else {
const evType = this.state.eventType;
const stateGroup = roomStateEvents[evType];
const stateGroup = this.roomStateEvents[evType];
Object.keys(stateGroup).forEach((stateKey) => {
const ev = stateGroup[stateKey];
rows.push(<button key={stateKey} onClick={this.onViewSourceClick(ev)}>{stateKey}</button>);