Make devTools styling more consistent and easier to edit event data.

This commit is contained in:
Richard Lewis 2018-05-23 17:18:33 +01:00
parent a6cc0406dd
commit 9f9cde12ce
2 changed files with 21 additions and 7 deletions

View file

@ -14,8 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DevTools_content {
margin: 10px 0;
}
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
max-width: 684px;
width: 100%;
}
.mx_DevTools_LabalCell {
font-weight: bold;
}
.mx_DevTools_label_left {
@ -38,7 +48,6 @@ limitations under the License.
.mx_DevTools_inputLabelCell
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
@ -46,7 +55,6 @@ limitations under the License.
.mx_DevTools_inputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
@ -62,6 +70,12 @@ limitations under the License.
font-size: 16px;
}
.mx_DevTools_textarea {
font-size: 12px;
min-height: 250px;
width: 100%;
}
.mx_DevTools_tgl {
display: none;

View file

@ -132,17 +132,17 @@ class SendCustomEvent extends GenericEditor {
}
return <div>
<div className="mx_Dialog_content">
<div className="mx_DevTools_content">
{ this.textInput('eventType', _t('Event Type')) }
{ this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
<br />
<div className="mx_UserSettings_profileLabelCell">
<div className="mx_DevTools_LabalCell">
<label htmlFor="evContent"> { _t('Event Content') } </label>
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
</div>
</div>
<div className="mx_Dialog_buttons">
@ -227,7 +227,7 @@ class SendAccountData extends GenericEditor {
<label htmlFor="evContent"> { _t('Event Content') } </label>
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
</div>
</div>
<div className="mx_Dialog_buttons">
@ -485,7 +485,7 @@ class AccountDataExplorer extends DevtoolsComponent {
}
return <div className="mx_ViewSource">
<div className="mx_Dialog_content">
<div className="mx_DevTools_content">
<SyntaxHighlight className="json">
{ JSON.stringify(this.state.event.event, null, 2) }
</SyntaxHighlight>