r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

move preference action creators to preferences component

Browse source
This commit is contained in:
catarak 2016-08-01 13:55:49 -04:00
parent 49b1cd5bd6
commit a2072d9b0c
7 changed files with 46 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/modules/IDE/actions/ide.js
View file

@ -57,7 +57,6 @@ export function collapseSidebar() {
}
export function expandConsole() {
console.log('expand console!');
return {
type: ActionTypes.EXPAND_CONSOLE
};
@ -69,3 +68,15 @@ export function collapseConsole() {
};
}
export function openPreferences() {
return {
type: ActionTypes.OPEN_PREFERENCES
};
}
export function closePreferences() {
return {
type: ActionTypes.CLOSE_PREFERENCES
};
}

12
client/modules/IDE/actions/preferences.js
View file

@ -1,17 +1,5 @@
import * as ActionTypes from '../../../constants';
export function openPreferences() {
return {
type: ActionTypes.OPEN_PREFERENCES
};
}
export function closePreferences() {
return {
type: ActionTypes.CLOSE_PREFERENCES
};
}
export function increaseFont() {
return {
type: ActionTypes.INCREASE_FONTSIZE

29
client/modules/IDE/components/Preferences.js
View file

@ -1,10 +1,13 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PreferencesActions from '../actions/preferences';
const Isvg = require('react-inlinesvg');
const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg');
const classNames = require('classnames');
function Preferences(props) {
const preferencesContainerClass = classNames({
@ -28,7 +31,7 @@ function Preferences(props) {
onClick={props.closePreferences}
title="exit"
>
<Isvg src={exitUrl} alt="Exit Preferences" />
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
@ -39,7 +42,7 @@ function Preferences(props) {
onClick={props.decreaseFont}
id="preference-decrease-font-size"
>
<Isvg src={minusUrl} alt="Decrease Font Size" />
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<label htmlFor="preference-decrease-font-size" className="preference__button-label">
@ -59,7 +62,7 @@ function Preferences(props) {
onClick={props.increaseFont}
id="preference-increase-font-size"
>
<Isvg src={plusUrl} alt="Increase Font Size" />
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
<label htmlFor="preference-increase-font-size" className="preference__button-label">
@ -74,7 +77,7 @@ function Preferences(props) {
onClick={props.decreaseIndentation}
id="preference-decrease-indentation"
>
<Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<label htmlFor="preference-decrease-indentation" className="preference__button-label">
@ -94,7 +97,7 @@ function Preferences(props) {
onClick={props.increaseIndentation}
id="preference-increase-indentation"
>
<Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<label htmlFor="preference-increase-indentation" className="preference__button-label">
@ -109,6 +112,16 @@ function Preferences(props) {
);
}
function mapStateToProps(state) {
return {
...state.preferences
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(PreferencesActions, dispatch);
}
Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
@ -125,4 +138,4 @@ Preferences.propTypes = {
isTabIndent: PropTypes.bool.isRequired
};
export default Preferences;
export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

4
client/modules/IDE/components/Toolbar.js
View file

@ -17,7 +17,7 @@ function Toolbar(props) {
});
let preferencesButtonClass = classNames({
'toolbar__preferences-button': true,
'toolbar__preferences-button--selected': props.isPreferencesVisible
'toolbar__preferences-button--selected': props.preferencesIsVisible
});
return (
@ -69,7 +69,7 @@ function Toolbar(props) {
Toolbar.propTypes = {
isPlaying: PropTypes.bool.isRequired,
isPreferencesVisible: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired,

31
client/modules/IDE/pages/IDEView.js
View file

@ -11,7 +11,6 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as PreferencesActions from '../actions/preferences';
import * as ProjectActions from '../actions/project';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
@ -41,23 +40,12 @@ class IDEView extends React.Component {
projectName={this.props.project.name}
setProjectName={this.props.setProjectName}
openPreferences={this.props.openPreferences}
isPreferencesVisible={this.props.preferences.isVisible}
preferencesIsVisible={this.props.ide.preferencesIsVisible}
owner={this.props.project.owner}
/>
<Preferences
isVisible={this.props.preferences.isVisible}
isVisible={this.props.ide.preferencesIsVisible}
closePreferences={this.props.closePreferences}
increaseFont={this.props.increaseFont}
decreaseFont={this.props.decreaseFont}
updateFont={this.props.updateFont}
fontSize={this.props.preferences.fontSize}
increaseIndentation={this.props.increaseIndentation}
decreaseIndentation={this.props.decreaseIndentation}
updateIndentation={this.props.updateIndentation}
indentationAmount={this.props.preferences.indentationAmount}
isTabIndent={this.props.preferences.isTabIndent}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
/>
<div className="editor-preview-container">
<Sidebar
@ -131,7 +119,8 @@ IDEView.propTypes = {
consoleEvent: PropTypes.object,
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired,
consoleIsExpanded: PropTypes.bool.isRequired
consoleIsExpanded: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
@ -144,20 +133,11 @@ IDEView.propTypes = {
setProjectName: PropTypes.func.isRequired,
openPreferences: PropTypes.func.isRequired,
preferences: PropTypes.shape({
isVisible: PropTypes.bool.isRequired,
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
}).isRequired,
closePreferences: PropTypes.func.isRequired,
increaseFont: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
updateFont: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
files: PropTypes.array.isRequired,
updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({
@ -197,8 +177,7 @@ function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({},
FileActions,
ProjectActions,
IDEActions,
PreferencesActions),
IDEActions),
dispatch);
}

7
client/modules/IDE/reducers/ide.js
View file

@ -9,7 +9,8 @@ const initialState = {
},
modalIsVisible: false,
sidebarIsExpanded: true,
consoleIsExpanded: false
consoleIsExpanded: false,
preferencesIsVisible: false
};
const ide = (state = initialState, action) => {
@ -38,6 +39,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { consoleIsExpanded: false });
case ActionTypes.EXPAND_CONSOLE:
return Object.assign({}, state, { consoleIsExpanded: true });
case ActionTypes.OPEN_PREFERENCES:
return Object.assign({}, state, { preferencesIsVisible: true });
case ActionTypes.CLOSE_PREFERENCES:
return Object.assign({}, state, { preferencesIsVisible: false });
default:
return state;
}

9
client/modules/IDE/reducers/preferences.js
View file

@ -1,7 +1,6 @@
import * as ActionTypes from '../../../constants';
const initialState = {
isVisible: false,
fontSize: 18,
indentationAmount: 2,
isTabIndent: true
@ -9,14 +8,6 @@ const initialState = {
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.OPEN_PREFERENCES:
return Object.assign({}, state, {
isVisible: true
});
case ActionTypes.CLOSE_PREFERENCES:
return Object.assign({}, state, {
isVisible: false
});
case ActionTypes.INCREASE_FONTSIZE:
return Object.assign({}, state, {
fontSize: state.fontSize + 2