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

Merge branch 'master' of https://github.com/catarak/p5.js-web-editor into accessibility

Browse source
This commit is contained in:
mathuramg 2016-07-12 12:26:20 -04:00
commit 67fcd323a4
10 changed files with 217 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/constants.js
View file

@ -8,6 +8,12 @@ export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
export const AUTH_USER = 'AUTH_USER';
export const UNAUTH_USER = 'UNAUTH_USER';

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

@ -23,3 +23,43 @@ export function decreaseFont() {
type: ActionTypes.DECREASE_FONTSIZE
};
}
export function updateFont(event) {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_FONTSIZE,
value
};
}
export function increaseIndentation() {
return {
type: ActionTypes.INCREASE_INDENTATION
};
}
export function decreaseIndentation() {
return {
type: ActionTypes.DECREASE_INDENTATION
};
}
export function updateIndentation() {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_INDENTATION,
value
};
}
export function indentWithTab() {
return {
type: ActionTypes.INDENT_WITH_TAB
};
}
export function indentWithSpace() {
return {
type: ActionTypes.INDENT_WITH_SPACE
};
}

16
client/modules/IDE/components/Editor.js
View file

@ -18,6 +18,8 @@ class Editor extends React.Component {
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
this._cm.setOption('tabSize', this.props.indentationAmount);
}
componentDidUpdate(prevProps) {
@ -28,6 +30,12 @@ class Editor extends React.Component {
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
}
if (this.props.indentationAmount !== prevProps.indentationAmount) {
this._cm.setOption('tabSize', this.props.indentationAmount);
}
if (this.props.isTabIndent !== prevProps.isTabIndent) {
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
}
}
componentWillUnmount() {
@ -42,12 +50,14 @@ class Editor extends React.Component {
}
Editor.propTypes = {
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired,
updateFileContent: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
file: PropTypes.shape({
name: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
}),
updateFileContent: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired
})
};
export default Editor;

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

@ -11,6 +11,14 @@ function Preferences(props) {
preferences: true,
'preferences--selected': props.isVisible
});
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !props.isTabIndent
});
return (
<div className={preferencesContainerClass} tabIndex="0">
<div className="preferences__heading">
@ -19,16 +27,37 @@ function Preferences(props) {
<Isvg src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<div className="preference">
<h3 className="preference__title">Text Size</h3>
<h4 className="preference__title">Text Size</h4>
<button className="preference__plus-button" onClick={props.decreaseFont}>
<Isvg src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<p className="preference__value">{props.fontSize}</p>
<input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input>
<button className="preference__minus-button" onClick={props.increaseFont}>
<Isvg src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
<button className="preference__plus-button" onClick={props.decreaseIndentation}>
<Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input>
<button className="preference__minus-button" onClick={props.increaseIndentation}>
<Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
</div>
</div>
</div>
);
}
@ -37,8 +66,16 @@ Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
updateFont: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
increaseFont: PropTypes.func.isRequired
increaseFont: PropTypes.func.isRequired,
indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired
};
export default Preferences;

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

@ -44,7 +44,15 @@ class IDEView extends React.Component {
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}
/>
<Sidebar
files={this.props.files}
@ -55,6 +63,8 @@ class IDEView extends React.Component {
file={this.props.selectedFile}
updateFileContent={this.props.updateFileContent}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
isTabIndent={this.props.preferences.isTabIndent}
files={this.props.files}
/>
<PreviewFrame
@ -93,11 +103,19 @@ IDEView.propTypes = {
openPreferences: PropTypes.func.isRequired,
preferences: PropTypes.shape({
isVisible: PropTypes.bool.isRequired,
fontSize: PropTypes.number.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({

4
client/modules/IDE/reducers/files.js
View file

@ -12,7 +12,9 @@ const defaultHTML =
`<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

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

@ -2,31 +2,53 @@ import * as ActionTypes from '../../../constants';
const initialState = {
isVisible: false,
fontSize: 18
fontSize: 18,
indentationAmount: 2,
isTabIndent: true
};
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.OPEN_PREFERENCES:
return {
isVisible: true,
fontSize: state.fontSize
};
return Object.assign({}, state, {
isVisible: true
});
case ActionTypes.CLOSE_PREFERENCES:
return {
isVisible: false,
fontSize: state.fontSize
};
return Object.assign({}, state, {
isVisible: false
});
case ActionTypes.INCREASE_FONTSIZE:
return {
isVisible: state.isVisible,
return Object.assign({}, state, {
fontSize: state.fontSize + 2
};
});
case ActionTypes.DECREASE_FONTSIZE:
return {
isVisible: state.isVisible,
return Object.assign({}, state, {
fontSize: state.fontSize - 2
};
});
case ActionTypes.UPDATE_FONTSIZE:
return Object.assign({}, state, {
fontSize: action.value
});
case ActionTypes.INCREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount + 2
});
case ActionTypes.DECREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount - 2
});
case ActionTypes.UPDATE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: action.value
});
case ActionTypes.INDENT_WITH_TAB:
return Object.assign({}, state, {
isTabIndent: true
});
case ActionTypes.INDENT_WITH_SPACE:
return Object.assign({}, state, {
isTabIndent: false
});
default:
return state;
}

18
client/styles/abstracts/_placeholders.scss
View file

@ -69,6 +69,8 @@
@extend %toolbar-button;
color: $light-primary-text-color;
background-color: $light-modal-button-background-color;
padding: 0;
line-height: #{50 / $base-font-size}rem;
& g {
fill: $light-primary-text-color;
}
@ -88,3 +90,19 @@
color: $light-primary-text-color;
}
}
%preference-option {
background-color: $light-button-background-color;
color: $light-inactive-text-color;
font-size: #{14 / $base-font-size}rem;
cursor: pointer;
text-align: left;
margin-bottom: #{5 / $base-font-size}rem;
border: 0px;
&:hover {
color: $light-primary-text-color;
}
&--selected {
color: $light-primary-text-color;
}
}

7
client/styles/base/_base.scss
View file

@ -46,7 +46,12 @@ h2 {
h3 {
font-weight: normal;
}
h4 {
font-weight: normal;
}
h6 {
font-weight: normal;
}
thead {
text-align: left;
}

38
client/styles/components/_preferences.scss
View file

@ -2,7 +2,7 @@
position: absolute;
top: #{66 / $base-font-size}rem;
right: #{40 / $base-font-size}rem;
width: #{276 / $base-font-size}rem;
width: #{332 / $base-font-size}rem;
background-color: $light-button-background-color;
display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@ -35,7 +35,10 @@
.preference {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: #{40 / $base-font-size}rem;
& + & {
border-top: 2px dashed $light-button-border-color;
}
}
.preference__title {
@ -44,8 +47,35 @@
}
.preference__value {
border: 1px solid $light-button-border-color;
border: 2px solid $light-button-border-color;
text-align: center;
line-height: #{48 / $base-font-size}rem;
border-radius: 0%;
width: #{48 / $base-font-size}rem;
height: #{44 / $base-font-size}rem;
margin: 0 #{28 / $base-font-size}rem;
padding: 0;
background-color: $light-button-background-color;
}
.preference__label {
margin: 0;
line-height: #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
&:hover {
color: $light-inactive-text-color;
}
}
.preference__vertical-list {
display: flex;
flex-direction: column;
}
.preference__option {
@extend %preference-option;
list-style-type: none;
padding-left: #{28 / $base-font-size}rem;
&--selected {
@extend %preference-option--selected;
}
}