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

Devtools styling tweaks 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2017-10-30 13:32:31 +00:00
parent ea9b630082
commit 6da2f88dc5
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
3 changed files with 79 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,12 +55,12 @@ class GenericEditor extends DevtoolsComponent {
} }
textInput(id, label) { textInput(id, label) {
return <div className="mx_UserSettings_profileTableRow"> return <div className="mx_DevTools_inputRow">
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_DevTools_inputLabelCell">
<label htmlFor="displayName">{ label }</label> <label htmlFor={id}>{ label }</label>
</div> </div>
<div className="mx_UserSettings_profileInputCell"> <div className="mx_DevTools_inputCell">
<input id={id} onChange={this._onChange} value={this.state[id]} className="mx_EditableText" size="32" /> <input id={id} onChange={this._onChange} value={this.state[id]} size="32" />
</div> </div>
</div>; </div>;
} }
@ -148,8 +148,8 @@ class SendCustomEvent extends GenericEditor {
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> } { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}> { !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}>
<input id="isStateEvent" className="tgl tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} /> <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
<label className="tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" /> <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
</div> } </div> }
</div> </div>
</div>; </div>;
@ -233,8 +233,8 @@ class SendAccountData extends GenericEditor {
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> } { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !this.state.message && <div style={{float: "right"}}> { !this.state.message && <div style={{float: "right"}}>
<input id="isRoomAccountData" className="tgl tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} /> <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
<label className="tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" /> <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> } </div> }
</div> </div>
</div>; </div>;
@ -489,8 +489,8 @@ class AccountDataExplorer extends DevtoolsComponent {
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <div style={{float: "right"}}> { !this.state.message && <div style={{float: "right"}}>
<input id="isRoomAccountData" className="tgl tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} /> <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
<label className="tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" /> <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> } </div> }
</div> </div>
</div>; </div>;
@ -557,19 +557,26 @@ export default class DevtoolsDialog extends React.Component {
if (this.state.mode) { if (this.state.mode) {
body = <div> body = <div>
<div style={{float: 'left'}}>{ this.state.mode.getLabel() }</div> <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
<div style={{float: 'right'}}>Room ID: { this.props.roomId }</div> <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div style={{clear: 'both'}} /> <div className="mx_DevTools_label_bottom" />
<this.state.mode onBack={this.onBack} /> <this.state.mode onBack={this.onBack} />
</div>; </div>;
} else { } else {
const classes = "mx_DevTools_RoomStateExplorer_button";
body = <div> body = <div>
<div className="mx_Dialog_content"> <div>
<div>Room ID: { this.props.roomId }</div> <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
{ Entries.map((Entry) => { <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
const label = Entry.getLabel(); <div className="mx_DevTools_label_bottom" />
return <button key={label} onClick={this._setMode(Entry)}>{ _t(label) }</button>;
}) } <div className="mx_Dialog_content">
{ Entries.map((Entry) => {
const label = Entry.getLabel();
const onClick = this._setMode(Entry);
return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
}) }
</div>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onCancel}>{ _t('Cancel') }</button> <button onClick={this.onCancel}>{ _t('Cancel') }</button>

4
src/i18n/strings/en_EN.json
View File

@ -70,6 +70,7 @@
"What's new?": "What's new?", "What's new?": "What's new?",
"A new version of Riot is available.": "A new version of Riot is available.", "A new version of Riot is available.": "A new version of Riot is available.",
"To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>", "To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
"Toolbox": "Toolbox",
"Set Password": "Set Password", "Set Password": "Set Password",
"Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).", "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
"Checking for an update...": "Checking for an update...", "Checking for an update...": "Checking for an update...",
@ -106,12 +107,9 @@
"Edit": "Edit", "Edit": "Edit",
"Filter results": "Filter results", "Filter results": "Filter results",
"Send Custom Event": "Send Custom Event", "Send Custom Event": "Send Custom Event",
"Send Custom State Event": "Send Custom State Event",
"Send Account Data": "Send Account Data", "Send Account Data": "Send Account Data",
"Send Room Account Data": "Send Room Account Data",
"Explore Account Data": "Explore Account Data", "Explore Account Data": "Explore Account Data",
"Explore Room State": "Explore Room State", "Explore Room State": "Explore Room State",
"Explore Room Account Data": "Explore Room Account Data",
"Developer Tools": "Developer Tools", "Developer Tools": "Developer Tools",
"You have successfully set a password!": "You have successfully set a password!", "You have successfully set a password!": "You have successfully set a password!",
"You have successfully set a password and an email address!": "You have successfully set a password and an email address!", "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",

58
src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
View File

@ -18,7 +18,51 @@ limitations under the License.
margin-bottom: 10px; margin-bottom: 10px;
} }
.tgl { .mx_DevTools_label_left {
float: left;
}
.mx_DevTools_label_right {
float: right;
}
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow
{
display: table-row;
}
.mx_DevTools_inputLabelCell
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_inputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
.mx_DevTools_inputCell input
{
display: inline-block;
border: 0;
border-bottom: 1px solid $input-underline-color;
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_DevTools_tgl {
display: none; display: none;
// add default box-sizing for this scope // add default box-sizing for this scope
@ -28,14 +72,14 @@ limitations under the License.
& *, & *,
& *:after, & *:after,
& *:before, & *:before,
& + .tgl-btn { & + .mx_DevTools_tgl-btn {
box-sizing: border-box; box-sizing: border-box;
&::selection { &::selection {
background: none; background: none;
} }
} }
+ .tgl-btn { + .mx_DevTools_tgl-btn {
outline: 0; outline: 0;
display: block; display: block;
width: 7em; width: 7em;
@ -61,13 +105,13 @@ limitations under the License.
} }
} }
&:checked + .tgl-btn:after { &:checked + .mx_DevTools_tgl-btn:after {
left: 50%; left: 50%;
} }
} }
.tgl-flip { .mx_DevTools_tgl-flip {
+ .tgl-btn { + .mx_DevTools_tgl-btn {
padding: 2px; padding: 2px;
transition: all .2s ease; transition: all .2s ease;
font-family: sans-serif; font-family: sans-serif;
@ -104,7 +148,7 @@ limitations under the License.
} }
} }
&:checked + .tgl-btn { &:checked + .mx_DevTools_tgl-btn {
&:before { &:before {
transform: rotateY(180deg); transform: rotateY(180deg);
} }