From 6da2f88dc5c99caac600434da076936e8cb8ef40 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 30 Oct 2017 13:32:31 +0000
Subject: [PATCH] Devtools styling tweaks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/dialogs/DevtoolsDialog.js           | 47 ++++++++-------
 src/i18n/strings/en_EN.json                   |  4 +-
 .../views/dialogs/_DevtoolsDialog.scss        | 58 ++++++++++++++++---
 3 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 2c854f99..a7155ad1 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -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>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2ed6b204..4702ae93 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -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!",
diff --git a/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
index 46cdf10a..8918373e 100644
--- a/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
+++ b/src/skins/vector/css/vector-web/views/dialogs/_DevtoolsDialog.scss
@@ -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);
         }