[web] options: add some styling, minor fixes

web/src/js/components/Modal/Option.jsx

@@ -16,11 +16,16 @@ BooleanOption.PropTypes = {
 }
 function BooleanOption({ value, onChange, ...props }) {
     return (
+        <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]
     }
-    const Opt = Options[type]
+    if (Opt !== BooleanOption) {
+        props.className = "form-control"
+    }
+
     return <Opt
+        name={name}
         value={value}
         onChange={onChange}
         onKeyDown={stopPropagation}
+        {...props}
     />
 }
 export default connect(

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">