move lint warning to preferences

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_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
-export const UPDATE_LINTMESSAGE = 'UPDATE_LINTMESSAGE';
+export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
-export const CLEAR_LINTMESSAGE = 'CLEAR_LINTMESSAGE';
 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

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
   };
 }
 

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);
+    }
+  };
+}

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,

client/modules/IDE/components/EditorAccessibility.js

@@ -21,14 +21,12 @@ class EditorAccessibility extends React.Component {
         <ul className="editor-lintmessages" id="editor-lintmessages" title="lint messages">
           {messages}
         </ul>
-        <button className="editor-lintbutton" onClick={this.props.toggleBeep}>Beep</button>
       </div>
     );
   }
 }
 
 EditorAccessibility.propTypes = {
-  toggleBeep: PropTypes.func.isRequired,
   lintMessages: PropTypes.array.isRequired,
   lineNo: PropTypes.number.isRequired,
 };

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 (
       <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
         <div className="preferences__heading">
@@ -139,6 +152,21 @@ class Preferences extends React.Component {
             >Off</button>
           </div>
         </div>
+        <div className="preference preference--hidden">
+          <h4 className="preference__title">Lint Warning Sound</h4>
+          <div className="preference__options">
+            <button
+              className={lintWarningOnClass}
+              onClick={() => this.props.setLintWarning(true)}
+              aria-label="lint warning on"
+            >On</button>
+            <button
+              className={lintWarningOffClass}
+              onClick={() => this.props.setLintWarning(false)}
+              aria-label="lint warning off"
+            >Off</button>
+          </div>
+        </div>
       </section>
     );
   }
@@ -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;

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}
         />
         <div className="editor-preview-container">
           <Sidebar
@@ -105,12 +107,11 @@ class IDEView extends React.Component {
           />
           <div className="editor-console-container">
             <EditorAccessibility
-              toggleBeep={this.props.toggleBeep}
               lintMessages={this.props.editorAccessibility.lintMessages}
               lineNo={this.props.editorAccessibility.lineNo}
             />
             <Editor
-              enableBeep={this.props.editorAccessibility.enableBeep}
+              lintWarning={this.props.preferences.lintWarning}
               lintMessages={this.props.editorAccessibility.lintMessages}
               updateLineNumber={this.props.updateLineNumber}
               updateLintMessage={this.props.updateLintMessage}
@@ -192,11 +193,9 @@ IDEView.propTypes = {
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
   editorAccessibility: PropTypes.shape({
-    enableBeep: PropTypes.bool.isRequired,
     lintMessages: PropTypes.array.isRequired,
     lineNo: PropTypes.number.isRequired
   }).isRequired,
-  toggleBeep: PropTypes.func.isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
   updateLineNumber: PropTypes.func.isRequired,
@@ -204,7 +203,8 @@ IDEView.propTypes = {
     fontSize: PropTypes.number.isRequired,
     indentationAmount: PropTypes.number.isRequired,
     isTabIndent: PropTypes.bool.isRequired,
-    autosave: PropTypes.bool.isRequired
+    autosave: PropTypes.bool.isRequired,
+    lintWarning: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
@@ -212,6 +212,7 @@ IDEView.propTypes = {
   indentWithTab: PropTypes.func.isRequired,
   indentWithSpace: PropTypes.func.isRequired,
   setAutosave: PropTypes.func.isRequired,
+  setLintWarning: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({

client/modules/IDE/reducers/editorAccessibility.js

@@ -1,21 +1,18 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  enableBeep: false,
   lineNo: 0,
   lintMessages: []
 };
 
 const editorAccessibility = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.TOGGLE_BEEP:
+    case ActionTypes.UPDATE_LINT_MESSAGE:
-      return Object.assign({}, state, { enableBeep: !state.enableBeep });
-    case ActionTypes.UPDATE_LINTMESSAGE:
       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 });

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:

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;
+}

client/styles/components/_preferences.scss

@@ -89,3 +89,6 @@
 	width: #{70 / $base-font-size}rem;
 }
 
+.preference--hidden {
+	@extend %hidden-element;
+}