imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2697 from matrix-org/t3chguy/pretty_Devtools

Browse source 
replace text Inputs in Devtools with Field bcuz prettier
This commit is contained in:
Travis Ralston 2019-02-25 16:13:14 -07:00 • committed by GitHub
commit f6021e78b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -67,12 +67,20 @@ limitations under the License.
.mx_DevTools_textarea { .mx_DevTools_textarea {
font-size: 12px; font-size: 12px;
max-width: 624px; max-width: 684px;
min-height: 250px; min-height: 250px;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
} }
.mx_DevTools_content .mx_Field_input {
display: inline-block;
}
.mx_DevTools_content .mx_Field_input + .mx_Field_input {
margin-left: 42px;
}
.mx_DevTools_tgl { .mx_DevTools_tgl {
display: none; display: none;

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

@ -20,6 +20,7 @@ import sdk from '../../../index';
import SyntaxHighlight from '../elements/SyntaxHighlight'; import SyntaxHighlight from '../elements/SyntaxHighlight';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import Field from "../elements/Field";
class DevtoolsComponent extends React.Component { class DevtoolsComponent extends React.Component {
static contextTypes = { static contextTypes = {
@ -56,14 +57,8 @@ class GenericEditor extends DevtoolsComponent {
} }
textInput(id, label) { textInput(id, label) {
return <div className="mx_DevTools_inputRow"> return <Field id={id} label={label} size="42" autoFocus={true} type="text" autoComplete="on"
<div className="mx_DevTools_inputLabelCell"> value={this.state[id]} onChange={this._onChange} />;
<label htmlFor={id}>{ label }</label>
</div>
<div className="mx_DevTools_inputCell">
<input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" autoFocus={true} />
</div>
</div>;
} }
} }
@ -138,12 +133,8 @@ class SendCustomEvent extends GenericEditor {
<br /> <br />
<div className="mx_DevTools_inputLabelCell"> <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
<label htmlFor="evContent"> { _t('Event Content') } </label> autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
</div>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
@ -223,12 +214,8 @@ class SendAccountData extends GenericEditor {
{ this.textInput('eventType', _t('Event Type')) } { this.textInput('eventType', _t('Event Type')) }
<br /> <br />
<div className="mx_DevTools_inputLabelCell"> <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
<label htmlFor="evContent"> { _t('Event Content') } </label> autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
</div>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
@ -302,14 +289,12 @@ class FilteredList extends React.Component {
render() { render() {
const TruncatedList = sdk.getComponent("elements.TruncatedList"); const TruncatedList = sdk.getComponent("elements.TruncatedList");
return <div> return <div>
<input size="64" <Field id="DevtoolsDialog_FilteredList_filter" label={_t('Filter results')} autoFocus={true} size={64}
autoFocus={true} type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
onChange={this.onQuery}
value={this.props.query}
placeholder={_t('Filter results')}
className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
// force re-render so that autoFocus is applied when this component is re-used // force re-render so that autoFocus is applied when this component is re-used
key={this.props.children[0] ? this.props.children[0].key : ''} /> key={this.props.children[0] ? this.props.children[0].key : ''} />
<TruncatedList getChildren={this.getChildren} <TruncatedList getChildren={this.getChildren}
getChildCount={this.getChildCount} getChildCount={this.getChildCount}
truncateAt={this.state.truncateAt} truncateAt={this.state.truncateAt}