1 files changed, 24 insertions, 56 deletions

diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 392cc163..6053b2d3 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import FileChooser from '../common/FileChooser'
+import Dropdown from '../common/Dropdown'
 import * as flowsActions from '../../ducks/flows'
 
 
@@ -16,44 +17,20 @@ class FileMenu extends Component {
 
     constructor(props, context) {
         super(props, context)
-        this.state = { show: false }
 
-        this.close = this.close.bind(this)
-        this.onFileClick = this.onFileClick.bind(this)
         this.onNewClick = this.onNewClick.bind(this)
         this.onOpenClick = this.onOpenClick.bind(this)
         this.onOpenFile = this.onOpenFile.bind(this)
         this.onSaveClick = this.onSaveClick.bind(this)
     }
 
-    close() {
-        this.setState({ show: false })
-        document.removeEventListener('click', this.close)
-    }
-
-    onFileClick(e) {
-        e.preventDefault()
-
-        if (this.state.show) {
-            return
-        }
-
-        document.addEventListener('click', this.close)
-        this.setState({ show: true })
-    }
-
     onNewClick(e) {
         e.preventDefault()
         if (confirm('Delete all flows?')) {
             this.props.clearFlows()
         }
     }
-
-    onOpenClick(e) {
-        e.preventDefault()
-        this.fileInput.click()
-    }
-
+    
     onOpenFile(file) {
         this.props.loadFlows(file)
     }
@@ -65,37 +42,28 @@ class FileMenu extends Component {
 
     render() {
         return (
-            <div className={classnames('dropdown pull-left', { open: this.state.show })}>
-                <a href="#" className="special" onClick={this.onFileClick}>mitmproxy</a>
-                <ul className="dropdown-menu" role="menu">
-                    <li>
-                        <a href="#" onClick={this.onNewClick}>
-                            <i className="fa fa-fw fa-file"></i>
-                            New
-                        </a>
-                    </li>
-                    <li>
-                        <FileChooser
-                            icon="fa-folder-open"
-                            text="Open..."
-                            onOpenFile={this.onOpenFile}
-                        />
-                    </li>
-                    <li>
-                        <a href="#" onClick={this.onSaveClick}>
-                            <i className="fa fa-fw fa-floppy-o"></i>
-                            Save...
-                        </a>
-                    </li>
-                    <li role="presentation" className="divider"></li>
-                    <li>
-                        <a href="http://mitm.it/" target="_blank">
-                            <i className="fa fa-fw fa-external-link"></i>
-                            Install Certificates...
-                        </a>
-                    </li>
-                </ul>
-            </div>
+            <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
+                <a href="#" onClick={this.onNewClick}>
+                    <i className="fa fa-fw fa-file"></i>
+                    New
+                </a>
+                <FileChooser
+                    icon="fa-folder-open"
+                    text="Open..."
+                    onOpenFile={this.onOpenFile}
+                />
+                <a href="#" onClick={this.onSaveClick}>
+                    <i className="fa fa-fw fa-floppy-o"></i>
+                    Save...
+                </a>
+
+                <span name="divider"/>
+
+                <a href="http://mitm.it/" target="_blank">
+                        <i className="fa fa-fw fa-external-link"></i>
+                        Install Certificates...
+                </a>
+            </Dropdown>
         )
     }
 }