diff --git a/images/exit.svg b/images/exit.svg new file mode 100644 index 0000000000..c4b6bc27ef --- /dev/null +++ b/images/exit.svg @@ -0,0 +1,12 @@ + + + + Exit + Created with Sketch. + + + + + + + diff --git a/images/minus.svg b/images/minus.svg new file mode 100644 index 0000000000..95f8494b19 --- /dev/null +++ b/images/minus.svg @@ -0,0 +1,12 @@ + + + + Decrease Value + Created with Sketch. + + + + + + + diff --git a/images/plus.svg b/images/plus.svg new file mode 100644 index 0000000000..449abd957d --- /dev/null +++ b/images/plus.svg @@ -0,0 +1,12 @@ + + + + Increase Value + Created with Sketch. + + + + + + + diff --git a/images/preferences.svg b/images/preferences.svg new file mode 100644 index 0000000000..86a7a61401 --- /dev/null +++ b/images/preferences.svg @@ -0,0 +1,19 @@ + + + + preferences + Created with Sketch. + + + + + + + + + + + + + + diff --git a/index.html b/index.html index dbc888ab70..de2e410695 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,11 @@ p5.js Web Editor +
- \ No newline at end of file + diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index a17c1d8d93..2d793b177c 100644 --- 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,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; \ No newline at end of file +export default Editor; diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx new file mode 100644 index 0000000000..7af63eb6f9 --- /dev/null +++ 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 ( +
+
+

Preferences

+ +
+
+

Font Size

+ +

{this.props.fontSize}

+ +
+
+ ); + } +} + +export default Preferences; diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx index e8afe9cb55..bd9c2fe311 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 7183921ed2..7305d58436 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,16 +12,26 @@ class App extends React.Component { render() { return (
- - + + + - } @@ -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); \ 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 a12f43bb7f..90214ba911 100644 --- a/shared/redux/actions/index.js +++ b/shared/redux/actions/index.js @@ -24,4 +24,28 @@ export function stopSketch() { return { type: ActionTypes.STOP_SKETCH } -} \ No newline at end of file +} + +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 index da4adc2247..ad141573f9 100644 --- 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'; \ No newline at end of file +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 index b71c1c6468..0de1a61309 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 0000000000..40e042594b --- /dev/null +++ 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 index bf21414fbd..348d1ac55e 100644 --- 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 index dd970a6478..25a0d322bf 100644 --- 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 index e6d3fa0a6a..65b8b2e864 100644 --- a/styles/components/_editor.scss +++ b/styles/components/_editor.scss @@ -17,5 +17,5 @@ } .CodeMirror-line { - padding-left: #{5 / $base-font-size}rem; -} \ No newline at end of file + padding-left: #{5 / $base-font-size}rem; +} diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss new file mode 100644 index 0000000000..c660148fac --- /dev/null +++ b/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; +} diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss index 043667dce7..ae5af350fd 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/layout/_ide.scss b/styles/layout/_ide.scss index 3073f85b53..2be7c528f6 100644 --- a/styles/layout/_ide.scss +++ b/styles/layout/_ide.scss @@ -16,4 +16,11 @@ .toolbar { width: 100%; -} \ No newline at end of file +} + +.preferences { + width: 22.5%; + position: absolute; + top: #{20 / $base-font-size}rem; + right:#{60 / $base-font-size}rem; +} diff --git a/styles/main.scss b/styles/main.scss index 3e14f59d70..aa5114451c 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';