Added user configurable text editor font size

#42
magjac · Sep 15, 2018 · 329506b · 329506b
1 parent c26e83b
commit 329506b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/src/SettingsDialog.js b/src/SettingsDialog.js
@@ -46,7 +46,10 @@ const styles = theme => ({
   },
   holdOffInput: {
     width: '7em',
-  }
+  },
+  fontSizeInput: {
+    width: '5em',
+  },
 });
 
 class SettingsDialog extends React.Component {
@@ -67,6 +70,10 @@ class SettingsDialog extends React.Component {
     this.props.onHoldOffChange(event.target.value);
   };
 
+  handleFontSizeChange = (event) => {
+    this.props.onFontSizeChange(event.target.value);
+  };
+
   render() {
     const { classes } = this.props;
     return (
@@ -127,13 +134,35 @@ class SettingsDialog extends React.Component {
               />
             </FormGroup>
           </DialogContent>
-          <DialogTitle id="form-dialog-title">Other</DialogTitle>
+          <DialogTitle id="form-dialog-title">Text Editor</DialogTitle>
+          <DialogContent classes={{root: classes.root}}>
+            <FormControl
+              className={classes.formControl}
+              aria-describedby="font-size-helper-text"
+            >
+              <InputLabel shrink={true}>Font size</InputLabel>
+              <Input
+                className={classes.fontSizeInput}
+                id="font-size"
+                type="number"
+                value={this.props.fontSize}
+                onChange={this.handleFontSizeChange}
+                endAdornment={<InputAdornment position="end"> px</InputAdornment>}
+                inputProps={{
+                  'aria-label': 'FontSize',
+                  min: 1,
+                  max: 99,
+                  step: 1,
+                }}
+              />
+            </FormControl>
+          </DialogContent>
           <DialogContent classes={{root: classes.root}}>
             <FormControl
               className={classes.formControl}
               aria-describedby="holdoff-helper-text"
             >
-              <InputLabel shrink={true}>Editor hold-off time</InputLabel>
+              <InputLabel shrink={true}>Hold-off time</InputLabel>
               <Input
                 className={classes.holdOffInput}
                 id="holdoff"

diff --git a/src/TextEditor.js b/src/TextEditor.js
@@ -98,6 +98,7 @@ class TextEditor extends React.Component {
         <AceEditor
           mode="dot"
           theme="github"
+          fontSize={this.props.fontSize + 'px'}
           onChange={this.handleChange}
           onBeforeLoad={this.handleBeforeLoad}
           onLoad={this.handleLoad}

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -59,6 +59,7 @@ class Index extends React.Component {
       defaultEdgeAttributes: JSON.parse(localStorage.getItem('defaultEdgeAttributes')) || {},
       error: null,
       holdOff: localStorage.getItem('holdOff') || 0.2,
+      fontSize: localStorage.getItem('fontSize') || 12,
       selectedGraphComponents: [],
     };
   }
@@ -184,6 +185,12 @@ class Index extends React.Component {
     });
   }
 
+  handleFontSizeChange = (fontSize) => {
+    this.setPersistentState({
+      fontSize: fontSize,
+    });
+  }
+
   handleNodeShapeClick = (shape) => {
     let x0 = null;
     let y0 = null;
@@ -389,6 +396,8 @@ class Index extends React.Component {
           onFitGraphSwitchChange={this.handleFitGraphSwitchChange}
           holdOff={this.state.holdOff}
           onHoldOffChange={this.handleHoldOffChange}
+          fontSize={this.state.fontSize}
+          onFontSizeChange={this.handleFontSizeChange}
           onSettingsClose={this.handleSettingsClose}
         />
         <Grid container
@@ -428,6 +437,7 @@ class Index extends React.Component {
                     error={this.state.error}
                     selectedGraphComponents={this.state.selectedGraphComponents}
                     holdOff={this.state.holdOff}
+                    fontSize={this.state.fontSize}
                     registerUndo={this.registerUndo}
                     registerRedo={this.registerRedo}
                   />