[web] options: add some styling, minor fixes

1 files changed, 32 insertions, 15 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(