From adfdcc9391ed70202a1b4af65259a89634f36fa0 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 9 Aug 2016 08:40:24 +0200
Subject: added hints from mhils

---
 web/src/css/flowdetail.less                        | 29 +++++++-------
 web/src/js/components/ContentView/ContentViews.jsx |  1 +
 .../ContentView/ShowFullContentButton.jsx          |  2 +-
 web/src/js/components/ContentView/ViewSelector.jsx | 14 +++----
 web/src/js/components/FlowView/Messages.jsx        | 44 ++++++++++++----------
 web/src/js/components/common/Button.jsx            |  4 +-
 web/src/js/ducks/ui/flow.js                        | 15 +-------
 7 files changed, 48 insertions(+), 61 deletions(-)

(limited to 'web')

diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 1d884e88..8244300f 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -14,7 +14,9 @@
     }
 
     section {
-        padding: 5px 12px;
+        display: flex;
+        flex-direction: column;
+        padding: 0 !important;
     }
 
     .first-line {
@@ -40,25 +42,20 @@
         margin: 0 0 5px;
     }
 
-}
+    article {
+        overflow: auto;
+        padding: 5px 12px 0;
+    }
 
-.flowview-container{
-    display: flex;
-    flex-direction: column;
-    padding: 0 !important;
-}
+    footer {
+        box-shadow: 0 0 3px gray;
+        padding: 2px;
+        margin: 0;
+        height:23px;
+    }
 
-.flowview-body{
-    overflow: auto;
-    padding: 5px 12px 0;
 }
 
-.flowview-footer{
-    box-shadow: 0 0 3px gray;
-    padding: 2px;
-    margin: 0;
-    height:23px;
-}
 
 .inline-input {
     display: inline;
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index 3db77af4..9feb0623 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -37,6 +37,7 @@ class ViewServer extends Component {
     componentWillMount(){
         this.setContentView(this.props)
     }
+
     componentWillReceiveProps(nextProps){
         this.setContentView(nextProps)
     }
diff --git a/web/src/js/components/ContentView/ShowFullContentButton.jsx b/web/src/js/components/ContentView/ShowFullContentButton.jsx
index 17e61be4..acb094a7 100644
--- a/web/src/js/components/ContentView/ShowFullContentButton.jsx
+++ b/web/src/js/components/ContentView/ShowFullContentButton.jsx
@@ -14,7 +14,7 @@ ShowFullContentButton.propTypes = {
 function ShowFullContentButton ( {setShowFullContent, showFullContent} ){
 
     return (
-        !showFullContent && <Button className="view-all-content-btn" isXs={true} onClick={() => setShowFullContent(true)} text="Show full content"/>
+        !showFullContent && <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/>
     )
 }
 
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index 1959ec1e..59ec4276 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -2,8 +2,7 @@ import React, { PropTypes, Component } from 'react'
 import classnames from 'classnames'
 import { connect } from 'react-redux'
 import * as ContentViews from './ContentViews'
-import { setContentView, setContentViewSelectorOpen } from "../../ducks/ui/flow";
-
+import { setContentView } from "../../ducks/ui/flow";
 
 function ViewItem({ name, setContentView, children }) {
     return (
@@ -29,24 +28,25 @@ class ViewSelector extends Component {
       constructor(props, context) {
         super(props, context)
         this.close = this.close.bind(this)
+        this.state = {open: false}
     }
     close() {
-        this.props.setContentViewSelectorOpen(false)
+        this.setState({open: false})
         document.removeEventListener('click', this.close)
     }
 
     onDropdown(e){
         e.preventDefault()
-        this.props.setContentViewSelectorOpen(!this.props.isContentViewSelectorOpen)
+        this.setState({open: !this.state.open})
         document.addEventListener('click', this.close)
     }
 
     render() {
-        const {contentViews, activeView, isEdit, isContentViewSelectorOpen, setContentViewSelectorOpen, setContentView} = this.props
+        const {contentViews, activeView, isEdit, setContentView} = this.props
         let edit = ContentViews.Edit.displayName
 
         return (
-            <div className={classnames('dropup pull-left', { open: isContentViewSelectorOpen })}>
+            <div className={classnames('dropup pull-left', { open: this.state.open })}>
                 <a className="btn btn-default btn-xs"
                    onClick={ e => this.onDropdown(e) }
                    href="#">
@@ -74,9 +74,7 @@ export default connect (
         contentViews: state.settings.contentViews,
         activeView: state.ui.flow.contentView,
         isEdit: !!state.ui.flow.modifiedFlow,
-        isContentViewSelectorOpen: state.ui.flow.isContentViewSelectorOpen
     }), {
         setContentView,
-        setContentViewSelectorOpen
     }
 )(ViewSelector)
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 27644823..6d049fa4 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -84,8 +84,8 @@ export class Request extends Component {
         const { flow, isEdit, updateFlow, uploadContent } = this.props
         let noContent =  !isEdit && (flow.request.contentLength == 0 || flow.request.contentLength == null)
         return (
-            <section className="request flowview-container">
-                <div className="flowview-body">
+            <section className="request">
+                <article>
                     <ToggleEdit/>
                     <RequestLine
                         flow={flow}
@@ -103,14 +103,16 @@ export class Request extends Component {
                         flow={flow}
                         onContentChange={content => updateFlow({ request: {content}})}
                         message={flow.request}/>
-                </div>
-                <div hidden={noContent} className="flowview-footer">
-                    <ContentViewOptions
-                        flow={flow}
-                        readonly={!isEdit}
-                        message={flow.request}
-                        uploadContent={content => uploadContent(flow, content, "request")}/>
-                </div>
+                </article>
+                {!noContent &&
+                    <footer>
+                        <ContentViewOptions
+                            flow={flow}
+                            readonly={!isEdit}
+                            message={flow.request}
+                            uploadContent={content => uploadContent(flow, content, "request")}/>
+                    </footer>
+                }
             </section>
         )
     }
@@ -149,8 +151,8 @@ export class Response extends Component {
         let noContent =  !isEdit && (flow.response.contentLength == 0 || flow.response.contentLength == null)
 
         return (
-            <section className="response flowview-container">
-                <div className="flowview-body">
+            <section className="response">
+                <article>
                     <ToggleEdit/>
                     <ResponseLine
                         flow={flow}
@@ -168,14 +170,16 @@ export class Response extends Component {
                         onContentChange={content => updateFlow({ response: {content}})}
                         message={flow.response}
                     />
-                </div>
-                <div hidden={noContent} className="flowview-footer">
-                    <ContentViewOptions
-                        flow={flow}
-                        message={flow.response}
-                        uploadContent={content => uploadContent(flow, content, "response")}
-                        readonly={!isEdit}/>
-                </div>
+                </article>
+                {!noContent &&
+                    <footer >
+                        <ContentViewOptions
+                            flow={flow}
+                            message={flow.response}
+                            uploadContent={content => uploadContent(flow, content, "response")}
+                            readonly={!isEdit}/>
+                    </footer>
+                }
             </section>
         )
     }
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx
index d623974f..bfbb455d 100644
--- a/web/src/js/components/common/Button.jsx
+++ b/web/src/js/components/common/Button.jsx
@@ -7,9 +7,9 @@ Button.propTypes = {
     icon: PropTypes.string
 }
 
-export default function Button({ onClick, text, icon, disabled, isXs, className }) {
+export default function Button({ onClick, text, icon, disabled, className }) {
     return (
-        <div className={classnames(className, 'btn btn-default', { 'btn-xs': isXs})}
+        <div className={classnames(className, 'btn btn-default')}
              onClick={onClick}
              disabled={disabled}>
             {icon && (<i className={"fa fa-fw " + icon}/> )}
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
index 9c1d6dea..f3489bee 100644
--- a/web/src/js/ducks/ui/flow.js
+++ b/web/src/js/ducks/ui/flow.js
@@ -10,15 +10,13 @@ export const SET_CONTENT_VIEW               = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
              UPDATE_EDIT                    = 'UI_FLOWVIEW_UPDATE_EDIT',
              UPLOAD_CONTENT                 = 'UI_FLOWVIEW_UPLOAD_CONTENT',
              SET_SHOW_FULL_CONTENT          = 'UI_SET_SHOW_FULL_CONTENT',
-             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION",
-             SET_CONTENT_VIEW_SELECTOR      = "UI_SET_CONTENT_VIEW_SELECTOR"
+             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION"
 
 
 const defaultState = {
     displayLarge: false,
     contentViewDescription: '',
     showFullContent: false,
-    isContentViewSelectorOpen: false,
     modifiedFlow: false,
     contentView: 'Auto',
     tab: 'request',
@@ -81,13 +79,6 @@ export default function reducer(state = defaultState, action) {
                 showFullContent: action.show
             }
 
-
-        case SET_CONTENT_VIEW_SELECTOR:
-            return {
-                ...state,
-                isContentViewSelectorOpen: action.contentViewSelector
-            }
-
         case SET_TAB:
             return {
                 ...state,
@@ -141,10 +132,6 @@ export function setShowFullContent(show) {
     return { type: SET_SHOW_FULL_CONTENT, show }
 }
 
-export function setContentViewSelectorOpen(open){
-    return {type: SET_CONTENT_VIEW_SELECTOR, contentViewSelector: open}
-}
-
 export function updateEdit(update) {
     return { type: UPDATE_EDIT, update }
 }
-- 
cgit v1.2.3