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

start to add toolbar

This commit is contained in:
catarak 2016-05-11 13:19:37 -04:00
parent 5f00c4a5ef
commit 60364f6213
6 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
images/play.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>play</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-IDE-light" transform="translate(-218.000000, -69.000000)" fill="#ED225D">
<g id="IDE-CORE-+-Web-dock-&amp;-identity-zone">
<g id="IDE-CORE" transform="translate(0.000000, 45.000000)">
<g id="play-btns" transform="translate(202.000000, 0.000000)">
<g id="play-||-pause-+-play" transform="translate(0.000000, 10.000000)">
<polygon id="play" transform="translate(24.500000, 22.500000) rotate(90.000000) translate(-24.500000, -22.500000) " points="24.5 14 33 31 16 31"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
package.json
View File

@ -21,6 +21,7 @@
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.8.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"node-sass": "^3.7.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",

15
shared/components/Toolbar/Toolbar.jsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
var playUrl = require('../../../images/play.svg');
class Toolbar extends React.Component {
render() {
return (
<div className="toolbar">
<img src={playUrl}/>
</div>
);
}
}
export default Toolbar;

3
shared/containers/App/App.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import Editor from '../../components/Editor/Editor'
import PreviewFrame from '../../components/Preview/PreviewFrame'
import Preview from '../../components/Preview/Preview'
import Toolbar from '../../components/Toolbar/Toolbar'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as FileActions from '../../redux/actions'
@ -10,6 +11,8 @@ class App extends React.Component {
render() {
return (
<div className="app">
<Toolbar
className="toolbar" />
<Editor
content={this.props.file.content}
updateFile={this.props.updateFile} />

5
styles/layout/_ide.scss
View File

@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
height: 100%;
flex-wrap: wrap;
}
.editor-holder {
@ -11,4 +12,8 @@
.preview-frame {
width: 50%;
}
.toolbar {
width: 100%;
}

4
webpack.config.js
View File

@ -29,6 +29,10 @@ module.exports = {
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.svg$/,
loader: 'file'
}
],
},