diff options
author | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 21:13:24 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2017-07-17 21:13:24 +0200 |
commit | 183079f7312dc812d7b70a01e490ef3827b2890c (patch) | |
tree | a5e23cc021868e130f0fca4e1e8e3f3e37ad27e8 | |
parent | babd967eb8ac62c4a6ff6734ff57e46faaa5bab6 (diff) | |
download | mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.tar.gz mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.tar.bz2 mitmproxy-183079f7312dc812d7b70a01e490ef3827b2890c.zip |
[web] options: add some styling, minor fixes
-rw-r--r-- | web/src/js/components/Modal/Option.jsx | 47 | ||||
-rw-r--r-- | web/src/js/components/Modal/OptionModal.jsx | 8 |
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"> |