aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--web/src/js/components/Modal/Option.jsx47
-rw-r--r--web/src/js/components/Modal/OptionModal.jsx8
2 files changed, 36 insertions, 19 deletions
diff --git a/web/src/js/components/Modal/Option.jsx b/web/src/js/components/Modal/Option.jsx
index 1aca23c2..e2f6708f 100644
--- a/web/src/js/components/Modal/Option.jsx
+++ b/web/src/js/components/Modal/Option.jsx
@@ -16,11 +16,16 @@ BooleanOption.PropTypes = {
}
function BooleanOption({ value, onChange, ...props }) {
return (
- <input type="checkbox"
- checked={value}
- onChange={e => onChange(e.target.checked)}
- {...props}
- />
+ <div className="checkbox">
+ <label>
+ <input type="checkbox"
+ checked={value}
+ onChange={e => onChange(e.target.checked)}
+ {...props}
+ />
+ Enable
+ </label>
+ </div>
)
}
@@ -37,6 +42,14 @@ function StringOption({ value, onChange, ...props }) {
/>
)
}
+function Optional(Component) {
+ return function ({ onChange, ...props }) {
+ return <Component
+ onChange={x => onChange(x ? x : null)}
+ {...props}
+ />
+ }
+}
NumberOption.PropTypes = {
value: PropTypes.number.isRequired,
@@ -81,7 +94,7 @@ function StringSequenceOption({ value, onChange, ...props }) {
return <textarea
rows={height}
value={value.join("\n")}
- onChange={e => onChange(e.target.value.split("\n"))}
+ onChange={e => onChange(e.target.value.split("\n").filter(x => x.trim()))}
{...props}
/>
}
@@ -90,24 +103,28 @@ const Options = {
"bool": BooleanOption,
"str": StringOption,
"int": NumberOption,
- "optional str": StringOption,
+ "optional str": Optional(StringOption),
"sequence of str": StringSequenceOption,
}
-function PureOption({ choices, type, value, onChange }) {
+function PureOption({ choices, type, value, onChange, name }) {
+ let Opt, props = {}
if (choices) {
- return <ChoicesOption
- value={value}
- onChange={onChange}
- choices={choices}
- onKeyDown={stopPropagation}
- />
+ Opt = ChoicesOption;
+ props.choices = choices
+ } else {
+ Opt = Options[type]
+ }
+ if (Opt !== BooleanOption) {
+ props.className = "form-control"
}
- const Opt = Options[type]
+
return <Opt
+ name={name}
value={value}
onChange={onChange}
onKeyDown={stopPropagation}
+ {...props}
/>
}
export default connect(
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index d16c2afc..9b1b6a8b 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -4,7 +4,7 @@ import * as modalAction from "../../ducks/ui/modal"
import Option from "./Option"
function PureOptionHelp({help}){
- return <div className="small text-muted">{help}</div>;
+ return <div className="help-block small">{help}</div>;
}
const OptionHelp = connect((state, {name}) => ({
help: state.options[name].help,
@@ -42,12 +42,12 @@ class PureOptionModal extends Component {
</div>
<div className="modal-body">
- <div className="container-fluid">
+ <div className="form-horizontal">
{
options.map(name =>
- <div key={name} className="row">
+ <div key={name} className="form-group">
<div className="col-xs-6">
- {name}
+ <label htmlFor={name}>{name}</label>
<OptionHelp name={name}/>
</div>
<div className="col-xs-6">