make preference value input tag

client/constants.js

@@ -8,8 +8,10 @@ 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 AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';

client/modules/IDE/actions/preferences.js

@@ -24,6 +24,14 @@ export function decreaseFont() {
   };
 }
 
+export function updateFont(event) {
+  const value = event.target.value;
+  return {
+    type: ActionTypes.UPDATE_FONTSIZE,
+    value
+  };
+}
+
 export function increaseIndentation() {
   return {
     type: ActionTypes.INCREASE_INDENTATION
@@ -35,3 +43,11 @@ export function decreaseIndentation() {
     type: ActionTypes.DECREASE_INDENTATION
   };
 }
+
+export function updateIndentation() {
+  const value = event.target.value;
+  return {
+    type: ActionTypes.UPDATE_INDENTATION,
+    value
+  };
+}

client/modules/IDE/components/Preferences.js

@@ -25,7 +25,7 @@ function Preferences(props) {
         <button className="preference__plus-button" onClick={props.decreaseFont}>
           <Isvg src={minusUrl} alt="Decrease Font Size" />
         </button>
-        <p className="preference__value">{props.fontSize}</p>
+        <input className="preference__value" defaultValue={props.fontSize} value={props.fontSize} onChange={props.updateFont}></input>
         <button className="preference__minus-button" onClick={props.increaseFont}>
           <Isvg src={plusUrl} alt="Increase Font Size" />
         </button>
@@ -36,7 +36,7 @@ function Preferences(props) {
         <button className="preference__plus-button" onClick={props.decreaseIndentation}>
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
         </button>
-        <p className="preference__value">{props.indentationAmount}</p>
+        <input className="preference__value" defaultValue={props.indentationAmount} value={props.indentationAmount} onChange={props.updateIndentation}></input>
         <button className="preference__minus-button" onClick={props.increaseIndentation}>
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
         </button>
@@ -50,11 +50,13 @@ 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,
   indentationAmount: PropTypes.number.isRequired,
   decreaseIndentation: PropTypes.func.isRequired,
-  increaseIndentation: PropTypes.func.isRequired
+  increaseIndentation: PropTypes.func.isRequired,
+  updateIndentation: PropTypes.func.isRequired
 };
 
 export default Preferences;

client/modules/IDE/pages/IDEView.js

@@ -42,9 +42,11 @@ 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}
         />
         <Editor
@@ -91,8 +93,10 @@ IDEView.propTypes = {
   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,
   file: PropTypes.shape({
     content: PropTypes.string.isRequired
   }).isRequired,

client/modules/IDE/reducers/preferences.js

@@ -24,6 +24,10 @@ const preferences = (state = initialState, action) => {
       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
@@ -32,6 +36,10 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, {
         indentationAmount: state.indentationAmount - 2
       });
+    case ActionTypes.UPDATE_INDENTATION:
+      return Object.assign({}, state, {
+        indentationAmount: action.value
+      });
     default:
       return state;
   }

client/styles/components/_preferences.scss

@@ -48,6 +48,6 @@
 .preference__value {
 	border: 1px solid $light-button-border-color;
 	text-align: center;
-	line-height: #{48 / $base-font-size}rem;
 	width: #{48 / $base-font-size}rem;
+	background-color: $light-button-background-color;
 }