moved editor to raw_view mode

This commit is contained in:
Clemens 2016-07-21 11:50:02 +02:00
parent 6ffeaaebed
commit 61f192434f
4 changed files with 39 additions and 41 deletions

View File

@ -6,7 +6,6 @@ import * as MetaViews from './ContentView/MetaViews'
import ContentLoader from './ContentView/ContentLoader'
import ViewSelector from './ContentView/ViewSelector'
import { setContentView, displayLarge, updateEdit } from '../ducks/ui/flow'
import CodeEditor from './common/CodeEditor'
ContentView.propTypes = {
// It may seem a bit weird at the first glance:
@ -19,7 +18,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, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props
const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, readonly, isFlowEditorOpen } = props
if (message.contentLength === 0) {
return <MetaViews.ContentEmpty {...props}/>
@ -37,43 +36,35 @@ function ContentView(props) {
return (
<div>
{isFlowEditorOpen ? (
{View.textView ? (
<ContentLoader 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}/>
&nbsp;
<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>
&nbsp;
<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>
<View readonly={readonly} isFlowEditorOpen={isFlowEditorOpen} content="" />
</ContentLoader>
) : (
<View flow={flow} message={message} />
)}
<div className="view-options text-center">
<ViewSelector onSelectView={selectView} active={View} message={message}/>
&nbsp;
<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>
&nbsp;
<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>
)
}

View File

@ -1,6 +1,7 @@
import React, { PropTypes } from 'react'
import ContentLoader from './ContentLoader'
import { MessageUtils } from '../../flow/utils.js'
import CodeEditor from '../common/CodeEditor'
const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw]
@ -28,8 +29,9 @@ ViewRaw.propTypes = {
content: React.PropTypes.string.isRequired,
}
export function ViewRaw({ content }) {
return <pre>{content}</pre>
export function ViewRaw({ content, isFlowEditorOpen, readonly }) {
let showEditor = isFlowEditorOpen && !readonly
return showEditor ? <CodeEditor content={content} onChange={content =>alert(content)}/> : <pre>{content}</pre>
}
ViewJSON.textView = true

View File

@ -144,7 +144,11 @@ export class Response extends Component {
onChange={headers => updateFlow({ response: { headers } })}
/>
<hr/>
<ContentView flow={flow} message={flow.response}/>
<ContentView
readonly={!isEdit}
flow={flow}
message={flow.response}
/>
</section>
)
}

View File

@ -22,7 +22,8 @@ export default function reducer(state = defaultState, action) {
case START_EDIT:
return {
...state,
modifiedFlow: action.flow
modifiedFlow: action.flow,
contentView: 'ViewRaw'
}
case UPDATE_EDIT: