diff --git a/client/constants.js b/client/constants.js index d8dbac15..b863005e 100644 --- a/client/constants.js +++ b/client/constants.js @@ -43,9 +43,8 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT'; export const EXPAND_CONSOLE = 'EXPAND_CONSOLE'; export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE'; -export const TOGGLE_BEEP = 'TOGGLE_BEEP'; -export const UPDATE_LINTMESSAGE = 'UPDATE_LINTMESSAGE'; -export const CLEAR_LINTMESSAGE = 'CLEAR_LINTMESSAGE'; +export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE'; +export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE'; export const UPDATE_LINENUMBER = 'UPDATE_LINENUMBER'; export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS'; @@ -57,6 +56,7 @@ export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME'; export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME'; export const SET_AUTOSAVE = 'SET_AUTOSAVE'; +export const SET_LINT_WARNING = 'SET_LINT_WARNING'; export const SET_PREFERENCES = 'SET_PREFERENCES'; // eventually, handle errors more specifically and better diff --git a/client/modules/IDE/actions/editorAccessibility.js b/client/modules/IDE/actions/editorAccessibility.js index d88589bf..28cbe44c 100644 --- a/client/modules/IDE/actions/editorAccessibility.js +++ b/client/modules/IDE/actions/editorAccessibility.js @@ -1,14 +1,8 @@ import * as ActionTypes from '../../../constants'; -export function toggleBeep() { - return { - type: ActionTypes.TOGGLE_BEEP - }; -} - export function updateLintMessage(severity, line, message) { return { - type: ActionTypes.UPDATE_LINTMESSAGE, + type: ActionTypes.UPDATE_LINT_MESSAGE, severity, line, message @@ -17,7 +11,7 @@ export function updateLintMessage(severity, line, message) { export function clearLintMessage() { return { - type: ActionTypes.CLEAR_LINTMESSAGE + type: ActionTypes.CLEAR_LINT_MESSAGE }; } diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index ab8d2c5c..82ea107a 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -100,3 +100,21 @@ export function setAutosave(value) { } }; } + +export function setLintWarning(value) { + return (dispatch, getState) => { + dispatch({ + type: ActionTypes.SET_LINT_WARNING, + value + }); + const state = getState(); + if (state.user.authenticated) { + const formParams = { + preferences: { + lintWarning: value + } + }; + updatePreferences(formParams, dispatch); + } + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index 17a7cf1d..4686171b 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -42,7 +42,7 @@ class Editor extends React.Component { this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message); } }); - if (this.props.lintMessages.length > 0 && this.props.enableBeep) { + if (this.props.lintMessages.length > 0 && this.props.lintWarning) { this.beep.play(); } }) @@ -105,7 +105,7 @@ class Editor extends React.Component { } Editor.propTypes = { - enableBeep: PropTypes.bool.isRequired, + lintWarning: PropTypes.bool.isRequired, lintMessages: PropTypes.array.isRequired, updateLintMessage: PropTypes.func.isRequired, clearLintMessage: PropTypes.func.isRequired, diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js index f83c7df2..7b7b7b34 100644 --- a/client/modules/IDE/components/EditorAccessibility.js +++ b/client/modules/IDE/components/EditorAccessibility.js @@ -21,14 +21,12 @@ class EditorAccessibility extends React.Component { - ); } } EditorAccessibility.propTypes = { - toggleBeep: PropTypes.func.isRequired, lintMessages: PropTypes.array.isRequired, lineNo: PropTypes.number.isRequired, }; diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index 06e240ed..58cff09a 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -28,6 +28,11 @@ class Preferences extends React.Component { this.props.setAutosave(value); } + handleLintWarning(event) { + const value = event.target.value === 'true'; + this.props.setLintWarning(value); + } + render() { const preferencesContainerClass = classNames({ preferences: true, @@ -49,6 +54,14 @@ class Preferences extends React.Component { preference__option: true, 'preference__option--selected': !this.props.autosave }); + let lintWarningOnClass = classNames({ + preference__option: true, + 'preference__option--selected': this.props.lintWarning + }); + let lintWarningOffClass = classNames({ + preference__option: true, + 'preference__option--selected': !this.props.lintWarning + }); return (
@@ -139,6 +152,21 @@ class Preferences extends React.Component { >Off
+
+

Lint Warning Sound

+
+ + +
+
); } @@ -155,7 +183,9 @@ Preferences.propTypes = { isTabIndent: PropTypes.bool.isRequired, setFontSize: PropTypes.func.isRequired, autosave: PropTypes.bool.isRequired, - setAutosave: PropTypes.func.isRequired + setAutosave: PropTypes.func.isRequired, + lintWarning: PropTypes.bool.isRequired, + setLintWarning: PropTypes.func.isRequired }; export default Preferences; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index fb96f856..41e783b0 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -87,6 +87,8 @@ class IDEView extends React.Component { setFontSize={this.props.setFontSize} autosave={this.props.preferences.autosave} setAutosave={this.props.setAutosave} + lintWarning={this.props.preferences.lintWarning} + setLintWarning={this.props.setLintWarning} />
{ switch (action.type) { - case ActionTypes.TOGGLE_BEEP: - return Object.assign({}, state, { enableBeep: !state.enableBeep }); - case ActionTypes.UPDATE_LINTMESSAGE: + case ActionTypes.UPDATE_LINT_MESSAGE: return Object.assign({}, state, { lintMessages: state.lintMessages.concat( { severity: action.severity, line: action.line, message: action.message }) }); - case ActionTypes.CLEAR_LINTMESSAGE: + case ActionTypes.CLEAR_LINT_MESSAGE: return Object.assign({}, state, { lintMessages: [] }); case ActionTypes.UPDATE_LINENUMBER: return Object.assign({}, state, { lineNo: action.lineNo }); diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js index 818dde15..5d1d65bf 100644 --- a/client/modules/IDE/reducers/preferences.js +++ b/client/modules/IDE/reducers/preferences.js @@ -4,7 +4,8 @@ const initialState = { fontSize: 18, indentationAmount: 2, isTabIndent: true, - autosave: true + autosave: true, + lintWarning: false }; const preferences = (state = initialState, action) => { @@ -23,6 +24,8 @@ const preferences = (state = initialState, action) => { }); case ActionTypes.SET_AUTOSAVE: return Object.assign({}, state, { autosave: action.value }); + case ActionTypes.SET_LINT_WARNING: + return Object.assign({}, state, { lintWarning: action.value }); case ActionTypes.SET_PREFERENCES: return action.preferences; default: diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 74bb1d70..4a0be1a3 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -114,3 +114,12 @@ border-radius: 2px; box-shadow: 0 12px 12px $light-shadow-color; } + +%hidden-element { + position:absolute; + left:-10000px; + top:auto; + width:1px; + height:1px; + overflow:hidden; +} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index dc3899e6..961e906e 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -89,3 +89,6 @@ width: #{70 / $base-font-size}rem; } +.preference--hidden { + @extend %hidden-element; +}