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: [PATCH] [web] style flow menu

---
 web/src/css/header.less                     | 74 +++++++++++------
 web/src/js/components/Header/FlowMenu.jsx   | 62 +++++++++++---
 web/src/js/components/Header/MenuToggle.jsx |  2 +-
 web/src/js/components/Header/OptionMenu.jsx | 92 +++++++++++----------
 web/src/js/components/common/Button.jsx     | 16 ++--
 5 files changed, 159 insertions(+), 87 deletions(-)

diff --git a/web/src/css/header.less b/web/src/css/header.less
index c90e91c43..a026d8aac 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -3,7 +3,6 @@
 
 @menu-height: 85px;
 
-
 header {
     padding-top: 6px;
     background-color: white;
@@ -18,35 +17,62 @@ header {
     }
 }
 
+@menu-legend-height: 16px;
+@menu-group-hmargin: 3px;
 .menu-group {
-    @description-height: 16px;
+    margin: 0 @menu-group-hmargin;
     display: inline-block;
     height: @menu-height;
     vertical-align: top;
+}
 
-    .entry {
-        height: (@menu-height - @description-height)/3;
-        line-height: 1;
-        padding: 0.5rem 1rem;
+.menu-content {
+    height: @menu-height - @menu-legend-height;
+    text-align: center;
 
-        label {
-            font-size: 1.2rem;
-            font-weight: normal;
-            margin: 0;
-        }
-        input[type=checkbox] {
-            margin: 0 2px;
-            vertical-align: middle;
-        }
-    }
-    .description {
-        height: @description-height;
+    > .btn {
+        height: @menu-height - @menu-legend-height;
         text-align: center;
-        font-size: 0.9rem;
+        margin: 0 1px;
+        padding: 12px 5px;
+        border: none;
+        border-radius: 0;
+        i {
+            font-size: 20px;
+            display: block;
+            margin: 0 auto 5px;
+        }
     }
 }
+
+
+.menu-entry {
+    height: (@menu-height - @menu-legend-height)/3;
+    line-height: 1;
+    padding: 0.5rem 1rem;
+
+    label {
+        font-size: 1.2rem;
+        font-weight: normal;
+        margin: 0;
+    }
+    input[type=checkbox] {
+        margin: 0 2px;
+        vertical-align: middle;
+    }
+}
+
+
+.menu-legend {
+    height: @menu-legend-height;
+    text-align: center;
+    font-size: 12px;
+    padding: 0 5px;
+}
+
 .menu-group + .menu-group:before {
     @space: 10px;
+    margin-left: -@menu-group-hmargin;
     content: " ";
     border-left: solid 1px lighten(grey, 40%);
     margin-top: @space;
@@ -68,11 +94,11 @@ header {
 
         padding: 2px 2.5px;
 
-        >.form-control,> .input-group-addon, > .input-group-btn>.btn {
-          height: 23.5px;
-          padding: 1px 5px;
-          font-size: 12px;
-          line-height: 1.5;
+        > .form-control, > .input-group-addon, > .input-group-btn > .btn {
+            height: 23.5px;
+            padding: 1px 5px;
+            font-size: 12px;
+            line-height: 1.5;
         }
     }
 }
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index e0c59afeb..420cb0547 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>
     )
 }
diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx
index 726db7bd1..8977f3b90 100644
--- a/web/src/js/components/Header/MenuToggle.jsx
+++ b/web/src/js/components/Header/MenuToggle.jsx
@@ -11,7 +11,7 @@ MenuToggle.propTypes = {
 
 export function MenuToggle({ value, onChange, children }) {
     return (
-        <div className="entry">
+        <div className="menu-entry">
             <label>
                 <input type="checkbox"
                        value={value}
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 4fb5dc1f9..d6a8dfc2b 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,7 +1,7 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import {SettingsToggle, EventlogToggle} from './MenuToggle'
-import DocsLink from '../common/DocsLink'
+import React, { PropTypes } from "react"
+import { connect } from "react-redux"
+import { SettingsToggle, EventlogToggle } from "./MenuToggle"
+import DocsLink from "../common/DocsLink"
 
 OptionMenu.title = 'Options'
 
@@ -9,51 +9,57 @@ export default function OptionMenu() {
     return (
         <div>
             <div className="menu-group">
-                <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
-                <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
-                <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
-                <div className="description">Protocol Support</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
+                    <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
+                    <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
+                </div>
+                <div className="menu-legend">Protocol Support</div>
             </div>
             <div className="menu-group">
-                <SettingsToggle setting="anticache">
-                    Disable Caching <DocsLink resource="features/anticache.html"/>
-                </SettingsToggle>
-                <SettingsToggle setting="anticomp">
-                    Disable Compression <i className="fa fa-question-circle" title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
-                </SettingsToggle>
-                <div className="entry"/>
-                <div className="description">HTTP Options</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="anticache">
+                        Disable Caching <DocsLink resource="features/anticache.html"/>
+                    </SettingsToggle>
+                    <SettingsToggle setting="anticomp">
+                        Disable Compression <i className="fa fa-question-circle"
+                                               title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
+                    </SettingsToggle>
+                </div>
+                <div className="menu-legend">HTTP Options</div>
             </div>
             <div className="menu-group">
-                <SettingsToggle setting="showhost">
-                    Use Host Header <i className="fa fa-question-circle" title="Use the Host header to construct URLs for display."></i>
-                </SettingsToggle>
-                <EventlogToggle/>
-                <div className="entry"/>
-                <div className="description">View Options</div>
+                <div className="menu-content">
+                    <SettingsToggle setting="showhost">
+                        Use Host Header <i className="fa fa-question-circle"
+                                           title="Use the Host header to construct URLs for display."></i>
+                    </SettingsToggle>
+                    <EventlogToggle/>
+                </div>
+                <div className="menu-legend">View Options</div>
             </div>
             { /*
-            <ToggleButton text="no_upstream_cert"
-                checked={settings.no_upstream_cert}
-                onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
-            />
-            <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
-                checked={!!settings.stickyauth}
-                txt={settings.stickyauth}
-                onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
-            />
-            <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
-                checked={!!settings.stickycookie}
-                txt={settings.stickycookie}
-                onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
-            />
-            <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
-                checked={!!settings.stream_large_bodies}
-                txt={settings.stream_large_bodies}
-                inputType="number"
-                onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
-            />
-            */}
+             <ToggleButton text="no_upstream_cert"
+             checked={settings.no_upstream_cert}
+             onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
+             />
+             <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+             checked={!!settings.stickyauth}
+             txt={settings.stickyauth}
+             onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
+             />
+             <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+             checked={!!settings.stickycookie}
+             txt={settings.stickycookie}
+             onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
+             />
+             <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
+             checked={!!settings.stream_large_bodies}
+             txt={settings.stream_large_bodies}
+             inputType="number"
+             onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
+             />
+             */}
         </div>
     )
 }
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx
index bfbb455d0..69471f252 100644
--- a/web/src/js/components/common/Button.jsx
+++ b/web/src/js/components/common/Button.jsx
@@ -1,19 +1,21 @@
-import React, { PropTypes } from 'react'
-import classnames from 'classnames'
+import React, { PropTypes } from "react"
+import classnames from "classnames"
 
 Button.propTypes = {
     onClick: PropTypes.func.isRequired,
-    text: PropTypes.string,
-    icon: PropTypes.string
+    children: PropTypes.node.isRequired,
+    icon: PropTypes.string,
+    title: PropTypes.string,
 }
 
-export default function Button({ onClick, text, icon, disabled, className }) {
+export default function Button({ onClick, children, icon, disabled, className, title }) {
     return (
         <div className={classnames(className, 'btn btn-default')}
              onClick={onClick}
-             disabled={disabled}>
+             disabled={disabled}
+             title={title}>
             {icon && (<i className={"fa fa-fw " + icon}/> )}
-            {text && text}
+            {children}
         </div>
     )
 }