Merge pull request #8 from MathuraMG/add-pref

Add preference in toolbar

images/exit.svg

@@ -0,0 +1,12 @@
+<?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.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>Exit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" fill="#D8D8D8">
+            <path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
+        </g>
+    </g>
+</svg>

images/minus.svg

@@ -0,0 +1,12 @@
+<?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.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>Decrease Value</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Decrease value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">
+            <rect id="Decrease value" x="0" y="12" width="16" height="4"></rect>
+        </g>
+    </g>
+</svg>

images/plus.svg

@@ -0,0 +1,12 @@
+<?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.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>Increase Value</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Increase Value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="16" fill="#D8D8D8">
+            <path d="M10,6 L10,0 L6,0 L6,6 L0,6 L0,10 L6,10 L6,16 L10,16 L10,10 L16,10 L16,6 L10,6 Z" id="Increase Value"></path>
+        </g>
+    </g>
+</svg>

images/preferences.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>preferences</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
+    </defs>
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop-IDE-light" fill="#ED225D">
+            <g id="preferences">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Combined-Shape" fill="#white" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>

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>

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,6 +17,7 @@ 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) {
@@ -24,6 +25,9 @@ class Editor extends React.Component {
         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;

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;

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

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} 
+					startSketch={this.props.startSketch}
-					stopSketch={this.props.stopSketch}/>
+					stopSketch={this.props.stopSketch}
-				<Editor 
+					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,7 +44,8 @@ class App extends React.Component {
 function mapStateToProps(state) {
 	return {
 		file: state.file,
-		ide: state.ide
+		ide: state.ide,
+		preferences: state.preferences
 	}
 }
 
@@ -41,4 +53,4 @@ function mapDispatchToProps(dispatch) {
 	return bindActionCreators(FileActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

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
+	}
+}

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

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

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;

styles/abstracts/_placeholders.scss

@@ -1,6 +1,4 @@
-%toolbar-button {
+%button {
-	background-color: $light-button-background-color;
-	color: $light-button-color;
 	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;
+		}
+	}
+}

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;

styles/components/_editor.scss

@@ -17,5 +17,5 @@
 }
 
 .CodeMirror-line {
-	padding-left: #{5 / $base-font-size}rem;	
+	padding-left: #{5 / $base-font-size}rem;
-}
+}

styles/components/_preferences.scss

@@ -0,0 +1,62 @@
+.preferences {
+	background-color: $light-preferences-background-color;
+	display: none;
+	font-family: 'Montserrat', sans-serif;
+	padding-bottom: #{20 / $base-font-size}rem;
+	&--selected {
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+.preferences__exit-button {
+	@extend %preferences-button;
+	margin-left: auto;
+	background-color: $light-preferences-background-color;
+
+	&:hover {
+		background-color: $light-preferences-background-color;
+	}
+}
+
+.preference__plus-button {
+	@extend %preferences-button;
+	margin-right: auto;
+}
+
+.preference__minus-button {
+	@extend %preferences-button;
+}
+
+.preferences__heading {
+	display: flex;
+	flex-direction: rows;
+	margin-left: #{20 / $base-font-size}rem;
+}
+.preferences__title {
+	margin: 0 0;
+	font-size: #{$menu-font-size}px;
+	font-weight: 700;
+	height: #{44 / $base-font-size}rem;
+	line-height: #{44 / $base-font-size}rem;
+}
+
+.preference {
+	margin: 0 #{20 / $base-font-size}rem;
+}
+
+.preference__title {
+	margin: 0 0;
+	font-size: #{$base-font-size}px;
+	font-weight: 400;
+	height: #{44 / $base-font-size}rem;
+	line-height: #{44 / $base-font-size}rem;
+}
+
+.preference__value {
+	@extend %button;
+	border-radius: 0%;
+	border: 2px solid $light-preferences-button-color;
+	line-height: #{44 / $base-font-size}rem;
+	margin: 0 #{20 / $base-font-size}rem;
+}

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/layout/_ide.scss

@@ -16,4 +16,11 @@
 
 .toolbar {
 	width: 100%;
-}
+}
+
+.preferences {
+	width: 22.5%;
+	position: absolute;
+	top: #{20 / $base-font-size}rem;
+	right:#{60 / $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';
+@import 'layout/ide';