Get rid of toggle control, favor slider control where it was used.

bemani/frontend/static/components/slider.react.js

@@ -4,7 +4,7 @@ var Slider = React.createClass({
     render: function() {
         return (
             <div
-                className={"slider " + (this.props.value ? "on" : "off")}
+                className={"slider " + (this.props.value ? "on " : "off ") + this.props.className}
                 onClick={function(event) {
                     event.preventDefault();
                     event.stopPropagation();

bemani/frontend/static/components/toggle.react.js

@@ -1,16 +0,0 @@
-/** @jsx React.DOM */
-
-var Toggle = React.createClass({
-    render: function() {
-        return (
-            <Button
-                className="toggle"
-                disabled={this.props.disabled}
-                onClick={function(event) {
-                    this.props.onClick(event);
-                }.bind(this)}
-                title={this.props.title ? this.props.title : 'toggle'}
-            />
-        );
-    },
-});

bemani/frontend/static/controllers/arcade/arcade.react.js

@@ -478,29 +478,62 @@ var arcade_management = React.createClass({
                     }</LabelledSection>
                     {this.renderPIN()}
                     {this.renderRegion()}
-                    <LabelledSection vertical={true} label="PASELI Enabled">
+                    <LabelledSection vertical={true} label={
-                        <span>{ this.state.paseli_enabled ? 'yes' : 'no' }</span>
+                        <span>
-                        <Toggle onClick={this.togglePaseliEnabled.bind(this)} />
+                            PASELI Enabled
                             { this.state.paseli_enabled_saving ?
                                 <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
                                 null
                             }
+                        </span>
+                    }>
+                        <Slider
+                            on="yes"
+                            off="no"
+                            className="padded"
+                            value={this.state.paseli_enabled}
+                            onChange={function(value) {
+                                this.togglePaseliEnabled();
+                            }.bind(this)}
+                        />
                     </LabelledSection>
-                    <LabelledSection vertical={true} label="PASELI Infinite">
+                    <LabelledSection vertical={true} label={
-                        <span>{ this.state.paseli_infinite ? 'yes' : 'no' }</span>
+                        <span>
-                        <Toggle onClick={this.togglePaseliInfinite.bind(this)} />
+                            PASELI Infinite
                             { this.state.paseli_infinite_saving ?
                                 <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
                                 null
                             }
+                        </span>
+                    }>
+                        <Slider
+                            on="yes"
+                            off="no"
+                            className="padded"
+                            value={this.state.paseli_infinite}
+                            onChange={function(value) {
+                                this.togglePaseliInfinite();
+                            }.bind(this)}
+                        />
                     </LabelledSection>
-                    <LabelledSection vertical={true} label="Mask Web Address">
+                    <LabelledSection vertical={true} label={
-                        <span>{ this.state.mask_services_url ? 'yes' : 'no' }</span>
+                        <span>
-                        <Toggle onClick={this.toggleMaskServicesURL.bind(this)} />
+                            Mask Web Address
                             { this.state.mask_services_url_saving ?
                                 <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
                                 null
                             }
+                        </span>
+                    }>
+                        <Slider
+                            on="yes"
+                            off="no"
+                            className="padded"
+                            value={this.state.mask_services_url}
+                            onChange={function(value) {
+                                this.toggleMaskServicesURL();
+                            }.bind(this)}
+                        />
                     </LabelledSection>
                 </div>
                 <div className="section">

bemani/frontend/static/controllers/ddr/settings.react.js

@@ -321,21 +321,44 @@ var settings_view = React.createClass({
                     <div className="section">
                         <h3>User Profile</h3>
                         {this.renderName(player)}
-                        <LabelledSection vertical={true} label="Fast/Slow Display">
+                        <LabelledSection vertical={true} label={
-                            <span>{ this.state.player[this.state.version].early_late ? 'on' : 'off' }</span>
+                            <span>
-                            <Toggle onClick={this.toggleEarlyLate.bind(this)} />
+                                Fast/Slow Display
                                 { this.state.saving_early_late ?
                                     <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
                                     null
                                 }
+                            </span>
+                        }>
+                            <Slider
+                                on="on"
+                                off="off"
+                                className="padded fix"
+                                value={this.state.player[this.state.version].early_late}
+                                onChange={function(value) {
+                                    this.toggleEarlyLate();
+                                }.bind(this)}
+                            />
                         </LabelledSection>
-                        <LabelledSection vertical={true} label="Combo Position">
+                        <LabelledSection vertical={true} label={
-                            <span>{ this.state.player[this.state.version].background_combo ? 'background' : 'foreground' }</span>
+                            <span>
-                            <Toggle onClick={this.toggleBackgroundCombo.bind(this)} />
+                                Combo Position
                                 { this.state.saving_background_combo ?
                                     <img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
                                     null
                                 }
+                            </span>
+                        }>
+                            <Slider
+                                className="padded"
+                                value={this.state.player[this.state.version].background_combo}
+                                onChange={function(value) {
+                                    this.toggleBackgroundCombo();
+                                }.bind(this)}
+                            />
+                            <span className="slider-label">{
+                                this.state.player[this.state.version].background_combo ? 'background' : 'foreground'
+                            }</span>
                         </LabelledSection>
                         {this.renderWeight(player)}
                     </div>

bemani/frontend/static/themes/dark/section.css

@@ -178,3 +178,19 @@ span.filter:not(:last-child) {
     padding-right: 20px;
 }
 
+.slider.padded {
+    margin-right: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+span.slider-label {
+    position: relative;
+    padding-right: 20px;
+    top: -4px;
+}
+
+.slider.fix .label {
+    margin-top: 1px;
+    margin-bottom: -1px;
+}

bemani/frontend/static/themes/dark/site.css

@@ -125,6 +125,7 @@ ul.navigation {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    z-index: 1;
 }
 
 ul.navigation li {
@@ -280,8 +281,8 @@ div.slider {
 }
 
 div.slider.on {
-    background: #2196F3;
+    background: #6eb9f7;
-    border: 1px solid #0a6fc2;
+    border: 1px solid #3da2f5;
 }
 
 div.slider.off {

bemani/frontend/static/themes/default/section.css

@@ -178,3 +178,19 @@ span.filter:not(:last-child) {
     padding-right: 20px;
 }
 
+.slider.padded {
+    margin-right: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+span.slider-label {
+    position: relative;
+    padding-right: 20px;
+    top: -4px;
+}
+
+.slider.fix .label {
+    margin-top: 1px;
+    margin-bottom: -1px;
+}

bemani/frontend/static/themes/default/site.css

@@ -119,6 +119,7 @@ ul.navigation {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    z-index: 1;
 }
 
 ul.navigation li {
@@ -274,8 +275,8 @@ div.slider {
 }
 
 div.slider.on {
-    background: #2196F3;
+    background: #6eb9f7;
-    border: 1px solid #0a6fc2;
+    border: 1px solid #3da2f5;
 }
 
 div.slider.off {