From 779e5e84e37278b8f3255a1061f2137f5b6a3a7d Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 16 Aug 2016 12:37:35 +0200
Subject: refactor file up and download

---
 web/src/js/components/Header/FileMenu.jsx | 32 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

(limited to 'web/src/js/components/Header/FileMenu.jsx')

diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index d3786475..392cc163 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -1,10 +1,19 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
+import FileChooser from '../common/FileChooser'
 import * as flowsActions from '../../ducks/flows'
 
+
+
 class FileMenu extends Component {
 
+    static propTypes = {
+        clearFlows: PropTypes.func.isRequired,
+        loadFlows: PropTypes.func.isRequired,
+        saveFlows: PropTypes.func.isRequired
+    }
+
     constructor(props, context) {
         super(props, context)
         this.state = { show: false }
@@ -45,12 +54,8 @@ class FileMenu extends Component {
         this.fileInput.click()
     }
 
-    onOpenFile(e) {
-        e.preventDefault()
-        if (e.target.files.length > 0) {
-            this.props.loadFlows(e.target.files[0])
-            this.fileInput.value = ''
-        }
+    onOpenFile(file) {
+        this.props.loadFlows(file)
     }
 
     onSaveClick(e) {
@@ -70,15 +75,10 @@ class FileMenu extends Component {
                         </a>
                     </li>
                     <li>
-                        <a href="#" onClick={this.onOpenClick}>
-                            <i className="fa fa-fw fa-folder-open"></i>
-                            Open...
-                        </a>
-                        <input
-                            ref={ref => this.fileInput = ref}
-                            className="hidden"
-                            type="file"
-                            onChange={this.onOpenFile}
+                        <FileChooser
+                            icon="fa-folder-open"
+                            text="Open..."
+                            onOpenFile={this.onOpenFile}
                         />
                     </li>
                     <li>
-- 
cgit v1.2.3


From a416732665aa7a0fb56e20f9888fd9488750a4df Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Thu, 18 Aug 2016 16:44:49 +0200
Subject: refactor dropdown menu, view selector

---
 web/src/js/components/Header/FileMenu.jsx | 80 ++++++++++---------------------
 1 file changed, 24 insertions(+), 56 deletions(-)

(limited to 'web/src/js/components/Header/FileMenu.jsx')

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>
         )
     }
 }
-- 
cgit v1.2.3


From 66e9db3713d54c67be1cf2bef1b0633db084649c Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Thu, 18 Aug 2016 18:05:38 +0200
Subject: refactor contentviews, dropdown, filemenu and footer

---
 web/src/js/components/Header/FileMenu.jsx | 97 ++++++++++++-------------------
 1 file changed, 36 insertions(+), 61 deletions(-)

(limited to 'web/src/js/components/Header/FileMenu.jsx')

diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 6053b2d3..53c63ea1 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -1,71 +1,46 @@
 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 Dropdown, {Divider} from '../common/Dropdown'
 import * as flowsActions from '../../ducks/flows'
 
+FileMenu.propTypes = {
+    clearFlows: PropTypes.func.isRequired,
+    loadFlows: PropTypes.func.isRequired,
+    saveFlows: PropTypes.func.isRequired
+}
 
+FileMenu.onNewClick = (e, clearFlows) => {
+    e.preventDefault();
+    if (confirm('Delete all flows?'))
+        clearFlows()
+}
 
-class FileMenu extends Component {
-
-    static propTypes = {
-        clearFlows: PropTypes.func.isRequired,
-        loadFlows: PropTypes.func.isRequired,
-        saveFlows: PropTypes.func.isRequired
-    }
-
-    constructor(props, context) {
-        super(props, context)
-
-        this.onNewClick = this.onNewClick.bind(this)
-        this.onOpenClick = this.onOpenClick.bind(this)
-        this.onOpenFile = this.onOpenFile.bind(this)
-        this.onSaveClick = this.onSaveClick.bind(this)
-    }
-
-    onNewClick(e) {
-        e.preventDefault()
-        if (confirm('Delete all flows?')) {
-            this.props.clearFlows()
-        }
-    }
-    
-    onOpenFile(file) {
-        this.props.loadFlows(file)
-    }
-
-    onSaveClick(e) {
-        e.preventDefault()
-        this.props.saveFlows()
-    }
-
-    render() {
-        return (
-            <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>
-        )
-    }
+function FileMenu ({clearFlows, loadFlows, saveFlows}) {
+     return (
+        <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
+            <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}>
+                <i className="fa fa-fw fa-file"></i>
+                New
+            </a>
+            <FileChooser
+                icon="fa-folder-open"
+                text="Open..."
+                onOpenFile={file => loadFlows(file)}
+            />
+            <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}>
+                <i className="fa fa-fw fa-floppy-o"></i>
+                Save...
+            </a>
+
+            <Divider/>
+
+            <a href="http://mitm.it/" target="_blank">
+                <i className="fa fa-fw fa-external-link"></i>
+                Install Certificates...
+            </a>
+        </Dropdown>
+    )
 }
 
 export default connect(
-- 
cgit v1.2.3

