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 @@ + + + + stop + Created with Sketch. + + + + + + + + + + + + + + + \ 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';