diff options
| author | Clemens <cle1000.cb@gmail.com> | 2016-08-03 12:08:10 +0200 |
|---|---|---|
| committer | Clemens <cle1000.cb@gmail.com> | 2016-08-03 12:08:10 +0200 |
| commit | 34fe391afbe18f89d774137f82620024f697ab6a (patch) | |
| tree | 0a1bcd4b0bccd1e7e51166982f8b4332da94a384 /web/src/js/components/ContentView/ViewSelector.jsx | |
| parent | bcc496527ebf5faf94025ec7c28992a1ac368140 (diff) | |
| download | mitmproxy-34fe391afbe18f89d774137f82620024f697ab6a.tar.gz mitmproxy-34fe391afbe18f89d774137f82620024f697ab6a.tar.bz2 mitmproxy-34fe391afbe18f89d774137f82620024f697ab6a.zip | |
add view all button, add dropdown for contentviews
Diffstat (limited to 'web/src/js/components/ContentView/ViewSelector.jsx')
| -rw-r--r-- | web/src/js/components/ContentView/ViewSelector.jsx | 92 |
1 files changed, 63 insertions, 29 deletions
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index c5670328..1959ec1e 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -1,48 +1,82 @@ -import React, { PropTypes } from 'react' +import React, { PropTypes, Component } from 'react' import classnames from 'classnames' import { connect } from 'react-redux' import * as ContentViews from './ContentViews' -import { setContentView } from "../../ducks/ui/flow"; +import { setContentView, setContentViewSelectorOpen } from "../../ducks/ui/flow"; -function ViewButton({ name, setContentView, children, activeView }) { +function ViewItem({ name, setContentView, children }) { return ( - <button - onClick={() => setContentView(name)} - className={classnames('btn btn-default', { active: name === activeView })}> - {children} - </button> + <li> + <a href="#" onClick={() => setContentView(name)}> + {children} + </a> + </li> ) } -ViewButton = connect(state => ({ - activeView: state.ui.flow.contentView -}), { - setContentView -})(ViewButton) -ViewSelector.propTypes = { - message: PropTypes.object.isRequired, -} -function ViewSelector({contentViews, isEdit }) { - let edit = ContentViews.Edit.displayName - return ( - <div className="view-selector btn-group btn-group-xs"> +/*ViewSelector.propTypes = { + contentViews: PropTypes.array.isRequired, + activeView: PropTypes.string.isRequired, + isEdit: PropTypes.bool.isRequired, + isContentViewSelectorOpen: PropTypes.bool.isRequired, + setContentViewSelectorOpen: PropTypes.func.isRequired +}*/ - {contentViews.map(name => - <ViewButton key={name} name={name}>{name.toLowerCase().replace('_', ' ')}</ViewButton> - )} - {isEdit && - <ViewButton key={edit} name={edit}>{edit.toLowerCase()}</ViewButton> - } +class ViewSelector extends Component { + constructor(props, context) { + super(props, context) + this.close = this.close.bind(this) + } + close() { + this.props.setContentViewSelectorOpen(false) + document.removeEventListener('click', this.close) + } - </div> - ) + onDropdown(e){ + e.preventDefault() + this.props.setContentViewSelectorOpen(!this.props.isContentViewSelectorOpen) + document.addEventListener('click', this.close) + } + + render() { + const {contentViews, activeView, isEdit, isContentViewSelectorOpen, setContentViewSelectorOpen, setContentView} = this.props + let edit = ContentViews.Edit.displayName + + return ( + <div className={classnames('dropup pull-left', { open: isContentViewSelectorOpen })}> + <a className="btn btn-default btn-xs" + onClick={ e => this.onDropdown(e) } + href="#"> + <b>View:</b> {activeView}<span className="caret"></span> + </a> + <ul className="dropdown-menu" role="menu"> + {contentViews.map(name => + <ViewItem key={name} setContentView={setContentView} name={name}> + {name.toLowerCase().replace('_', ' ')} + </ViewItem> + )} + {isEdit && + <ViewItem key={edit} setContentView={setContentView} name={edit}> + {edit.toLowerCase()} + </ViewItem> + } + </ul> + </div> + ) + } } export default connect ( state => ({ contentViews: state.settings.contentViews, + activeView: state.ui.flow.contentView, isEdit: !!state.ui.flow.modifiedFlow, - }))(ViewSelector) + isContentViewSelectorOpen: state.ui.flow.isContentViewSelectorOpen + }), { + setContentView, + setContentViewSelectorOpen + } +)(ViewSelector) |