From de165bbe1931015c97cae87382aaac531ccf72ae Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Fri, 17 Jun 2016 14:31:33 -0400
Subject: [PATCH]  add placeholders inside preferences

---
 shared/components/Preferences/Preferences.jsx |  8 ++++---
 shared/components/Toolbar/Toolbar.jsx         |  2 +-
 shared/containers/App/App.jsx                 |  5 +++--
 shared/redux/actions/index.js                 | 10 +++++++--
 shared/redux/constants/constants.js           |  3 ++-
 shared/redux/reducers/preferences.js          |  8 +++++--
 styles/abstracts/_variables.scss              |  1 +
 styles/components/_preferences.scss           | 21 ++++++++++++++-----
 styles/layout/_ide.scss                       | 10 ++++++++-
 9 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
index 71bca424..cb87b969 100644
--- a/shared/components/Preferences/Preferences.jsx
+++ b/shared/components/Preferences/Preferences.jsx
@@ -6,13 +6,15 @@ var classNames = require('classnames');
 
 class Preferences extends React.Component {
 	render() {
-		let preferencesButtonClass = classNames({
+		let preferencesContainerClass = classNames({
 			"preferences": true,
 			"preferences--selected": this.props.isPreferencesShowing
 		});
 		return (
-			<div className={preferencesButtonClass}>
-				GIANT POTATO
+			<div className={preferencesContainerClass}>
+				<button className="preferences__exit-button" onClick={this.props.closePreferences}>
+					X
+				</button>
 			</div>
 		);
 	}
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index 97c9728e..bd9c2fe3 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -31,7 +31,7 @@ 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}>
+				<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
index 84b087f8..7ba79f4c 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -17,7 +17,7 @@ class App extends React.Component {
 					isPlaying={this.props.ide.isPlaying}
 					startSketch={this.props.startSketch}
 					stopSketch={this.props.stopSketch}
-					togglePreferences={this.props.togglePreferences}
+					openPreferences={this.props.openPreferences}
 					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
 					/>
 				<Editor
@@ -30,7 +30,8 @@ class App extends React.Component {
 			    }
 			    isPlaying={this.props.ide.isPlaying}/>
 				<Preferences
-					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}/>
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					closePreferences={this.props.closePreferences}/>
 			</div>
 		);
 	}
diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js
index eada5da7..c70e2282 100644
--- a/shared/redux/actions/index.js
+++ b/shared/redux/actions/index.js
@@ -26,8 +26,14 @@ export function stopSketch() {
 	}
 }
 
-export function togglePreferences() {
+export function openPreferences() {
 	return {
-		type: ActionTypes.TOGGLE_PREFERENCES
+		type: ActionTypes.OPEN_PREFERENCES
+	}
+}
+
+export function closePreferences() {
+	return {
+		type: ActionTypes.CLOSE_PREFERENCES
 	}
 }
diff --git a/shared/redux/constants/constants.js b/shared/redux/constants/constants.js
index ceed4d62..772569e1 100644
--- a/shared/redux/constants/constants.js
+++ b/shared/redux/constants/constants.js
@@ -4,4 +4,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';
+export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
+export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
diff --git a/shared/redux/reducers/preferences.js b/shared/redux/reducers/preferences.js
index 8c647b3a..08f1fd75 100644
--- a/shared/redux/reducers/preferences.js
+++ b/shared/redux/reducers/preferences.js
@@ -6,9 +6,13 @@ const initialState = {
 
 const preferences = (state = initialState, action) => {
 	switch (action.type) {
-		case ActionTypes.TOGGLE_PREFERENCES:
+		case ActionTypes.OPEN_PREFERENCES:
 			return {
-				isPreferencesShowing: !state.isPreferencesShowing
+				isPreferencesShowing: true
+			}
+		case ActionTypes.CLOSE_PREFERENCES:
+			return {
+				isPreferencesShowing: false
 			}
 		default:
 			return state
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index dd970a64..e4edec20 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -35,3 +35,4 @@ $dark-button-active-color: $white;
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 
+$preferences-background-color: #f4f4f4;
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
index 8e5a7539..4f54a8ec 100644
--- a/styles/components/_preferences.scss
+++ b/styles/components/_preferences.scss
@@ -1,10 +1,21 @@
 .preferences {
-	position: absolute;
-	right: 0;
-	top:0;
+	background-color: $preferences-background-color;
 	display: none;
+	&--selected {
+		display: flex;
+	}
 }
 
-.preferences--selected {
-	display: block;
+.preferences__exit-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;
+	text-align: center;
+	line-height: #{50 / $base-font-size}rem;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	margin-left: auto;
 }
diff --git a/styles/layout/_ide.scss b/styles/layout/_ide.scss
index 3073f85b..a0f93033 100644
--- a/styles/layout/_ide.scss
+++ b/styles/layout/_ide.scss
@@ -16,4 +16,12 @@
 
 .toolbar {
 	width: 100%;
-}
\ No newline at end of file
+}
+
+.preferences {
+	width: 30%;
+	height: 50%;
+	position: absolute;
+	top: #{20 / $base-font-size}rem;
+	right:#{60 / $base-font-size}rem;
+}