diff --git a/embark-ui/src/components/FiddleLayout.css b/embark-ui/src/components/FiddleLayout.css
new file mode 100644
index 000000000..d51b2d3e7
--- /dev/null
+++ b/embark-ui/src/components/FiddleLayout.css
@@ -0,0 +1,4 @@
+.fiddle--grid {
+ margin-left: -30px;
+ margin-right: -30px;
+}
\ No newline at end of file
diff --git a/embark-ui/src/components/FiddleLayout.js b/embark-ui/src/components/FiddleLayout.js
index fc95306b0..887db6620 100644
--- a/embark-ui/src/components/FiddleLayout.js
+++ b/embark-ui/src/components/FiddleLayout.js
@@ -1,28 +1,27 @@
import React from 'react';
-import {
- Page,
- Grid
-} from "tabler-react";
-
-import ApplicationPreviewContainer from '../containers/ApplicationPreviewContainer';
+import {Row, Col} from 'reactstrap';
+import TextEditorAsideContainer from '../containers/TextEditorAsideContainer';
import TextEditorContainer from '../containers/TextEditorContainer';
import FileExplorerContainer from '../containers/FileExplorerContainer';
+import './FiddleLayout.css';
+
+const DEFAULT_FILE = {name: 'newContract.sol', content: ''};
+
class FiddleLayout extends React.Component {
render() {
return (
-
-
-
- Fiddle
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
}
diff --git a/embark-ui/src/components/FileExplorer.js b/embark-ui/src/components/FileExplorer.js
index bbabd287f..6d8212bff 100644
--- a/embark-ui/src/components/FileExplorer.js
+++ b/embark-ui/src/components/FileExplorer.js
@@ -3,6 +3,85 @@ import PropTypes from 'prop-types';
import {Treebeard, decorators} from 'react-treebeard';
import {Form} from 'tabler-react';
+const style = {
+ tree: {
+ base: {
+ height: '100%',
+ listStyle: 'none',
+ backgroundColor: '#1C1C1C',
+ margin: 0,
+ padding: 0,
+ color: '#9DA5AB',
+ fontFamily: 'lucida grande ,tahoma,verdana,arial,sans-serif',
+ fontSize: '14px'
+ },
+ node: {
+ base: {
+ position: 'relative'
+ },
+ link: {
+ cursor: 'pointer',
+ position: 'relative',
+ padding: '0px 5px',
+ display: 'block'
+ },
+ activeLink: {
+ background: '#31363F'
+ },
+ toggle: {
+ base: {
+ position: 'relative',
+ display: 'inline-block',
+ verticalAlign: 'top',
+ marginLeft: '-5px',
+ height: '24px',
+ width: '24px'
+ },
+ wrapper: {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ margin: '-7px 0 0 -7px',
+ height: '14px'
+ },
+ height: 14,
+ width: 14,
+ arrow: {
+ fill: '#9DA5AB',
+ strokeWidth: 0
+ }
+ },
+ header: {
+ base: {
+ display: 'inline-block',
+ verticalAlign: 'top',
+ color: '#9DA5AB'
+ },
+ connector: {
+ width: '2px',
+ height: '12px',
+ borderLeft: 'solid 2px black',
+ borderBottom: 'solid 2px black',
+ position: 'absolute',
+ top: '0px',
+ left: '-21px'
+ },
+ title: {
+ lineHeight: '24px',
+ verticalAlign: 'middle'
+ }
+ },
+ subtree: {
+ listStyle: 'none',
+ paddingLeft: '19px'
+ },
+ loading: {
+ color: '#E2C089'
+ }
+ }
+ }
+};
+
const Header = ({style, node}) => {
const iconType = node.children ? 'folder' : 'file';
const iconClass = `fe fe-${iconType}`;
@@ -104,6 +183,7 @@ class FileExplorer extends React.Component {
data={this.filterHidden(this.props.files)}
decorators={decorators}
onToggle={this.onToggle.bind(this)}
+ style={style}
/>
);
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 1266c8783..639f2548d 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -66,7 +66,7 @@ const Layout = ({children, logout, credentials, location}) => (
-
+
{children}
diff --git a/embark-ui/src/containers/ApplicationPreviewContainer.js b/embark-ui/src/components/Preview.js
similarity index 71%
rename from embark-ui/src/containers/ApplicationPreviewContainer.js
rename to embark-ui/src/components/Preview.js
index d388981ee..2882d23eb 100644
--- a/embark-ui/src/containers/ApplicationPreviewContainer.js
+++ b/embark-ui/src/components/Preview.js
@@ -2,37 +2,15 @@ import PropTypes from 'prop-types';
import React from 'react';
import {Form, Button} from 'tabler-react';
-class ApplicationPreviewContainer extends React.Component {
+class Preview extends React.Component {
constructor(props) {
super(props);
this.state = {
- previewUrl: this.props.previewHomepage
+ previewUrl: this.props.previewUrl
};
}
- render() {
- return (
-
-
- this.handlePreviewUrlChange(e)} />
-
-
-
-
-
-
- );
- }
-
handlePreviewUrlChange(ev) {
this.setState({previewUrl: ev.target.value});
}
@@ -41,23 +19,43 @@ class ApplicationPreviewContainer extends React.Component {
try {
let url = ev.target.contentWindow.location.toString();
this.setState({previewUrl: url});
- } catch(e) {
- // Nothing here.
- }
+ } catch(e) {}
}
handlePreviewGo() {
this.previewIframe.src = this.state.previewUrl;
}
+
+ render() {
+ return (
+
+
+ this.handlePreviewUrlChange(e)} />
+
+
+
+
+
+
+ );
+ }
}
-ApplicationPreviewContainer.propTypes = {
- previewHomepage: PropTypes.string
+Preview.propTypes = {
+ previewUrl: PropTypes.string
};
-ApplicationPreviewContainer.defaultProps = {
- previewHomepage: window.location.protocol + '//' + window.location.host
+Preview.defaultProps = {
+ previewUrl: window.location.protocol + '//' + window.location.host
};
-export default ApplicationPreviewContainer;
+export default Preview;
diff --git a/embark-ui/src/components/TextEditor.js b/embark-ui/src/components/TextEditor.js
index 775a1360f..4a60092e0 100644
--- a/embark-ui/src/components/TextEditor.js
+++ b/embark-ui/src/components/TextEditor.js
@@ -27,8 +27,13 @@ class TextEditor extends React.Component {
const value = editor.getValue();
this.props.onFileContentChange(value);
});
+ editor.layout();
+ window.addEventListener('resize', this.handleResize);
}
+ handleResize = () => editor.layout();
+
+
getLanguage() {
const extension = this.props.file.name.split('.').pop();
return SUPPORTED_LANGUAGES[SUPPORTED_LANGUAGES.indexOf(extension)] || DEFAULT_LANGUAGE;
@@ -77,11 +82,10 @@ class TextEditor extends React.Component {
render() {
const style = {
- width: "800px",
- height: "600px"
+ height: "100%"
};
- return ;
+ return ;
}
}
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
new file mode 100644
index 000000000..7a6c067fc
--- /dev/null
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -0,0 +1,59 @@
+/* eslint multiline-ternary: "off" */
+/* eslint operator-linebreak: "off" */
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+ currentFile as currentFileAction,
+} from '../actions';
+import {getCurrentFile} from '../reducers/selectors';
+import Preview from '../components/Preview';
+
+class TextEditorAsideContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {currentFile: this.props.currentFile};
+ }
+
+ componentDidMount() {
+ this.props.fetchCurrentFile();
+ }
+
+ componentDidUpdate(prevProps) {
+ if(this.props.currentFile.path !== prevProps.currentFile.path) {
+ this.setState({currentFile: this.props.currentFile});
+ }
+ }
+
+ isContract() {
+ return this.state.currentFile.name.endsWith('.sol');
+ }
+
+ render() {
+ return this.isContract() ? hello :
+ }
+}
+
+function mapStateToProps(state, props) {
+ const currentFile = getCurrentFile(state) || props.defaultFile
+
+ return {
+ currentFile,
+ loading: state.loading,
+ error: state.errorMessage
+ };
+}
+
+TextEditorAsideContainer.propTypes = {
+ currentFile: PropTypes.object,
+ fetchCurrentFile: PropTypes.func,
+ loading: PropTypes.bool,
+ error: PropTypes.string
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ fetchCurrentFile: currentFileAction.request,
+ },
+)(TextEditorAsideContainer);
diff --git a/embark-ui/src/containers/TextEditorContainer.js b/embark-ui/src/containers/TextEditorContainer.js
index f43c5bc19..99fa8c841 100644
--- a/embark-ui/src/containers/TextEditorContainer.js
+++ b/embark-ui/src/containers/TextEditorContainer.js
@@ -3,7 +3,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
-import {Grid} from 'tabler-react';
import TextEditor from '../components/TextEditor';
import TextEditorContractErrors from '../components/TextEditorContractErrors';
import TextEditorContractWarnings from '../components/TextEditorContractWarnings';
@@ -20,8 +19,6 @@ import {
} from '../actions';
import {getCurrentFile, getContractCompile, getContractDeploys} from '../reducers/selectors';
-const DEFAULT_FILE = {name: 'newContract.sol', content: ''};
-
class TextEditorContainer extends Component {
constructor(props) {
super(props);
@@ -62,7 +59,7 @@ class TextEditorContainer extends Component {
remove() {
this.props.removeFile(this.state.currentFile);
- this.setState({currentFile: DEFAULT_FILE});
+ this.setState({currentFile: this.props.defaultFile});
}
renderContractFooter() {
@@ -103,21 +100,15 @@ class TextEditorContainer extends Component {
render() {
return (
-
-
- {this.renderToolbar()}
-
- this.onFileContentChange(newContent)} />
- {this.renderContractFooter()}
-
+ this.onFileContentChange(newContent)} />
);
}
}
-function mapStateToProps(state) {
- const currentFile = getCurrentFile(state) || DEFAULT_FILE;
+function mapStateToProps(state, props) {
+ const currentFile = getCurrentFile(state) || props.defaultFile;
const contractCompile = getContractCompile(state, currentFile) || {};
const contractName = contractCompile.result && Object.keys(contractCompile.result)[0];
const contractDeploys = getContractDeploys(state, contractName);