diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/ContentView.jsx | 54 | ||||
| -rw-r--r-- | web/src/js/components/FlowView/FlowEditorButton.jsx | 49 | ||||
| -rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 2 |
3 files changed, 60 insertions, 45 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 0b93d3f0..766de26f 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,9 +5,8 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView, setDisplayLarge } from '../ducks/ui' +import { setContentView, setDisplayLarge, setModifiedFlowContent } from '../ducks/ui' import CodeEditor from './common/CodeEditor' -import {setModifiedFlowContent} from '../ducks/flows' ContentView.propTypes = { // It may seem a bit weird at the first glance: @@ -20,7 +19,7 @@ ContentView.propTypes = { ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) function ContentView(props) { - const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props if (message.contentLength === 0) { return <MetaViews.ContentEmpty {...props}/> @@ -38,20 +37,43 @@ function ContentView(props) { return ( <div> - {View.textView ? ( + {isFlowEditorOpen ? ( <ContentLoader flow={flow} message={message}> - <View content="" /> - </ContentLoader> - ) : ( - <View flow={flow} message={message} /> + <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/> + </ContentLoader> + ): ( + <div> + {View.textView ? ( + <ContentLoader flow={flow} message={message}> + <View content="" /> + </ContentLoader> + ) : ( + <View flow={flow} message={message} /> + )} + <div className="view-options text-center"> + <ViewSelector onSelectView={selectView} active={View} message={message}/> + + <a className="btn btn-default btn-xs" + href={MessageUtils.getContentURL(flow, message)} + title="Download the content of the flow."> + <i className="fa fa-download"/> + </a> + + <a className="btn btn-default btn-xs" + onClick={() => ContentView.fileInput.click()} + title="Upload a file to replace the content." + > + <i className="fa fa-upload"/> + </a> + <input + ref={ref => ContentView.fileInput = ref} + className="hidden" + type="file" + onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} + /> + </div> + </div> )} - <div className="view-options text-center"> - <ViewSelector onSelectView={selectView} active={View} message={message}/> - - <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}> - <i className="fa fa-download"/> - </a> - </div> </div> ) } @@ -60,9 +82,11 @@ export default connect( state => ({ contentView: state.ui.contentView, displayLarge: state.ui.displayLarge, + isFlowEditorOpen : state.ui.isFlowEditorOpen }), { selectView: setContentView, setDisplayLarge, + setModifiedFlowContent } )(ContentView) diff --git a/web/src/js/components/FlowView/FlowEditorButton.jsx b/web/src/js/components/FlowView/FlowEditorButton.jsx index e9c75535..3d0d1d16 100644 --- a/web/src/js/components/FlowView/FlowEditorButton.jsx +++ b/web/src/js/components/FlowView/FlowEditorButton.jsx @@ -4,41 +4,32 @@ import { connect } from 'react-redux' import {closeFlowEditor} from '../../ducks/ui.js' import {openFlowEditor} from '../../ducks/ui.js' -// FlowEditorButton.propTypes = { -// isFlowEditorOpen: PropTypes.bool.isRequired, -// content: PropTypes.string.isRequired, -// onContentChange: PropTypes.func.isRequired -// } - -class FlowEditorButton extends Component{ - static propTypes = { - isFlowEditorOpen: PropTypes.bool.isRequired, - content: PropTypes.string.isRequired, - onContentChange: PropTypes.func.isRequired - } +FlowEditorButton.propTypes = { + isFlowEditorOpen: PropTypes.bool.isRequired, + content: PropTypes.string.isRequired, + onContentChange: PropTypes.func.isRequired +} - render(){ - let { isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content } = this.props - return ( - <div className="edit-flow-container"> - {isFlowEditorOpen ? - <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}> - <i className="fa fa-check"/> - </a> - : - <a className="edit-flow" onClick={() => openFlowEditor()}> - <i className="fa fa-pencil"/> - </a> - } - </div> - ) - } +function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content }) { + return ( + <div className="edit-flow-container"> + {isFlowEditorOpen ? + <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}> + <i className="fa fa-check"/> + </a> + : + <a className="edit-flow" onClick={() => openFlowEditor()}> + <i className="fa fa-pencil"/> + </a> + } + </div> + ) } export default connect( state => ({ isFlowEditorOpen: state.ui.isFlowEditorOpen, - content: state.flows.modifiedFlow.content + content: state.ui.modifiedFlow.content }), { closeFlowEditor, diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index 8cb918a8..2f03c712 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -7,7 +7,7 @@ import ContentView from '../ContentView' import ValueEditor from '../ValueEditor' import Headers from './Headers' import * as flowActions from '../../ducks/flows' -import FlowEditorButton from './FlowEditorButton.jsx' +import FlowEditorButton from './FlowEditorButton' class RequestLine extends Component { |