mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Devtools styling tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
parent
ea9b630082
commit
6da2f88dc5
@ -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>
|
||||
|
@ -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!",
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user