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/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 +-
 5 files changed, 34 insertions(+), 31 deletions(-)

(limited to 'web/src/js/components')

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