Permalink
Browse files

fixed appending errors in draw(), changed error color

  • Loading branch information...
yining1023 committed Sep 22, 2016
2 parents 318475f + f017dd8 commit c48c01216021adfae0a8d716502b7964431b3472
Showing with 744 additions and 314 deletions.
  1. +1 −0 client/constants.js
  2. +1 −1 client/images/play.svg
  3. +8 −0 client/modules/IDE/actions/preferences.js
  4. +20 −11 client/modules/IDE/components/Editor.js
  5. +30 −1 client/modules/IDE/components/Preferences.js
  6. +13 −2 client/modules/IDE/pages/IDEView.js
  7. +4 −1 client/modules/IDE/reducers/preferences.js
  8. +26 −0 client/styles/abstracts/_functions.scss
  9. +19 −0 client/styles/abstracts/_mixins.scss
  10. +86 −80 client/styles/abstracts/_placeholders.scss
  11. +62 −41 client/styles/abstracts/_variables.scss
  12. +18 −13 client/styles/base/_base.scss
  13. +3 −1 client/styles/components/_about.scss
  14. +19 −6 client/styles/components/_console.scss
  15. +24 −10 client/styles/components/_editor.scss
  16. +13 −11 client/styles/components/_github-button.scss
  17. +6 −2 client/styles/components/_modal.scss
  18. +16 −15 client/styles/components/_nav.scss
  19. +119 −0 client/styles/components/_p5-dark-codemirror-theme.scss
  20. +118 −0 client/styles/components/_p5-light-codemirror-theme.scss
  21. +0 −40 client/styles/components/_p5-widget-codemirror-theme.scss
  22. +31 −18 client/styles/components/_preferences.scss
  23. +6 −4 client/styles/components/_resizer.scss
  24. +53 −28 client/styles/components/_sidebar.scss
  25. +3 −1 client/styles/components/_sketch-list.scss
  26. +4 −1 client/styles/components/_toast.scss
  27. +28 −22 client/styles/components/_toolbar.scss
  28. +7 −3 client/styles/layout/_ide.scss
  29. +4 −1 client/styles/main.scss
  30. +2 −1 server/models/user.js
View
@@ -81,6 +81,7 @@ export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL';
export const SHOW_TOAST = 'SHOW_TOAST';
export const HIDE_TOAST = 'HIDE_TOAST';
export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
export const SET_THEME = 'SET_THEME';
export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
View
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="16px" height="16px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>play</title>
<!-- <desc>Created with Sketch.</desc> -->
@@ -136,3 +136,11 @@ export function setTextOutput(value) {
}
};
}
export function setTheme(value) {
return {
type: ActionTypes.SET_THEME,
value
};
}
@@ -39,7 +39,7 @@ class Editor extends React.Component {
this.beep = new Audio(beepUrl);
this.widgets = [];
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
theme: 'p5-widget',
theme: `p5-${this.props.theme}`,
value: this.props.file.content,
lineNumbers: true,
styleActiveLine: true,
@@ -115,6 +115,10 @@ class Editor extends React.Component {
this._cm.setOption('mode', 'htmlmixed');
}
}
if (this.props.theme !== prevProps.theme) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
}
}
componentWillUnmount() {
@@ -140,6 +144,7 @@ class Editor extends React.Component {
checkForInfiniteLoop(callback) {
const prevIsplaying = this.props.isPlaying;
let infiniteLoop = false;
let prevLine;
this.props.stopSketch();
this.props.resetInfiniteLoops();
@@ -155,14 +160,17 @@ class Editor extends React.Component {
loopProtect.alias = 'protect';
loopProtect.hit = (line) => {
this.props.detectInfiniteLoops();
infiniteLoop = true;
callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div');
const loopError = `line ${line}: This loop is taking too long to run.`;
msg.appendChild(document.createTextNode(loopError));
msg.className = 'lint-error';
this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
if (line !== prevLine) {
this.props.detectInfiniteLoops();
infiniteLoop = true;
callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div');
const loopError = `line ${line}: This loop is taking too long to run.`;
msg.appendChild(document.createTextNode(loopError));
msg.className = 'lint-error';
this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
prevLine = line;
}
};
const processed = loopProtect(this.props.file.content);
@@ -193,7 +201,7 @@ class Editor extends React.Component {
</body>
</html>`);
doc.close();
callback(infiniteLoop, prevIsplaying);
callback(infiniteLoop, prevIsplaying, prevLine);
}
_cm: CodeMirror.Editor
@@ -265,7 +273,8 @@ Editor.propTypes = {
resetInfiniteLoops: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
isPlaying: PropTypes.bool.isRequired
isPlaying: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired
};
export default Editor;
@@ -165,6 +165,33 @@ class Preferences extends React.Component {
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Theme</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setTheme('light')}
aria-label="light theme on"
name="light theme"
id="light-theme-on"
className="preference__radio-button"
value="light"
checked={this.props.theme === 'light'}
/>
<label htmlFor="light-theme-on" className="preference__option">Light</label>
<input
type="radio"
onChange={() => this.props.setTheme('dark')}
aria-label="dark theme on"
name="dark theme"
id="dark-theme-on"
className="preference__radio-button"
value="dark"
checked={this.props.theme === 'dark'}
/>
<label htmlFor="dark-theme-on" className="preference__option">Dark</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Lint Warning Sound</h4>
<div className="preference__options">
@@ -249,7 +276,9 @@ Preferences.propTypes = {
textOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired
setLintWarning: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
setTheme: PropTypes.func.isRequired
};
export default Preferences;
@@ -61,6 +61,8 @@ class IDEView extends React.Component {
this.props.router.setRouteLeaveHook(this.props.route, () => this.warnIfUnsavedChanges());
window.onbeforeunload = () => this.warnIfUnsavedChanges();
document.body.className = this.props.preferences.theme;
}
componentWillUpdate(nextProps) {
@@ -75,6 +77,10 @@ class IDEView extends React.Component {
if (nextProps.params.project_id && !this.props.params.project_id) {
this.props.getProject(nextProps.params.project_id);
}
if (nextProps.preferences.theme !== this.props.preferences.theme) {
document.body.className = nextProps.preferences.theme;
}
}
componentDidUpdate(prevProps) {
@@ -203,6 +209,8 @@ class IDEView extends React.Component {
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
setTextOutput={this.props.setTextOutput}
theme={this.props.preferences.theme}
setTheme={this.props.setTheme}
/>
<div className="editor-preview-container">
<SplitPane
@@ -271,6 +279,7 @@ class IDEView extends React.Component {
stopSketch={this.props.stopSketch}
startSketch={this.props.startSketch}
isPlaying={this.props.ide.isPlaying}
theme={this.props.preferences.theme}
/>
<Console
consoleEvent={this.props.ide.consoleEvent}
@@ -443,7 +452,8 @@ IDEView.propTypes = {
isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired
textOutput: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired
}).isRequired,
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
@@ -503,7 +513,8 @@ IDEView.propTypes = {
setRouteLeaveHook: PropTypes.func
}).isRequired,
route: PropTypes.object.isRequired,
setUnsavedChanges: PropTypes.func.isRequired
setUnsavedChanges: PropTypes.func.isRequired,
setTheme: PropTypes.func.isRequired,
};
function mapStateToProps(state) {
@@ -6,7 +6,8 @@ const initialState = {
isTabIndent: true,
autosave: true,
lintWarning: false,
textOutput: false
textOutput: false,
theme: 'light'
};
const preferences = (state = initialState, action) => {
@@ -31,6 +32,8 @@ const preferences = (state = initialState, action) => {
return Object.assign({}, state, { textOutput: action.value });
case ActionTypes.SET_PREFERENCES:
return action.preferences;
case ActionTypes.SET_THEME:
return Object.assign({}, state, { theme: action.value });
default:
return state;
}
@@ -0,0 +1,26 @@
@function map-fetch($map, $keys) {
$key: nth($keys, 1);
$length: length($keys);
$value: map-get($map, $key);
@if $value != null {
@if $length > 1 {
$rest: ();
@for $i from 2 through $length {
$rest: append($rest, nth($keys, $i))
}
@return map-fetch($value, $rest);
} @else {
@return $value;
}
} @else {
@return false;
}
}
@function getThemifyVariable($key) {
@return map-get($theme-map, $key);
}
@@ -0,0 +1,19 @@
@mixin themify ($themes: $themes) {
@each $theme, $map in $themes {
.#{$theme} & {
// Define theme color
$theme-map : (
) !global;
@each $key, $submap in $map {
$value: map-fetch($themes, $theme '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
// reset theme color to null
$theme-map: null !global;
}
}
}
Oops, something went wrong.

0 comments on commit c48c012

Please sign in to comment.