From 544b1e32389d28df4a40013ea6886f1f9d61e37d Mon Sep 17 00:00:00 2001 From: Clemens Date: Mon, 11 Jul 2016 19:49:58 +0200 Subject: modify flow content --- web/src/js/components/ContentView.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 1533684e..f6dbe90a 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -59,11 +59,11 @@ export default class ContentView extends Component { return (
{View.textView ? ( - - + + ) : ( - + )}
-- cgit v1.2.3 From f84098554a3d50ec02255603bb0a145b3aa0c6b2 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 13 Jul 2016 18:16:31 +0200 Subject: added code editor and file upload --- web/src/js/components/ContentView.jsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index f6dbe90a..6c9d9b26 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -4,6 +4,7 @@ import { ViewAuto, ViewImage } from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' +import * as flowsActions from '../ducks/flows' export default class ContentView extends Component { @@ -40,6 +41,15 @@ export default class ContentView extends Component { return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2) } + onOpenFile(e) { + if (e.target.files.length > 0) { + //alert(e.target.files[0]) + flowsActions.update_content(this.props.flow, e.target.files[0]) + //this.fileInput.value = '' + } + e.preventDefault() + } + render() { const { flow, message } = this.props const { displayLarge, View } = this.state @@ -60,10 +70,10 @@ export default class ContentView extends Component {
{View.textView ? ( - + flowsActions.update_content(this.props.flow, content)} content="" /> ) : ( - + flowsActions.update_content(this.props.flow, content)} message={message} /> )}
@@ -71,6 +81,16 @@ export default class ContentView extends Component { +   + {this.fileInput.click(); e.preventDefault();}}> + + + this.fileInput = ref} + className="hidden" + type="file" + onChange={e => this.onOpenFile(e)} + />
) -- cgit v1.2.3 From 5f3782dd5fb8be4c196f57cb07fd1cc2fd6b2f56 Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 14 Jul 2016 23:01:34 +0200 Subject: change way to edit --- web/src/js/components/ContentView.jsx | 81 +++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 28 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 6c9d9b26..fa26a057 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -4,7 +4,7 @@ import { ViewAuto, ViewImage } from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import * as flowsActions from '../ducks/flows' +import ContentEditor from './ContentView/ContentEditor' export default class ContentView extends Component { @@ -14,12 +14,13 @@ export default class ContentView extends Component { // flow: React.PropTypes.object.isRequired, message: React.PropTypes.object.isRequired, + onContentChange: React.PropTypes.func.isRequired } constructor(props, context) { super(props, context) - this.state = { displayLarge: false, View: ViewAuto } + this.state = { displayLarge: false, View: ViewAuto, contentEditorClosed: true } this.selectView = this.selectView.bind(this) } @@ -43,9 +44,7 @@ export default class ContentView extends Component { onOpenFile(e) { if (e.target.files.length > 0) { - //alert(e.target.files[0]) - flowsActions.update_content(this.props.flow, e.target.files[0]) - //this.fileInput.value = '' + this.props.onContentChange(e.target.files[0]) } e.preventDefault() } @@ -68,30 +67,56 @@ export default class ContentView extends Component { return (
- {View.textView ? ( - - flowsActions.update_content(this.props.flow, content)} content="" /> - - ) : ( - flowsActions.update_content(this.props.flow, content)} message={message} /> - )} -
- -   - - - -   - {this.fileInput.click(); e.preventDefault();}}> - - - this.fileInput = ref} - className="hidden" - type="file" - onChange={e => this.onOpenFile(e)} - /> +
+
+ + this.setState({contentEditorClosed : true})} + onOpen={() => this.setState({contentEditorClosed : false})} + isClosed={this.state.contentEditorClosed} + content="" + /> + +
+ + {this.state.contentEditorClosed && (
+ {View.textView ? ( + + + + ) : ( + + )} + + + +
+ +   + + + +   + {this.fileInput.click(); e.preventDefault();}} + title="Upload a file to replace the content." + > + + + this.fileInput = ref} + className="hidden" + type="file" + onChange={e => this.onOpenFile(e)} + /> +
+
)}
) } -- cgit v1.2.3 From 87797d7ac07108ce5fd00902918e4900907b94b6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Fri, 15 Jul 2016 14:41:30 +0200 Subject: added new btn, changed to codemirror --- web/src/js/components/ContentView.jsx | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index fa26a057..70bca249 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -67,20 +67,14 @@ export default class ContentView extends Component { return (
-
-
- - this.setState({contentEditorClosed : true})} - onOpen={() => this.setState({contentEditorClosed : false})} - isClosed={this.state.contentEditorClosed} - content="" - /> - -
-
- + + {this.props.onContentChange(content);this.setState({contentEditorClosed : true});}} + onOpen={() => this.setState({contentEditorClosed : false})} + isClosed={this.state.contentEditorClosed} + content="" + /> + {this.state.contentEditorClosed && (
{View.textView ? ( -- cgit v1.2.3 From 48728af43ad746d70ef3e251dc28b75028dea1e6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 19 Jul 2016 12:23:20 +0200 Subject: moved flow editor state to redux --- web/src/js/components/ContentView.jsx | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 70bca249..3cd9990c 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -1,12 +1,15 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import { MessageUtils } from '../flow/utils.js' import { ViewAuto, ViewImage } from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import ContentEditor from './ContentView/ContentEditor' +import CodeEditor from './common/CodeEditor' +import {setModifiedFlowContent} from '../ducks/flows' -export default class ContentView extends Component { + +class ContentView extends Component { static propTypes = { // It may seem a bit weird at the first glance: @@ -19,8 +22,7 @@ export default class ContentView extends Component { constructor(props, context) { super(props, context) - - this.state = { displayLarge: false, View: ViewAuto, contentEditorClosed: true } + this.state = { displayLarge: false, View: ViewAuto} this.selectView = this.selectView.bind(this) } @@ -50,7 +52,7 @@ export default class ContentView extends Component { } render() { - const { flow, message } = this.props + const { flow, message, setModifiedFlowContent, isFlowEditorOpen } = this.props const { displayLarge, View } = this.state if (message.contentLength === 0) { @@ -67,15 +69,11 @@ export default class ContentView extends Component { return (
- - {this.props.onContentChange(content);this.setState({contentEditorClosed : true});}} - onOpen={() => this.setState({contentEditorClosed : false})} - isClosed={this.state.contentEditorClosed} - content="" - /> - - {this.state.contentEditorClosed && (
+ {isFlowEditorOpen ? ( + + {setModifiedFlowContent(content)}}/> + + ): (
{View.textView ? ( @@ -115,3 +113,9 @@ export default class ContentView extends Component { ) } } +export default connect( + state => ( + {isFlowEditorOpen : state.ui.isFlowEditorOpen} + ), { + setModifiedFlowContent + })(ContentView) -- cgit v1.2.3 From 281f20ef1e9ac33a7e210ba562eb2914f6d187e6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 19 Jul 2016 16:13:26 +0200 Subject: added flow_content update --- web/src/js/components/ContentView.jsx | 54 +++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 15 deletions(-) (limited to 'web/src/js/components/ContentView.jsx') 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 @@ -38,20 +37,43 @@ function ContentView(props) { return (
- {View.textView ? ( + {isFlowEditorOpen ? ( - - - ) : ( - + {setModifiedFlowContent(content)}}/> + + ): ( +
+ {View.textView ? ( + + + + ) : ( + + )} +
+ +   + + + +   + ContentView.fileInput.click()} + title="Upload a file to replace the content." + > + + + ContentView.fileInput = ref} + className="hidden" + type="file" + onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} + /> +
+
)} -
- -   - - - -
) } @@ -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) -- cgit v1.2.3