diff options
author | Clemens Brunner <cle1000.cb@gmail.com> | 2016-05-30 08:34:30 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-05-29 23:34:30 -0700 |
commit | 6652e3a36902f09148320b83954ff31a794852e6 (patch) | |
tree | 2683d1a5855b48aef74bd100dd2d4de0efa3bb19 /web/src/js/components/common.js | |
parent | e8290a0eb48a6899df75929bc296d51a54c5fc03 (diff) | |
download | mitmproxy-6652e3a36902f09148320b83954ff31a794852e6.tar.gz mitmproxy-6652e3a36902f09148320b83954ff31a794852e6.tar.bz2 mitmproxy-6652e3a36902f09148320b83954ff31a794852e6.zip |
start of developing server side for options (#1155)
* added UI for options menu
* update UI for options menu
* update UI for options v2
* update UI for options v2
* added new btn class
* little changes
* little changes
* merge
* deleted branch
* change menu button class
* added option route + added very incomplete handler class
* moved options to settings
* added toggleinputbutton
* changed options menu
* added option for stream large bodies, but no working
* added option for stream large bodies, but no working
Diffstat (limited to 'web/src/js/components/common.js')
-rw-r--r-- | web/src/js/components/common.js | 56 |
1 files changed, 49 insertions, 7 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index b257b82c..87c34ffc 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -1,5 +1,6 @@ import React from "react" import ReactDOM from "react-dom" +import {Key} from "../utils.js"; import _ from "lodash" export var Splitter = React.createClass({ @@ -107,14 +108,55 @@ export var Splitter = React.createClass({ } }); -export const ToggleComponent = (props) => - <div - className={"btn " + (props.checked ? "btn-primary" : "btn-default")} - onClick={props.onToggleChanged}> - <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span> - </div> +export const ToggleButton = (props) => + <div className="input-group toggle-btn"> + <div + className={"btn " + (props.checked ? "btn-primary" : "btn-default")} + onClick={props.onToggleChanged}> + <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}> {props.name}</span> + </div> + </div>; -ToggleComponent.propTypes = { +ToggleButton.propTypes = { name: React.PropTypes.string.isRequired, onToggleChanged: React.PropTypes.func.isRequired +}; + +export class ToggleInputButton extends React.Component { + constructor(props) { + super(props); + this.state = {txt: props.txt}; + } + + render() { + return ( + <div className="input-group toggle-input-btn"> + <span + className="input-group-btn" + onClick={() => this.props.onToggleChanged(this.state.txt)}> + <div className={"btn " + (this.props.checked ? "btn-primary" : "btn-default")}> + <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/> + {this.props.name} + </div> + </span> + <input + className="form-control" + placeholder={this.props.placeholder} + disabled={this.props.checked} + value={this.state.txt} + type={this.props.inputType} + onChange={e => this.setState({txt: e.target.value})} + onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/> + </div> + ); + } } + +ToggleInputButton.propTypes = { + name: React.PropTypes.string.isRequired, + txt: React.PropTypes.string.isRequired, + onToggleChanged: React.PropTypes.func.isRequired +}; + + + |