From 035e01926056c9f608544108587b5e7e9cdbd9ff Mon Sep 17 00:00:00 2001 From: mathuramg Date: Fri, 17 Jun 2016 13:37:29 -0400 Subject: [PATCH 1/8] add placeholders for preferences --- images/preferences.svg | 20 ++++++++++++++++ shared/components/Preferences/Preferences.jsx | 21 +++++++++++++++++ shared/components/Toolbar/Toolbar.jsx | 8 +++++++ shared/containers/App/App.jsx | 23 ++++++++++++------- shared/redux/actions/index.js | 9 +++++++- shared/redux/constants/constants.js | 4 +++- shared/redux/reducers/index.js | 6 +++-- shared/redux/reducers/preferences.js | 19 +++++++++++++++ styles/components/_preferences.scss | 10 ++++++++ styles/components/_toolbar.scss | 8 +++++++ styles/main.scss | 3 ++- 11 files changed, 118 insertions(+), 13 deletions(-) create mode 100644 images/preferences.svg create mode 100644 shared/components/Preferences/Preferences.jsx create mode 100644 shared/redux/reducers/preferences.js create mode 100644 styles/components/_preferences.scss 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'; From 92e5e4e599262f7a4639f74dc550f04686dcffa5 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Fri, 17 Jun 2016 13:52:22 -0400 Subject: [PATCH 2/8] remove console messages --- shared/redux/actions/index.js | 1 - shared/redux/reducers/preferences.js | 1 - 2 files changed, 2 deletions(-) diff --git a/shared/redux/actions/index.js b/shared/redux/actions/index.js index 71cc040f..eada5da7 100644 --- a/shared/redux/actions/index.js +++ b/shared/redux/actions/index.js @@ -27,7 +27,6 @@ export function stopSketch() { } export function togglePreferences() { - console.log('pressed'); return { type: ActionTypes.TOGGLE_PREFERENCES } diff --git a/shared/redux/reducers/preferences.js b/shared/redux/reducers/preferences.js index ea84eb21..8c647b3a 100644 --- a/shared/redux/reducers/preferences.js +++ b/shared/redux/reducers/preferences.js @@ -7,7 +7,6 @@ const initialState = { const preferences = (state = initialState, action) => { switch (action.type) { case ActionTypes.TOGGLE_PREFERENCES: - console.log('in here'); return { isPreferencesShowing: !state.isPreferencesShowing } From de165bbe1931015c97cae87382aaac531ccf72ae Mon Sep 17 00:00:00 2001 From: mathuramg Date: Fri, 17 Jun 2016 14:31:33 -0400 Subject: [PATCH 3/8] 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 ( -
- GIANT POTATO +
+
); } 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 { -
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} /> + isPreferencesShowing = {this.props.preferences.isPreferencesShowing} + closePreferences={this.props.closePreferences}/> ); } 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; +} From 0850705e3488bf39fab6eb243cfe997ab98f38d6 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 12:04:58 -0400 Subject: [PATCH 4/8] refactor placeholder to include pref button --- images/exit.svg | 12 +++++++++ images/preferences.svg | 27 +++++++++---------- shared/components/Preferences/Preferences.jsx | 6 ++--- shared/containers/App/App.jsx | 6 ++--- styles/abstracts/_placeholders.scss | 25 ++++++++++++++--- styles/abstracts/_variables.scss | 7 ++++- styles/components/_preferences.scss | 18 +++++-------- 7 files changed, 65 insertions(+), 36 deletions(-) create mode 100644 images/exit.svg diff --git a/images/exit.svg b/images/exit.svg new file mode 100644 index 00000000..e8bd60c0 --- /dev/null +++ b/images/exit.svg @@ -0,0 +1,12 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + diff --git a/images/preferences.svg b/images/preferences.svg index 4ca0b398..86a7a614 100644 --- a/images/preferences.svg +++ b/images/preferences.svg @@ -1,20 +1,19 @@ - - - stop + + + preferences Created with Sketch. - + + + - - - - - - - - - + + + + + + - \ No newline at end of file + diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx index cb87b969..06610dc5 100644 --- a/shared/components/Preferences/Preferences.jsx +++ b/shared/components/Preferences/Preferences.jsx @@ -1,7 +1,7 @@ import React from 'react'; var Isvg = require('react-inlinesvg'); -var preferences = require('../../../images/preferences.svg'); +var exitUrl = require('../../../images/exit.svg'); var classNames = require('classnames'); class Preferences extends React.Component { @@ -11,9 +11,9 @@ class Preferences extends React.Component { "preferences--selected": this.props.isPreferencesShowing }); return ( -
+
); diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx index 7ba79f4c..cca0dba6 100644 --- a/shared/containers/App/App.jsx +++ b/shared/containers/App/App.jsx @@ -20,6 +20,9 @@ class App extends React.Component { openPreferences={this.props.openPreferences} isPreferencesShowing = {this.props.preferences.isPreferencesShowing} /> + @@ -29,9 +32,6 @@ class App extends React.Component { } isPlaying={this.props.ide.isPlaying}/> -
); } diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss index bf21414f..710e178a 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,18 @@ } } } + +%preferences-button { + @extend %button; + background-color: $light-preferences-button-background-color; + & g { + fill: $light-preferences-button-color; + } + &:hover { + background-color: $light-preferences-button-background-color; + + & g { + fill: $light-preferences-button-hover-color; + } + } +} diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss index e4edec20..9d76f428 100644 --- a/styles/abstracts/_variables.scss +++ b/styles/abstracts/_variables.scss @@ -35,4 +35,9 @@ $dark-button-active-color: $white; $editor-border-color: #f4f4f4; $editor-selected-line-color: #f3f3f3; -$preferences-background-color: #f4f4f4; +$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/_preferences.scss b/styles/components/_preferences.scss index 4f54a8ec..420300f3 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -1,5 +1,5 @@ .preferences { - background-color: $preferences-background-color; + background-color: $light-preferences-background-color; display: none; &--selected { display: flex; @@ -7,15 +7,11 @@ } .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; + @extend %preferences-button; margin-left: auto; + background-color: $light-preferences-background-color; + + &:hover { + background-color: $light-preferences-background-color; + } } From afc2ef91d5ea1964fddd16d37b6b764b7b94d3c4 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 12:45:15 -0400 Subject: [PATCH 5/8] add preferences title --- index.html | 3 ++- shared/components/Preferences/Preferences.jsx | 1 + styles/abstracts/_placeholders.scss | 3 ++- styles/abstracts/_variables.scss | 1 + styles/components/_preferences.scss | 9 +++++++++ 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index dbc888ab..ba9b15ed 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/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx index 06610dc5..62c39fc4 100644 --- a/shared/components/Preferences/Preferences.jsx +++ b/shared/components/Preferences/Preferences.jsx @@ -12,6 +12,7 @@ class Preferences extends React.Component { }); return (
+
Preferences
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss index 710e178a..348d1ac5 100644 --- a/styles/abstracts/_placeholders.scss +++ b/styles/abstracts/_placeholders.scss @@ -36,12 +36,13 @@ %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 9d76f428..25a0d322 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; diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss index 420300f3..77512cf1 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -1,6 +1,7 @@ .preferences { background-color: $light-preferences-background-color; display: none; + font-family: 'Montserrat', sans-serif; &--selected { display: flex; } @@ -15,3 +16,11 @@ background-color: $light-preferences-background-color; } } + +.preferences__title-text { + margin-left: #{20 / $base-font-size}rem; + font-size: $menu-font-size; + font-color: white; + height: #{44 / $base-font-size}rem; + line-height: #{44 / $base-font-size}rem; +} From b956d01bde7ce4cc1d505134e1e0155b2975028e Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 13:00:25 -0400 Subject: [PATCH 6/8] change svg --- images/exit.svg | 8 ++++---- index.html | 2 +- shared/components/Editor/Editor.jsx | 3 ++- styles/components/_preferences.scss | 1 + 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/images/exit.svg b/images/exit.svg index e8bd60c0..4c67ba03 100644 --- a/images/exit.svg +++ b/images/exit.svg @@ -4,9 +4,9 @@ Combined Shape Created with Sketch. - - - + + + - + \ No newline at end of file diff --git a/index.html b/index.html index ba9b15ed..de2e4106 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ p5.js Web Editor - +
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index a17c1d8d..10b3cb91 100644 --- a/shared/components/Editor/Editor.jsx +++ b/shared/components/Editor/Editor.jsx @@ -17,6 +17,7 @@ class Editor extends React.Component { this._cm.on('change', () => { this.props.updateFile("sketch.js", this._cm.getValue()); }); + console.log('test here'); } componentDidUpdate(prevProps) { @@ -35,4 +36,4 @@ class Editor extends React.Component { } } -export default Editor; \ No newline at end of file +export default Editor; diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss index 77512cf1..0ef68369 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -20,6 +20,7 @@ .preferences__title-text { margin-left: #{20 / $base-font-size}rem; font-size: $menu-font-size; + font-weight: 700; font-color: white; height: #{44 / $base-font-size}rem; line-height: #{44 / $base-font-size}rem; From 147f1999e45c9bbddc5a31b981e00494922c1ce1 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 14:58:15 -0400 Subject: [PATCH 7/8] add font-size in preferences --- images/minus.svg | 12 ++++++ images/plus.svg | 12 ++++++ shared/components/Editor/Editor.jsx | 5 ++- shared/components/Preferences/Preferences.jsx | 22 ++++++++-- shared/containers/App/App.jsx | 8 +++- shared/redux/actions/index.js | 12 ++++++ shared/redux/constants/constants.js | 2 + shared/redux/reducers/preferences.js | 19 +++++++-- styles/components/_editor.scss | 4 +- styles/components/_preferences.scss | 41 +++++++++++++++++-- styles/layout/_ide.scss | 3 +- 11 files changed, 123 insertions(+), 17 deletions(-) create mode 100644 images/minus.svg create mode 100644 images/plus.svg diff --git a/images/minus.svg b/images/minus.svg new file mode 100644 index 00000000..8cdc54cc --- /dev/null +++ b/images/minus.svg @@ -0,0 +1,12 @@ + + + + Rectangle 2 + Created with Sketch. + + + + + + + diff --git a/images/plus.svg b/images/plus.svg new file mode 100644 index 00000000..93b3c44b --- /dev/null +++ b/images/plus.svg @@ -0,0 +1,12 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index 10b3cb91..87195feb 100644 --- a/shared/components/Editor/Editor.jsx +++ b/shared/components/Editor/Editor.jsx @@ -17,7 +17,7 @@ class Editor extends React.Component { this._cm.on('change', () => { this.props.updateFile("sketch.js", this._cm.getValue()); }); - console.log('test here'); + this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px'; } componentDidUpdate(prevProps) { @@ -25,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() { diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx index 62c39fc4..89b849bd 100644 --- a/shared/components/Preferences/Preferences.jsx +++ b/shared/components/Preferences/Preferences.jsx @@ -2,6 +2,8 @@ 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 { @@ -12,10 +14,22 @@ class Preferences extends React.Component { }); return (
-
Preferences
- +
+

Preferences

+ +
+
+

Font Size

+ +

{this.props.fontSize}

+ +
); } diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx index cca0dba6..7305d584 100644 --- a/shared/containers/App/App.jsx +++ b/shared/containers/App/App.jsx @@ -22,10 +22,14 @@ class App extends React.Component { /> + closePreferences={this.props.closePreferences} + increaseFont={this.props.increaseFont} + decreaseFont={this.props.decreaseFont} + fontSize={this.props.preferences.fontSize}/> + updateFile={this.props.updateFile} + fontSize={this.props.preferences.fontSize} /> { switch (action.type) { case ActionTypes.OPEN_PREFERENCES: return { - isPreferencesShowing: true + isPreferencesShowing: true, + fontSize: state.fontSize } case ActionTypes.CLOSE_PREFERENCES: return { - isPreferencesShowing: false + 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 diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss index e6d3fa0a..65b8b2e8 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 index 0ef68369..0c415c99 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -2,8 +2,10 @@ 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; } } @@ -17,11 +19,44 @@ } } -.preferences__title-text { +.preferences__plus-button { + @extend %preferences-button; + margin-right: auto; +} + +.preferences__minus-button { + @extend %preferences-button; +} + +.preferences__heading { + display: flex; + flex-direction: rows; margin-left: #{20 / $base-font-size}rem; - font-size: $menu-font-size; +} +.preferences__title-text { + margin: 0 0; + font-size: #{$menu-font-size}px; font-weight: 700; - font-color: white; height: #{44 / $base-font-size}rem; line-height: #{44 / $base-font-size}rem; } + +.preference { + margin: 0 #{20 / $base-font-size}rem; +} + +.preference__title-text { + 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/layout/_ide.scss b/styles/layout/_ide.scss index a0f93033..2be7c528 100644 --- a/styles/layout/_ide.scss +++ b/styles/layout/_ide.scss @@ -19,8 +19,7 @@ } .preferences { - width: 30%; - height: 50%; + width: 22.5%; position: absolute; top: #{20 / $base-font-size}rem; right:#{60 / $base-font-size}rem; From 02fa5e6d4edf1effdd07c9a80dc98c1f5dae8502 Mon Sep 17 00:00:00 2001 From: mathuramg Date: Mon, 20 Jun 2016 15:23:42 -0400 Subject: [PATCH 8/8] refactor css names --- images/exit.svg | 8 ++++---- images/minus.svg | 6 +++--- images/plus.svg | 8 ++++---- shared/components/Editor/Editor.jsx | 2 +- shared/components/Preferences/Preferences.jsx | 8 ++++---- styles/components/_preferences.scss | 8 ++++---- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/images/exit.svg b/images/exit.svg index 4c67ba03..c4b6bc27 100644 --- a/images/exit.svg +++ b/images/exit.svg @@ -1,12 +1,12 @@ - Combined Shape + Exit Created with Sketch. - + - + - \ No newline at end of file + diff --git a/images/minus.svg b/images/minus.svg index 8cdc54cc..95f8494b 100644 --- a/images/minus.svg +++ b/images/minus.svg @@ -1,12 +1,12 @@ - Rectangle 2 + Decrease Value Created with Sketch. - + - + diff --git a/images/plus.svg b/images/plus.svg index 93b3c44b..449abd95 100644 --- a/images/plus.svg +++ b/images/plus.svg @@ -1,12 +1,12 @@ - Combined Shape + Increase Value Created with Sketch. - + - + - \ No newline at end of file + diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index 87195feb..2d793b17 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, { diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx index 89b849bd..7af63eb6 100644 --- a/shared/components/Preferences/Preferences.jsx +++ b/shared/components/Preferences/Preferences.jsx @@ -15,18 +15,18 @@ class Preferences extends React.Component { return (
-

Preferences

+

Preferences

-

Font Size

-

{this.props.fontSize}

-
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss index 0c415c99..c660148f 100644 --- a/styles/components/_preferences.scss +++ b/styles/components/_preferences.scss @@ -19,12 +19,12 @@ } } -.preferences__plus-button { +.preference__plus-button { @extend %preferences-button; margin-right: auto; } -.preferences__minus-button { +.preference__minus-button { @extend %preferences-button; } @@ -33,7 +33,7 @@ flex-direction: rows; margin-left: #{20 / $base-font-size}rem; } -.preferences__title-text { +.preferences__title { margin: 0 0; font-size: #{$menu-font-size}px; font-weight: 700; @@ -45,7 +45,7 @@ margin: 0 #{20 / $base-font-size}rem; } -.preference__title-text { +.preference__title { margin: 0 0; font-size: #{$base-font-size}px; font-weight: 400;