Get rid of toggle control, favor slider control where it was used.
This commit is contained in:
Jennifer Taylor
parent
20c313af96
commit
b3acc54a2a
@ -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();
|
||||
|
||||
@ -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'}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -478,29 +478,62 @@ var arcade_management = React.createClass({
|
||||
}</LabelledSection>
|
||||
{this.renderPIN()}
|
||||
{this.renderRegion()}
|
||||
<LabelledSection vertical={true} label="PASELI Enabled">
|
||||
<span>{ this.state.paseli_enabled ? 'yes' : 'no' }</span>
|
||||
<Toggle onClick={this.togglePaseliEnabled.bind(this)} />
|
||||
{ this.state.paseli_enabled_saving ?
|
||||
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||||
null
|
||||
}
|
||||
<LabelledSection vertical={true} label={
|
||||
<span>
|
||||
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">
|
||||
<span>{ this.state.paseli_infinite ? 'yes' : 'no' }</span>
|
||||
<Toggle onClick={this.togglePaseliInfinite.bind(this)} />
|
||||
{ this.state.paseli_infinite_saving ?
|
||||
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||||
null
|
||||
}
|
||||
<LabelledSection vertical={true} label={
|
||||
<span>
|
||||
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">
|
||||
<span>{ this.state.mask_services_url ? 'yes' : 'no' }</span>
|
||||
<Toggle onClick={this.toggleMaskServicesURL.bind(this)} />
|
||||
{ this.state.mask_services_url_saving ?
|
||||
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||||
null
|
||||
}
|
||||
<LabelledSection vertical={true} label={
|
||||
<span>
|
||||
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">
|
||||
|
||||
@ -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">
|
||||
<span>{ this.state.player[this.state.version].early_late ? 'on' : 'off' }</span>
|
||||
<Toggle onClick={this.toggleEarlyLate.bind(this)} />
|
||||
{ this.state.saving_early_late ?
|
||||
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||||
null
|
||||
}
|
||||
<LabelledSection vertical={true} label={
|
||||
<span>
|
||||
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">
|
||||
<span>{ this.state.player[this.state.version].background_combo ? 'background' : 'foreground' }</span>
|
||||
<Toggle onClick={this.toggleBackgroundCombo.bind(this)} />
|
||||
{ this.state.saving_background_combo ?
|
||||
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
|
||||
null
|
||||
}
|
||||
<LabelledSection vertical={true} label={
|
||||
<span>
|
||||
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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
border: 1px solid #0a6fc2;
|
||||
background: #6eb9f7;
|
||||
border: 1px solid #3da2f5;
|
||||
}
|
||||
|
||||
div.slider.off {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
border: 1px solid #0a6fc2;
|
||||
background: #6eb9f7;
|
||||
border: 1px solid #3da2f5;
|
||||
}
|
||||
|
||||
div.slider.off {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user