mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Devtools styling tweaks

Browse source 
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) {
return <div className="mx_UserSettings_profileTableRow">
<div className="mx_UserSettings_profileLabelCell">
<label htmlFor="displayName">{ label }</label>
return <div className="mx_DevTools_inputRow">
<div className="mx_DevTools_inputLabelCell">
<label htmlFor={id}>{ label }</label>
</div>
<div className="mx_UserSettings_profileInputCell">
<input id={id} onChange={this._onChange} value={this.state[id]} className="mx_EditableText" size="32" />
<div className="mx_DevTools_inputCell">
<input id={id} onChange={this._onChange} value={this.state[id]} size="32" />
</div>
</div>;
}
@ -148,8 +148,8 @@ class SendCustomEvent extends GenericEditor {
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !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} />
<label className="tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
<input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
<label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
</div> }
</div>
</div>;
@ -233,8 +233,8 @@ class SendAccountData extends GenericEditor {
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !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} />
<label className="tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
<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="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> }
</div>
</div>;
@ -489,8 +489,8 @@ class AccountDataExplorer extends DevtoolsComponent {
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <div style={{float: "right"}}>
<input id="isRoomAccountData" className="tgl 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" />
<input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
<label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> }
</div>
</div>;
@ -557,19 +557,26 @@ export default class DevtoolsDialog extends React.Component {
if (this.state.mode) {
body = <div>
<div style={{float: 'left'}}>{ this.state.mode.getLabel() }</div>
<div style={{float: 'right'}}>Room ID: { this.props.roomId }</div>
<div style={{clear: 'both'}} />
<div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />
<this.state.mode onBack={this.onBack} />
</div>;
} else {
const classes = "mx_DevTools_RoomStateExplorer_button";
body = <div>
<div className="mx_Dialog_content">
<div>Room ID: { this.props.roomId }</div>
{ Entries.map((Entry) => {
const label = Entry.getLabel();
return <button key={label} onClick={this._setMode(Entry)}>{ _t(label) }</button>;
}) }
<div>
<div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />
<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 className="mx_Dialog_buttons">
<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?",
"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>",
"Toolbox": "Toolbox",
"Set Password": "Set Password",
"Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
"Checking for an update...": "Checking for an update...",
@ -106,12 +107,9 @@
"Edit": "Edit",
"Filter results": "Filter results",
"Send Custom Event": "Send Custom Event",
"Send Custom State Event": "Send Custom State Event",
"Send Account Data": "Send Account Data",
"Send Room Account Data": "Send Room Account Data",
"Explore Account Data": "Explore Account Data",
"Explore Room State": "Explore Room State",
"Explore Room Account Data": "Explore Room Account Data",
"Developer Tools": "Developer Tools",
"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!",

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

@ -18,7 +18,51 @@ limitations under the License.
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;
// add default box-sizing for this scope
@ -28,14 +72,14 @@ limitations under the License.
& *,
& *:after,
& *:before,
& + .tgl-btn {
& + .mx_DevTools_tgl-btn {
box-sizing: border-box;
&::selection {
background: none;
}
}
+ .tgl-btn {
+ .mx_DevTools_tgl-btn {
outline: 0;
display: block;
width: 7em;
@ -61,13 +105,13 @@ limitations under the License.
}
}
&:checked + .tgl-btn:after {
&:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
}
.tgl-flip {
+ .tgl-btn {
.mx_DevTools_tgl-flip {
+ .mx_DevTools_tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
@ -104,7 +148,7 @@ limitations under the License.
}
}
&:checked + .tgl-btn {
&:checked + .mx_DevTools_tgl-btn {
&:before {
transform: rotateY(180deg);
}