r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add some base editor styling

Browse source
This commit is contained in:
catarak 2016-05-10 22:22:32 -04:00
parent bd3a554121
commit 5858914559
15 changed files with 74 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/index.js
View file

@ -4,7 +4,7 @@ import { Provider } from 'react-redux'
import configureStore from '../shared/redux/store/configureStore' import configureStore from '../shared/redux/store/configureStore'
import App from '../shared/containers/App/App' import App from '../shared/containers/App/App'
require('../static/styles/main.scss'); require('../styles/main.scss');
const initialState = window.__INITIAL_STATE__ const initialState = window.__INITIAL_STATE__
const store = configureStore(initialState) const store = configureStore(initialState)

3
index.html
View file

@ -2,9 +2,10 @@
<html> <html>
<head> <head>
<title>p5.js Web Editor</title> <title>p5.js Web Editor</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id="root"> <div id="root" class="root-app">
</div> </div>
<script src="/dist/bundle.js"></script> <script src="/dist/bundle.js"></script>
</body> </body>

1
shared/components/Editor/Editor.jsx
View file

@ -9,7 +9,6 @@ class Editor extends React.Component {
this._cm = CodeMirror(this.refs.container, { this._cm = CodeMirror(this.refs.container, {
theme: 'p5-widget', theme: 'p5-widget',
value: this.props.content, value: this.props.content,
// value: "var a = 'Hello World!';",
lineNumbers: true, lineNumbers: true,
mode: 'javascript' mode: 'javascript'
}); });

4
shared/components/Preview/PreviewFrame.jsx
View file

@ -10,7 +10,6 @@ class PreviewFrame extends React.Component {
renderFrameContents() { renderFrameContents() {
let doc = ReactDOM.findDOMNode(this).contentDocument; let doc = ReactDOM.findDOMNode(this).contentDocument;
if(doc.readyState === 'complete') { if(doc.readyState === 'complete') {
// ReactDOM.render(this.props.children, doc.body);
this.renderSketch(); this.renderSketch();
} else { } else {
setTimeout(this.renderFrameContents, 0); setTimeout(this.renderFrameContents, 0);
@ -21,6 +20,7 @@ class PreviewFrame extends React.Component {
let doc = ReactDOM.findDOMNode(this).contentDocument; let doc = ReactDOM.findDOMNode(this).contentDocument;
doc.write(''); doc.write('');
doc.close(); doc.close();
ReactDOM.render(this.props.head, doc.head);
let p5Script = doc.createElement('script'); let p5Script = doc.createElement('script');
p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js'); p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
doc.body.appendChild(p5Script); doc.body.appendChild(p5Script);
@ -39,7 +39,7 @@ class PreviewFrame extends React.Component {
} }
render() { render() {
return <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>; return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
} }
} }

8
shared/containers/App/App.jsx
View file

@ -9,11 +9,15 @@ import * as FileActions from '../../redux/actions'
class App extends React.Component { class App extends React.Component {
render() { render() {
return ( return (
<div class="app"> <div className="app">
<Editor <Editor
content={this.props.file.content} content={this.props.file.content}
updateFile={this.props.updateFile} /> updateFile={this.props.updateFile} />
<PreviewFrame content={this.props.file.content} /> <PreviewFrame
content={this.props.file.content}
head={
<link type='text/css' rel='stylesheet' href='preview-styles.css' />
}/>
</div> </div>
); );
} }

4
static/preview-styles.css Normal file
View file

@ -0,0 +1,4 @@
html, body {
margin: 0;
padding: 0;
}

3
static/styles/main.scss
View file

@ -1,3 +0,0 @@
@import 'vendors/codemirror';
@import 'components/p5-widget-codemirror-theme';

1
styles/abstracts/_variables.scss Normal file
View file

@ -0,0 +1 @@
$base-font-size: 16;

8
styles/base/_base.scss Normal file
View file

@ -0,0 +1,8 @@
html {
font-size: #{$base-font-size}px;
}
.root-app {
min-height: 100%;
height: 100%;
}

8
styles/base/_reset.scss Normal file
View file

@ -0,0 +1,8 @@
// At some point, I will put in a ~real~ reset, but for now
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}

17
styles/components/_editor.scss Normal file
View file

@ -0,0 +1,17 @@
.CodeMirror {
font-family: Inconsolata, monospace;
height: 100%;
}
.CodeMirror-linenumbers {
padding-right: #{10 / $base-font-size}rem;
}
.CodeMirror-linenumber {
width: #{35 / $base-font-size}rem;
}
.CodeMirror-lines {
padding-top: #{25 / $base-font-size}rem;
padding-left: #{5 / $base-font-size}rem;
}

0
static/styles/components/_p5-widget-codemirror-theme.scss → styles/components/_p5-widget-codemirror-theme.scss
View file

14
styles/layout/_ide.scss Normal file
View file

@ -0,0 +1,14 @@
.app {
display: flex;
flex-direction: row;
height: 100%;
}
.editor-holder {
width: 50%;
height: 100%;
}
.preview-frame {
width: 50%;
}

11
styles/main.scss Normal file
View file

@ -0,0 +1,11 @@
@import 'abstracts/variables';
@import 'base/reset';
@import 'base/base';
@import 'vendors/codemirror';
@import 'components/p5-widget-codemirror-theme';
@import 'components/editor';
@import 'layout/ide';

0
static/styles/vendors/_codemirror.scss → styles/vendors/_codemirror.scss vendored
View file