Adding line-height setting & granular font size. (#410)

* Adding line-height option. Fixes #406.

* Allowing more granular font size

components/Carbon.js

@@ -202,6 +202,7 @@ class Carbon extends PureComponent {
               ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
               font-family: ${config.fontFamily}, monospace !important;
               font-size: ${config.fontSize};
+              line-height: ${config.lineHeight};
               font-variant-ligatures: contextual;
               font-feature-settings: 'calt' 1;
               user-select: none;

components/Settings.js

@@ -51,6 +51,7 @@ class Settings extends React.Component {
             value={this.props.fontSize || 13}
             minValue={10}
             maxValue={18}
+            step={0.5}
             onChange={this.props.onChange.bind(null, 'fontSize')}
           />
           <Toggle
@@ -69,6 +70,14 @@ class Settings extends React.Component {
             onChange={this.props.onChange.bind(null, 'widthAdjustment')}
           />
           <Collapse label="Advanced">
+            <Slider
+              label="Line height"
+              value={this.props.lineHeight}
+              minValue={90}
+              maxValue={250}
+              usePercentage={true}
+              onChange={this.props.onChange.bind(null, 'lineHeight')}
+            />
             <Slider
               label="Padding (vertical)"
               value={this.props.paddingVertical || 16}

components/Slider.js

@@ -13,6 +13,7 @@ export default class extends React.Component {
   render() {
     const minValue = this.props.minValue || 0
     const maxValue = this.props.maxValue || 100
+    const step = 'step' in this.props ? this.props.step : 1;
 
     return (
       <div className="slider">
@@ -23,11 +24,12 @@ export default class extends React.Component {
           onChange={this.handleChange}
           min={minValue}
           max={maxValue}
+          step={step}
         />
         <div
           className="slider-bg"
           style={{
-            transform: `translate3d(${(((parseInt(this.props.value, 10) - minValue) * 1.0) /
+            transform: `translate3d(${(((parseFloat(this.props.value) - minValue) * 1.0) /
               (maxValue - minValue)) *
               100}%, 0px, 0px)`
           }}

lib/constants.js

@@ -485,6 +485,7 @@ export const DEFAULT_SETTINGS = {
   language: DEFAULT_LANGUAGE,
   fontFamily: 'Hack',
   fontSize: '14px',
+  lineHeight: '133%',
   windowControls: true,
   widthAdjustment: true,
   lineNumbers: false,

lib/routing.js

@@ -32,6 +32,7 @@ const mappings = [
   { field: 'ln:lineNumbers', type: 'bool' },
   { field: 'fm:fontFamily' },
   { field: 'fs:fontSize' },
+  { field: 'lh:lineHeight' },
   { field: 'si:squaredImage', type: 'bool' },
   { field: 'code:code' },
   { field: 'es:exportSize' },