From 795e76eee298e23079f7e979119defc4c187b833 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 17:37:11 +0100
Subject: [web] style options menu

The other menus are WIP.
---
 web/src/js/components/Header/FlowMenu.jsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

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

diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e78a49aa..e0c59afe 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -18,15 +18,12 @@ FlowMenu.propTypes = {
 function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
     return (
         <div>
-            <div className="menu-row">
-                <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
-                <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
-                <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
-                <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
-                <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
-                <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
-            </div>
-            <div className="clearfix"/>
+            <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
+            <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
+            <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
+            <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
+            <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
+            <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
         </div>
     )
 }
-- 
cgit v1.2.3


From d1c7b203f08d4b1e1ee3c7a50762a4f08843feef Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 19:59:54 +0100
Subject: [web] style flow menu

---
 web/src/js/components/Header/FlowMenu.jsx | 62 +++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 12 deletions(-)

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

diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e0c59afe..420cb054 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -1,13 +1,13 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import Button from '../common/Button'
-import { MessageUtils } from '../../flow/utils.js'
-import * as flowsActions from '../../ducks/flows'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import Button from "../common/Button"
+import { MessageUtils } from "../../flow/utils.js"
+import * as flowsActions from "../../ducks/flows"
 
 FlowMenu.title = 'Flow'
 
 FlowMenu.propTypes = {
-    flow: PropTypes.object.isRequired,
+    flow: PropTypes.object,
     acceptFlow: PropTypes.func.isRequired,
     replayFlow: PropTypes.func.isRequired,
     duplicateFlow: PropTypes.func.isRequired,
@@ -16,14 +16,52 @@ FlowMenu.propTypes = {
 }
 
 function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+    if (!flow)
+        return <div/>
     return (
         <div>
-            <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
-            <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
-            <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
-            <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
-            <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
-            <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+                        Replay
+                    </Button>
+                    <Button title="[D]uplicate flow" icon="fa-copy text-info"
+                            onClick={() => duplicateFlow(flow)}>
+                        Duplicate
+                    </Button>
+                    <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]"
+                            icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
+                        Revert
+                    </Button>
+                    <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+                        Delete
+                    </Button>
+                </div>
+                <div className="menu-legend">Flow Modification</div>
+            </div>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button title="download" icon="fa-download"
+                            onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}>
+                        Download
+                    </Button>
+                </div>
+                <div className="menu-legend">Export</div>
+            </div>
+            <div className="menu-group">
+                <div className="menu-content">
+                    <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
+                    icon="fa-play text-success" onClick={() => acceptFlow(flow)}
+                    >
+                Resume
+            </Button>
+
+                </div>
+                <div className="menu-legend">Interception</div>
+            </div>
+
+
+
         </div>
     )
 }
-- 
cgit v1.2.3


From d854e08653ccee12119266e2cc3f5d6c279341e5 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 11 Dec 2016 22:52:17 +0100
Subject: [web] various fixes

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

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

diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 420cb054..a404fdb7 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -8,21 +8,23 @@ FlowMenu.title = 'Flow'
 
 FlowMenu.propTypes = {
     flow: PropTypes.object,
-    acceptFlow: PropTypes.func.isRequired,
+    resumeFlow: PropTypes.func.isRequired,
+    killFlow: PropTypes.func.isRequired,
     replayFlow: PropTypes.func.isRequired,
     duplicateFlow: PropTypes.func.isRequired,
     removeFlow: PropTypes.func.isRequired,
     revertFlow: PropTypes.func.isRequired
 }
 
-function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
+function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) {
     if (!flow)
         return <div/>
     return (
         <div>
             <div className="menu-group">
                 <div className="menu-content">
-                    <Button title="[r]eplay flow" icon="fa-repeat text-primary" onClick={() => replayFlow(flow)}>
+                    <Button title="[r]eplay flow" icon="fa-repeat text-primary"
+                            onClick={() => replayFlow(flow)}>
                         Replay
                     </Button>
                     <Button title="[D]uplicate flow" icon="fa-copy text-info"
@@ -33,7 +35,8 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
                             icon="fa-history text-warning" onClick={() => revertFlow(flow)}>
                         Revert
                     </Button>
-                    <Button title="[d]elete flow" icon="fa-trash text-danger" onClick={() => removeFlow(flow)}>
+                    <Button title="[d]elete flow" icon="fa-trash text-danger"
+                            onClick={() => removeFlow(flow)}>
                         Delete
                     </Button>
                 </div>
@@ -51,17 +54,18 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
             <div className="menu-group">
                 <div className="menu-content">
                     <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
-                    icon="fa-play text-success" onClick={() => acceptFlow(flow)}
-                    >
-                Resume
-            </Button>
-
+                            icon="fa-play text-success" onClick={() => resumeFlow(flow)}>
+                        Resume
+                    </Button>
+                    <Button disabled={!flow || !flow.intercepted} title="kill intercepted flow [x]"
+                            icon="fa-times text-danger" onClick={() => killFlow(flow)}>
+                        Abort
+                    </Button>
                 </div>
                 <div className="menu-legend">Interception</div>
             </div>
 
 
-
         </div>
     )
 }
@@ -71,7 +75,8 @@ export default connect(
         flow: state.flows.byId[state.flows.selected[0]],
     }),
     {
-        acceptFlow: flowsActions.accept,
+        resumeFlow: flowsActions.resume,
+        killFlow: flowsActions.kill,
         replayFlow: flowsActions.replay,
         duplicateFlow: flowsActions.duplicate,
         removeFlow: flowsActions.remove,
-- 
cgit v1.2.3