gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/views/dialogs/DevtoolsDialog.js
View File

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