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

include space and tab

Browse source
This commit is contained in:
mathuramg 2016-07-10 22:52:48 -04:00
parent 3bdd02e859
commit 65bd8c2e63
9 changed files with 103 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -12,6 +12,8 @@ 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';

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

@ -51,3 +51,15 @@ export function updateIndentation() {
value
};
}
export function indentWithTab() {
return {
type: ActionTypes.INDENT_WITH_TAB
};
}
export function indentWithSpace() {
return {
type: ActionTypes.INDENT_WITH_SPACE
};
}

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

@ -17,7 +17,10 @@ class Editor extends React.Component {
this.props.updateFile('sketch.js', this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.indentWithTab);
this._cm.setOption('tabSize', this.props.indentationAmount);
this._cm.setOption('indentUnit', this.props.indentationAmount);
}
componentDidUpdate(prevProps) {
@ -48,7 +51,8 @@ Editor.propTypes = {
content: PropTypes.string.isRequired,
updateFile: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
};
export default Editor;

28
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">
@ -24,22 +32,33 @@ function Preferences(props) {
<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>
<input className="preference__value" defaultValue={props.fontSize} value={props.fontSize} onChange={props.updateFont}></input>
<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" defaultValue={props.indentationAmount} value={props.indentationAmount} onChange={props.updateIndentation}></input>
<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>
<ul>
<li className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</li>
<li className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</li>
</ul>
</div>
</div>
@ -56,7 +75,10 @@ Preferences.propTypes = {
indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired
};
export default Preferences;

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

@ -48,12 +48,16 @@ class IDEView extends React.Component {
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}
/>
<Editor
content={this.props.file.content}
updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
isTabIndent={this.props.preferences.isTabIndent}
/>
<PreviewFrame
content={this.props.file.content}
@ -88,7 +92,8 @@ IDEView.propTypes = {
preferences: PropTypes.shape({
isVisible: PropTypes.bool.isRequired,
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
}).isRequired,
closePreferences: PropTypes.func.isRequired,
increaseFont: PropTypes.func.isRequired,
@ -97,6 +102,8 @@ IDEView.propTypes = {
increaseIndentation: PropTypes.func.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
file: PropTypes.shape({
content: PropTypes.string.isRequired
}).isRequired,

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

@ -3,7 +3,8 @@ import * as ActionTypes from '../../../constants';
const initialState = {
isVisible: false,
fontSize: 18,
indentationAmount: 4
indentationAmount: 4,
isTabIndent: true
};
const preferences = (state = initialState, action) => {
@ -40,6 +41,14 @@ const preferences = (state = initialState, action) => {
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;
}

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

@ -69,6 +69,7 @@
@extend %toolbar-button;
color: $light-primary-text-color;
background-color: $light-modal-button-background-color;
padding: 0;
& g {
fill: $light-primary-text-color;
}
@ -88,3 +89,17 @@
color: $light-primary-text-color;
}
}
%preference-option {
color: $light-secondary-text-color;
font-size: #{14 / $base-font-size}rem;
cursor: pointer;
text-align: left;
margin-bottom: #{5 / $base-font-size}rem;
&:hover {
color: $light-primary-text-color;
}
&--selected {
color: $light-primary-text-color;
}
}

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

@ -50,3 +50,7 @@ h3 {
h4 {
font-weight: normal;
}
h6 {
font-weight: normal;
}

25
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: #{300 / $base-font-size}rem;
background-color: $light-button-background-color;
display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@ -35,8 +35,7 @@
.preference {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: #{20 / $base-font-size}rem;
padding-bottom: #{40 / $base-font-size}rem;
border-bottom: 2px dashed $light-button-border-color;
}
@ -49,5 +48,25 @@
border: 1px solid $light-button-border-color;
text-align: center;
width: #{48 / $base-font-size}rem;
height: #{48 / $base-font-size}rem;
margin: 0 #{20 / $base-font-size}rem;
background-color: $light-button-background-color;
}
.preference__label {
margin: 0;
line-height: #{20 / $base-font-size}rem;
color: $light-button-border-color;
&:hover {
color: $light-button-border-color;
}
}
.preference__option {
@extend %preference-option;
list-style-type: none;
padding-left: #{12 / $base-font-size}rem;
&--selected {
@extend %preference-option--selected;
}
}