PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #1923 from matrix-org/rxl881/devTools

Browse source 
Make devTools styling more consistent and easier to edit event data.
This commit is contained in:
Richard Lewis 2018-05-24 18:10:59 +01:00 committed by GitHub
commit 6288e9bc08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
res/css/views/dialogs/_DevtoolsDialog.scss
View file

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

14
src/components/views/dialogs/DevtoolsDialog.js
View file

@ -132,17 +132,17 @@ class SendCustomEvent extends GenericEditor {
} }
return <div> return <div>
<div className="mx_Dialog_content"> <div className="mx_DevTools_content">
{ this.textInput('eventType', _t('Event Type')) } { this.textInput('eventType', _t('Event Type')) }
{ this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) } { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
<br /> <br />
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_DevTools_inputLabelCell">
<label htmlFor="evContent"> { _t('Event Content') } </label> <label htmlFor="evContent"> { _t('Event Content') } </label>
</div> </div>
<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> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
@ -219,15 +219,15 @@ class SendAccountData extends GenericEditor {
} }
return <div> return <div>
<div className="mx_Dialog_content"> <div className="mx_DevTools_content">
{ this.textInput('eventType', _t('Event Type')) } { this.textInput('eventType', _t('Event Type')) }
<br /> <br />
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_DevTools_inputLabelCell">
<label htmlFor="evContent"> { _t('Event Content') } </label> <label htmlFor="evContent"> { _t('Event Content') } </label>
</div> </div>
<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> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
@ -485,7 +485,7 @@ class AccountDataExplorer extends DevtoolsComponent {
} }
return <div className="mx_ViewSource"> return <div className="mx_ViewSource">
<div className="mx_Dialog_content"> <div className="mx_DevTools_content">
<SyntaxHighlight className="json"> <SyntaxHighlight className="json">
{ JSON.stringify(this.state.event.event, null, 2) } { JSON.stringify(this.state.event.event, null, 2) }
</SyntaxHighlight> </SyntaxHighlight>