diff --git a/images/preferences.svg b/images/preferences.svg
new file mode 100644
index 00000000..4ca0b398
--- /dev/null
+++ b/images/preferences.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
new file mode 100644
index 00000000..71bca424
--- /dev/null
+++ b/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 (
+
+ GIANT POTATO
+
+ );
+ }
+}
+
+export default Preferences;
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index e8afe9cb..97c9728e 100644
--- 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 (
@@ -26,6 +31,9 @@ class Toolbar extends React.Component {
+
);
}
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index 7183921e..84b087f8 100644
--- 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,20 +12,25 @@ class App extends React.Component {
render() {
return (
-
-
+
-
}
isPlaying={this.props.ide.isPlaying}/>
+
);
}
@@ -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);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js
index a12f43bb..71cc040f 100644
--- a/shared/redux/actions/index.js
+++ b/shared/redux/actions/index.js
@@ -24,4 +24,11 @@ export function stopSketch() {
return {
type: ActionTypes.STOP_SKETCH
}
-}
\ No newline at end of file
+}
+
+export function togglePreferences() {
+ console.log('pressed');
+ return {
+ type: ActionTypes.TOGGLE_PREFERENCES
+ }
+}
diff --git a/shared/redux/constants/constants.js b/shared/redux/constants/constants.js
index da4adc22..ceed4d62 100644
--- a/shared/redux/constants/constants.js
+++ b/shared/redux/constants/constants.js
@@ -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';
\ No newline at end of file
+export const STOP_SKETCH = 'STOP_SKETCH';
+
+export const TOGGLE_PREFERENCES = 'TOGGLE_PREFERENCES';
diff --git a/shared/redux/reducers/index.js b/shared/redux/reducers/index.js
index b71c1c64..0de1a613 100644
--- 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
\ No newline at end of file
+export default rootReducer
diff --git a/shared/redux/reducers/preferences.js b/shared/redux/reducers/preferences.js
new file mode 100644
index 00000000..ea84eb21
--- /dev/null
+++ b/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;
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
new file mode 100644
index 00000000..8e5a7539
--- /dev/null
+++ b/styles/components/_preferences.scss
@@ -0,0 +1,10 @@
+.preferences {
+ position: absolute;
+ right: 0;
+ top:0;
+ display: none;
+}
+
+.preferences--selected {
+ display: block;
+}
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index 043667dc..ae5af350 100644
--- a/styles/components/_toolbar.scss
+++ b/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;
}
diff --git a/styles/main.scss b/styles/main.scss
index 3e14f59d..aa511445 100644
--- a/styles/main.scss
+++ b/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';
\ No newline at end of file
+@import 'layout/ide';