Adjust font size

Author: Ives van Hoorne

src/app/components/Input.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export default styled.input`
+  background-color: rgba(0, 0, 0, 0.3);
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,.1);
+  color: white;
+  padding: 2px 0;
+  width: inherit;
+`;

src/app/components/sandbox/CodeEditor/index.js

@@ -312,7 +312,13 @@ export default class CodeEditor extends React.PureComponent {
   server: typeof CodeMirror.TernServer;
 
   render() {
-    const { title, canSave, onlyViewMode, modulePath } = this.props;
+    const {
+      title,
+      canSave,
+      onlyViewMode,
+      modulePath,
+      preferences,
+    } = this.props;
 
     return (
       <Container>
@@ -323,7 +329,10 @@ export default class CodeEditor extends React.PureComponent {
           path={modulePath}
         />
         <CodeContainer>
-          <div style={{ height: '100%' }} ref={this.getCodeMirror} />
+          <div
+            style={{ height: '100%', fontSize: preferences.fontSize || 14 }}
+            ref={this.getCodeMirror}
+          />
         </CodeContainer>
       </Container>
     );

src/app/pages/Sandbox/Editor/Workspace/Preferences/Preference.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Switch from 'app/components/Switch';
 import Tooltip from 'app/components/Tooltip';
+import PreferenceSwitch from './PreferenceSwitch';
+import PreferenceNumber from './PreferenceNumber';
 
 const Container = styled.div`
   display: flex;
@@ -14,21 +15,24 @@ const Container = styled.div`
 
 type Props = {
   title: string,
-  enabled: boolean,
-  onClick: (on: boolean) => void,
+  value: any,
+  setValue: (value: any) => any,
   tooltip: ?string,
 };
 
 export default class Preference extends React.Component {
   props: Props;
 
-  handleClick = () => {
-    const { enabled, onClick } = this.props;
-    onClick(!enabled);
+  getOptionComponent = (value: boolean | number) => {
+    if (typeof value === 'boolean') {
+      return <PreferenceSwitch setValue={this.props.setValue} value={value} />;
+    }
+
+    return <PreferenceNumber setValue={this.props.setValue} value={value} />;
   };
 
   render() {
-    const { title, enabled, tooltip } = this.props;
+    const { title, value, tooltip } = this.props;
 
     const Title = tooltip
       ? <Tooltip position="right" title={tooltip}>{title}</Tooltip>
@@ -37,13 +41,9 @@ export default class Preference extends React.Component {
     return (
       <Container>
         {Title}
-        <Switch
-          onClick={this.handleClick}
-          small
-          offMode
-          secondary
-          right={enabled}
-        />
+        <div style={{ width: 48 }}>
+          {this.getOptionComponent(value)}
+        </div>
       </Container>
     );
   }

src/app/pages/Sandbox/Editor/Workspace/Preferences/PreferenceNumber.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Input from 'app/components/Input';
+
+type Props = {
+  value: boolean,
+  setValue: boolean => any,
+};
+
+export default class PreferenceInput extends React.PureComponent {
+  props: Props;
+
+  handleChange = e => {
+    const value = e.target.value;
+
+    if (!Number.isNaN(+value)) {
+      this.props.setValue(+value);
+    }
+  };
+
+  render() {
+    const { value } = this.props;
+    return <Input type="number" value={value} onChange={this.handleChange} />;
+  }
+}

src/app/pages/Sandbox/Editor/Workspace/Preferences/PreferenceSwitch.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Switch from 'app/components/Switch';
+
+type Props = {
+  value: boolean,
+  setValue: boolean => any,
+};
+
+export default class PreferenceSwitch extends React.PureComponent {
+  props: Props;
+  handleClick = () => {
+    this.props.setValue(!this.props.value);
+  };
+
+  render() {
+    const { value } = this.props;
+    return (
+      <Switch
+        onClick={this.handleClick}
+        small
+        offMode
+        secondary
+        right={value}
+      />
+    );
+  }
+}

src/app/pages/Sandbox/Editor/Workspace/Preferences/index.js

@@ -36,39 +36,44 @@ const Preferences = ({ preferences, preferencesActions }: Props) => (
     <PreferenceContainer>
       <Preference
         title="Autocomplete"
-        enabled={preferences.autoCompleteEnabled}
-        onClick={preferencesActions.setAutoCompletePreference}
+        value={preferences.autoCompleteEnabled}
+        setValue={preferencesActions.setAutoCompletePreference}
       />
       <Preference
         title="Linter"
         tooltip="Made possible by eslint"
-        enabled={preferences.lintEnabled}
-        onClick={preferencesActions.setLintPreference}
+        value={preferences.lintEnabled}
+        setValue={preferencesActions.setLintPreference}
       />
       <Preference
         title="Prettify on save"
         tooltip="Made possible by Prettier"
-        enabled={preferences.prettifyOnSaveEnabled}
-        onClick={preferencesActions.setPrettifyOnSavePreference}
+        value={preferences.prettifyOnSaveEnabled}
+        setValue={preferencesActions.setPrettifyOnSavePreference}
       />
       <Preference
         title="VIM Mode"
-        enabled={preferences.vimMode}
-        onClick={preferencesActions.setVimPreference}
+        value={preferences.vimMode}
+        setValue={preferencesActions.setVimPreference}
+      />
+      <Preference
+        title="Font size"
+        value={preferences.fontSize}
+        setValue={preferencesActions.setFontSizePreference}
       />
     </PreferenceContainer>
     <WorkspaceSubtitle>Preview</WorkspaceSubtitle>
     <PreferenceContainer>
       <Preference
         title="Live Preview"
-        enabled={preferences.livePreviewEnabled}
-        onClick={preferencesActions.setLivePreview}
+        value={preferences.livePreviewEnabled}
+        setValue={preferencesActions.setLivePreview}
         tooltip="Only update on save"
       />
       <Preference
         title="Instant preview"
-        enabled={preferences.instantPreviewEnabled}
-        onClick={preferencesActions.setInstantPreview}
+        value={preferences.instantPreviewEnabled}
+        setValue={preferencesActions.setInstantPreview}
       />
     </PreferenceContainer>
   </Container>

src/app/store/preferences/actions.js

@@ -7,10 +7,12 @@ import {
   PRETTIFY_ON_SAVE,
   LINT_ENABLED,
   INSTANT_PREVIEW,
+  FONT_SIZE,
 } from './keys';
 
 export const SET_PREFERENCE_AUTOCOMPLETE = 'SET_PREFERENCE_AUTOCOMPLETE';
 export const SET_PREFERENCE_VIM_MODE = 'SET_PREFERENCE_VIM_MODE';
+export const SET_PREFERENCE_FONT_SIZE = 'SET_PREFERENCE_FONT_SIZE';
 export const SET_PREFERENCE_LIVE_PREVIEW = 'SET_PREFERENCE_LIVE_PREVIEW';
 export const SET_PREFERENCE_PRETTIFY_ON_SAVE =
   'SET_PREFERENCE_PRETTIFY_ON_SAVE';
@@ -83,4 +85,13 @@ export default {
       option: instantPreview,
     });
   },
+
+  setFontSizePreference: (fontSize: number) => (dispatch: Function) => {
+    setOption(FONT_SIZE, fontSize);
+
+    dispatch({
+      type: SET_PREFERENCE_FONT_SIZE,
+      option: fontSize,
+    });
+  },
 };

src/app/store/preferences/keys.js

@@ -4,3 +4,4 @@ export const LIVE_PREVIEW = 'settings.livepreview';
 export const INSTANT_PREVIEW = 'settings.instantpreview';
 export const PRETTIFY_ON_SAVE = 'settings.prettifyonsave';
 export const LINT_ENABLED = 'settings.lintenabled';
+export const FONT_SIZE = 'settings.fontsize';

src/app/store/preferences/reducer.js

@@ -10,6 +10,7 @@ import {
   SET_PREFERENCE_PRETTIFY_ON_SAVE,
   SET_PREFERENCE_LINT,
   SET_INSTANT_PREVIEW,
+  SET_PREFERENCE_FONT_SIZE,
 } from './actions';
 import {
   AUTO_COMPLETE,
@@ -18,12 +19,13 @@ import {
   PRETTIFY_ON_SAVE,
   LINT_ENABLED,
   INSTANT_PREVIEW,
+  FONT_SIZE,
 } from './keys';
 
 const getKey = (key, defaultVal) => {
   try {
     const result = store.get(key);
-    return result === undefined ? !!defaultVal : result;
+    return result === undefined ? defaultVal : result;
   } catch (e) {
     console.error(e);
     return undefined;
@@ -37,6 +39,7 @@ const initialState: Preferences = {
   prettifyOnSaveEnabled: getKey(PRETTIFY_ON_SAVE, false),
   lintEnabled: getKey(LINT_ENABLED, false),
   instantPreviewEnabled: getKey(INSTANT_PREVIEW, false),
+  fontSize: getKey(FONT_SIZE, 14),
 };
 
 export default (state: Preferences = initialState, action): Preferences => {
@@ -53,6 +56,8 @@ export default (state: Preferences = initialState, action): Preferences => {
       return { ...state, lintEnabled: action.option };
     case SET_INSTANT_PREVIEW:
       return { ...state, instantPreviewEnabled: action.option };
+    case SET_PREFERENCE_FONT_SIZE:
+      return { ...state, fontSize: action.option };
     default: {
       return state;
     }

src/app/utils/codemirror.js

@@ -31,7 +31,6 @@ export const getCodeMirror = (el, doc) => {
       background: ${theme.background2()};
       color: #e0e0e0;
       height: 100%;
-      font-size: 14px;
       font-weight: 500;
     }
     .cm-s-oceanic div.CodeMirror-selected { background: #374140; }