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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,8 +14,18 @@ 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;
max-width: 684px;
width: 100%;
}
.mx_DevTools_LabalCell {
font-weight: bold;
} }
.mx_DevTools_label_left { .mx_DevTools_label_left {
@ -38,7 +48,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 +55,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 +70,12 @@ limitations under the License.
font-size: 16px; font-size: 16px;
} }
.mx_DevTools_textarea {
font-size: 12px;
min-height: 250px;
width: 100%;
}
.mx_DevTools_tgl { .mx_DevTools_tgl {
display: none; display: none;

10
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_LabalCell">
<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">
@ -227,7 +227,7 @@ class SendAccountData extends GenericEditor {
<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>