processing · catarak · Jun 20, 2016 · Jun 17, 2016 · Jun 17, 2016 · Jun 17, 2016
diff --git a/images/exit.svg b/images/exit.svg
diff --git a/images/minus.svg b/images/minus.svg
diff --git a/images/plus.svg b/images/plus.svg
diff --git a/images/preferences.svg b/images/preferences.svg
diff --git a/index.html b/index.html
@@ -3,10 +3,11 @@
   <head>
     <title>p5.js Web Editor</title>
     <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <div id="root" class="root-app">
     </div>
     <script src="/dist/bundle.js"></script>
   </body>
-</html>
+</html>
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx
@@ -4,7 +4,7 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/selection/active-line'
 
 class Editor extends React.Component {
-	_cm: CodeMirror.Editor
+  _cm: CodeMirror.Editor
 
 	componentDidMount() {
 		this._cm = CodeMirror(this.refs.container, {
@@ -17,13 +17,17 @@ class Editor extends React.Component {
     this._cm.on('change', () => {
       this.props.updateFile("sketch.js", this._cm.getValue());
     });
+		this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
 	}
 
 	componentDidUpdate(prevProps) {
 		if (this.props.content !== prevProps.content &&
         this.props.content !== this._cm.getValue()) {
       this._cm.setValue(this.props.content);
     }
+		if (this.props.fontSize !== prevProps.fontSize) {
+			this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
+		}
 	}
 
 	componentWillUnmount() {
@@ -35,4 +39,4 @@ class Editor extends React.Component {
 	}
 }
 
-export default Editor;
+export default Editor;
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+var Isvg = require('react-inlinesvg');
+var exitUrl = require('../../../images/exit.svg');
+var plusUrl = require('../../../images/plus.svg');
+var minusUrl = require('../../../images/minus.svg');
+var classNames = require('classnames');
+
+class Preferences extends React.Component {
+	render() {
+		let preferencesContainerClass = classNames({
+			"preferences": true,
+			"preferences--selected": this.props.isPreferencesShowing
+		});
+		return (
+			<div className={preferencesContainerClass} tabindex="0">
+				<div className="preferences__heading">
+					<h2 className="preferences__title">Preferences</h2>
+					<button className="preferences__exit-button" onClick={this.props.closePreferences}>
+						<Isvg src={exitUrl} alt="Exit Preferences" />
+					</button>
+				</div>
+				<div className="preference">
+					<h3 className="preference__title">Font Size</h3>
+						<button className="preference__plus-button" onClick={this.props.decreaseFont}>
+							<Isvg src={minusUrl} alt="Decrease Font Size" />
+						</button>
+						<p className="preference__value">{this.props.fontSize}</p>
+						<button className="preference__minus-button" onClick={this.props.increaseFont}>
+							<Isvg src={plusUrl} alt="Increase Font Size" />
+						</button>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Preferences;
diff --git a/shared/components/Toolbar/Toolbar.jsx b/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.openPreferences}>
+					<Isvg src={preferencesUrl} alt="Show Preferences" />
+				</button>
 			</div>
 		);
 	}

diff --git a/shared/containers/App/App.jsx b/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'
@@ -11,16 +12,26 @@ 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}
+					openPreferences={this.props.openPreferences}
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					/>
+				<Preferences
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					closePreferences={this.props.closePreferences}
+					increaseFont={this.props.increaseFont}
+					decreaseFont={this.props.decreaseFont}
+					fontSize={this.props.preferences.fontSize}/>
+				<Editor
+					content={this.props.file.content}
+					updateFile={this.props.updateFile}
+					fontSize={this.props.preferences.fontSize} />
+				<PreviewFrame
 					content={this.props.file.content}
-					updateFile={this.props.updateFile} />
-				<PreviewFrame 
-					content={this.props.file.content} 
 					head={
 			      <link type='text/css' rel='stylesheet' href='preview-styles.css' />
 			    }
@@ -33,12 +44,13 @@ class App extends React.Component {
 function mapStateToProps(state) {
 	return {
 		file: state.file,
-		ide: state.ide
+		ide: state.ide,
+		preferences: state.preferences
 	}
 }
 
 function mapDispatchToProps(dispatch) {
 	return bindActionCreators(FileActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js
@@ -24,4 +24,28 @@ export function stopSketch() {
 	return {
 		type: ActionTypes.STOP_SKETCH
 	}
-}
+}
+
+export function openPreferences() {
+	return {
+		type: ActionTypes.OPEN_PREFERENCES
+	}
+}
+
+export function closePreferences() {
+	return {
+		type: ActionTypes.CLOSE_PREFERENCES
+	}
+}
+
+export function increaseFont() {
+	return {
+		type: ActionTypes.INCREASE_FONTSIZE
+	}
+}
+
+export function decreaseFont() {
+	return {
+		type: ActionTypes.DECREASE_FONTSIZE
+	}
+}
diff --git a/shared/redux/constants/constants.js b/shared/redux/constants/constants.js
@@ -2,4 +2,9 @@ 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 OPEN_PREFERENCES = 'OPEN_PREFERENCES';
+export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
+export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
+export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
diff --git a/shared/redux/reducers/index.js b/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
+export default rootReducer
diff --git a/shared/redux/reducers/preferences.js b/shared/redux/reducers/preferences.js
@@ -0,0 +1,35 @@
+import * as ActionTypes from '../constants/constants';
+
+const initialState = {
+	isPreferencesShowing: false,
+	fontSize: 18
+}
+
+const preferences = (state = initialState, action) => {
+	switch (action.type) {
+		case ActionTypes.OPEN_PREFERENCES:
+			return {
+				isPreferencesShowing: true,
+				fontSize: state.fontSize
+			}
+		case ActionTypes.CLOSE_PREFERENCES:
+			return {
+				isPreferencesShowing: false,
+				fontSize: state.fontSize
+			}
+		case ActionTypes.INCREASE_FONTSIZE:
+			return {
+				isPreferencesShowing: state.isPreferencesShowing,
+				fontSize: state.fontSize+2
+			}
+		case ActionTypes.DECREASE_FONTSIZE:
+			return {
+				isPreferencesShowing: state.isPreferencesShowing,
+				fontSize: state.fontSize-2
+			}
+		default:
+			return state
+	}
+}
+
+export default preferences;
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
@@ -1,6 +1,4 @@
-%toolbar-button {
-	background-color: $light-button-background-color;
-	color: $light-button-color;
+%button {
 	display: inline-block;
 	height: #{44 / $base-font-size}rem;
 	width: #{44 / $base-font-size}rem;
@@ -10,11 +8,15 @@
 	cursor: pointer;
 	border: none;
 	outline: none;
+}
 
+%toolbar-button {
+	@extend %button;
+	background-color: $light-button-background-color;
+	color: $light-button-color;
 	& g {
 		fill: $light-toolbar-button-color;
 	}
-
 	&:hover {
 		background-color: $light-button-background-hover-color;
 		color: $light-button-hover-color;
@@ -30,3 +32,19 @@
     }
   }
 }
+
+%preferences-button {
+	@extend %button;
+	background-color: $light-preferences-button-background-color;
+	color: $light-preferences-button-color;
+	& g {
+		fill: $light-preferences-button-color;
+	}
+	&:hover {
+		background-color: $light-preferences-button-background-color;
+		color: $light-preferences-button-hover-color;
+		& g {
+			fill: $light-preferences-button-hover-color;
+		}
+	}
+}
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
@@ -1,4 +1,5 @@
 $base-font-size: 16;
+$menu-font-size: 21;
 
 //colors
 $p5js-pink: #ed225d;
@@ -35,3 +36,9 @@ $dark-button-active-color: $white;
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 
+$light-preferences-background-color: #f4f4f4;
+
+$light-preferences-button-color: #8e8e8f;
+$light-preferences-button-hover-color: #333333;
+
+$light-preferences-button-background-color: #e6e6e6;
diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss
@@ -17,5 +17,5 @@
 }
 
 .CodeMirror-line {
-	padding-left: #{5 / $base-font-size}rem;	
-}
+	padding-left: #{5 / $base-font-size}rem;
+}