add placeholders for preferences

images/preferences.svg

@@ -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>

shared/components/Preferences/Preferences.jsx

@@ -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;

shared/components/Toolbar/Toolbar.jsx

@@ -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>
 		);
 	}

shared/containers/App/App.jsx

@@ -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'
@@ -15,7 +16,10 @@ class App extends React.Component {
 					className="toolbar"
 					isPlaying={this.props.ide.isPlaying}
 					startSketch={this.props.startSketch}
-					stopSketch={this.props.stopSketch}/>
+					stopSketch={this.props.stopSketch}
+					togglePreferences={this.props.togglePreferences}
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					/>
 				<Editor
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
@@ -25,6 +29,8 @@ class App extends React.Component {
 			      <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
 	}
 }
 

shared/redux/actions/index.js

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

shared/redux/constants/constants.js

@@ -3,3 +3,5 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
 
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
+
+export const TOGGLE_PREFERENCES = 'TOGGLE_PREFERENCES';

shared/redux/reducers/index.js

@@ -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

shared/redux/reducers/preferences.js

@@ -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;

styles/components/_preferences.scss

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

styles/components/_toolbar.scss

@@ -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;
 }

styles/main.scss

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