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

add placeholders for preferences

Browse source
This commit is contained in:
mathuramg 2016-06-17 13:37:29 -04:00
parent 45399461e5
commit 035e019260
11 changed files with 118 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
images/preferences.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" 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>stop</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(-280.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="stop-+-stop" transform="translate(64.000000, 10.000000)">
<rect id="stop" x="14" y="14" width="16" height="16"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

21
shared/components/Preferences/Preferences.jsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react';
var Isvg = require('react-inlinesvg');
var preferences = require('../../../images/preferences.svg');
var classNames = require('classnames');
class Preferences extends React.Component {
render() {
let preferencesButtonClass = classNames({
"preferences": true,
"preferences--selected": this.props.isPreferencesShowing
});
return (
<div className={preferencesButtonClass}>
GIANT POTATO
</div>
);
}
}
export default Preferences;

8
shared/components/Toolbar/Toolbar.jsx
View file

@ -4,6 +4,7 @@ var Isvg = require('react-inlinesvg');
var playUrl = require('../../../images/play.svg');
var logoUrl = require('../../../images/p5js-logo.svg');
var stopUrl = require('../../../images/stop.svg');
var preferencesUrl = require('../../../images/preferences.svg');
var classNames = require('classnames');
class Toolbar extends React.Component {
@ -16,6 +17,10 @@ class Toolbar extends React.Component {
"toolbar__stop-button": true,
"toolbar__stop-button--selected": !this.props.isPlaying
});
let preferencesButtonClass = classNames({
"toolbar__preferences-button": true,
"toolbar__preferences-button--selected": this.props.isPreferencesShowing
});
return (
<div className="toolbar">
@ -26,6 +31,9 @@ class Toolbar extends React.Component {
<button className={stopButtonClass} onClick={this.props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" />
</button>
<button className={preferencesButtonClass} onClick={this.props.togglePreferences}>
<Isvg src={preferencesUrl} alt="Show Preferences" />
</button>
</div>
);
}

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

@ -3,6 +3,7 @@ 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 Preferences from '../../components/Preferences/Preferences'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as FileActions from '../../redux/actions'
@ -11,20 +12,25 @@ class App extends React.Component {
render() {
return (
<div className="app">
<Toolbar
<Toolbar
className="toolbar"
isPlaying={this.props.ide.isPlaying}
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch}/>
<Editor
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch}
togglePreferences={this.props.togglePreferences}
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
/>
<Editor
content={this.props.file.content}
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' />
}
isPlaying={this.props.ide.isPlaying}/>
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}/>
</div>
);
}
@ -33,7 +39,8 @@ class App extends React.Component {
function mapStateToProps(state) {
return {
file: state.file,
ide: state.ide
ide: state.ide,
preferences: state.preferences
}
}
@ -41,4 +48,4 @@ function mapDispatchToProps(dispatch) {
return bindActionCreators(FileActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);

9
shared/redux/actions/index.js
View file

@ -24,4 +24,11 @@ export function stopSketch() {
return {
type: ActionTypes.STOP_SKETCH
}
}
}
export function togglePreferences() {
console.log('pressed');
return {
type: ActionTypes.TOGGLE_PREFERENCES
}
}

4
shared/redux/constants/constants.js
View file

@ -2,4 +2,6 @@ export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH';
export const STOP_SKETCH = 'STOP_SKETCH';
export const STOP_SKETCH = 'STOP_SKETCH';
export const TOGGLE_PREFERENCES = 'TOGGLE_PREFERENCES';

6
shared/redux/reducers/index.js
View file

@ -1,10 +1,12 @@
import { combineReducers } from 'redux'
import file from './files'
import ide from './ide'
import preferences from './preferences'
const rootReducer = combineReducers({
file,
ide
ide,
preferences
})
export default rootReducer
export default rootReducer

19
shared/redux/reducers/preferences.js Normal file
View file

@ -0,0 +1,19 @@
import * as ActionTypes from '../constants/constants';
const initialState = {
isPreferencesShowing: false
}
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.TOGGLE_PREFERENCES:
console.log('in here');
return {
isPreferencesShowing: !state.isPreferencesShowing
}
default:
return state
}
}
export default preferences;

10
styles/components/_preferences.scss Normal file
View file

@ -0,0 +1,10 @@
.preferences {
position: absolute;
right: 0;
top:0;
display: none;
}
.preferences--selected {
display: block;
}

8
styles/components/_toolbar.scss
View file

@ -13,6 +13,14 @@
}
}
.toolbar__preferences-button {
@extend %toolbar-button;
margin-left: auto;
&--selected {
@extend %toolbar-button--selected;
}
}
.toolbar__logo {
margin-right: #{30 / $base-font-size}rem;
}

3
styles/main.scss
View file

@ -9,5 +9,6 @@
@import 'components/p5-widget-codemirror-theme';
@import 'components/editor';
@import 'components/toolbar';
@import 'components/preferences';
@import 'layout/ide';
@import 'layout/ide';