1
0
mirror of synced 2025-02-21 04:56:25 +01:00

Change QPro settings to use standard UI toolkit which fixes padding around items before save button.

This commit is contained in:
Jennifer Taylor 2021-08-28 20:32:40 +00:00
parent e1850c31db
commit 94fec0dec1
2 changed files with 49 additions and 51 deletions

View File

@ -413,59 +413,53 @@ var settings_view = React.createClass({
</div>
<div className="section">
<h3>QPro</h3>
<form className="inline">
<div className="fields">
{
valid_qpro_options.map(function(qpro_option) {
var player = this.state.player[this.state.version]
var items = window.qpros[this.state.version].filter(function (qpro) {
return qpro.type == qpro_option
});
var results = {};
items
.map(function(item) { return { 'id': item.id, 'name': `${item.name}` } })
.forEach (value => results[value.id] = value.name);
return (
<div className="field">
<b>{qpro_option}</b>
<br/>
<SelectInt
name={qpro_option}
value={player.qpro[qpro_option]}
choices={results}
onChange={function(choice) {
var player = this.state.player;
player[this.state.version].qpro[qpro_option] = choice;
this.setState({
player: player,
qpro_changed: this.setQproChanged(true),
})
}.bind(this)}
/>
</div>
)
}.bind(this))
}
<div className="field">
<input
type="submit"
value="save"
disabled={!this.state.qpro_changed[this.state.version]}
onClick={function(event) {
this.saveQproOptions(event);
{valid_qpro_options.map(function(qpro_option) {
var player = this.state.player[this.state.version]
var items = window.qpros[this.state.version].filter(function (qpro) {
return qpro.type == qpro_option
});
var results = {};
items
.map(function(item) { return { 'id': item.id, 'name': `${item.name}` } })
.forEach (value => results[value.id] = value.name);
return (
<LabelledSection
className="iidx qprooption"
vertical={true}
label={qpro_option}
>
<SelectInt
name={qpro_option}
value={player.qpro[qpro_option]}
choices={results}
onChange={function(choice) {
var player = this.state.player;
player[this.state.version].qpro[qpro_option] = choice;
this.setState({
player: player,
qpro_changed: this.setQproChanged(true),
})
}.bind(this)}
/>
{ this.state.qpro_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
{ this.state.qpro_saved[this.state.version] ?
<span>&#x2713;</span> :
null
}
</div>
</div>
</form>
</LabelledSection>
)
}.bind(this))}
<input
type="submit"
value="save"
disabled={!this.state.qpro_changed[this.state.version]}
onClick={function(event) {
this.saveQproOptions(event);
}.bind(this)}
/>
{ this.state.qpro_saving[this.state.version] ?
<img className="loading" src={Link.get('static', 'loading-16.gif')} /> :
null
}
{ this.state.qpro_saved[this.state.version] ?
<span>&#x2713;</span> :
null
}
</div>
<div className="section">
<h3>Theme</h3>

View File

@ -65,6 +65,10 @@ div.labelledsection.iidx.themeoption select {
width: 200px;
}
div.labelledsection.iidx.qprooption select {
width: 300px;
}
div.labelledsection.ddr.option select {
width: 200px;
}