From c4e224df294d7e86edc2642b3f517badf4bf3747 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Thu, 5 Jul 2018 17:40:18 +0100
Subject: [PATCH] Adding line-height setting & granular font size. (#410)

* Adding line-height option. Fixes #406.

* Allowing more granular font size
---
 components/Carbon.js   | 1 +
 components/Settings.js | 9 +++++++++
 components/Slider.js   | 4 +++-
 lib/constants.js       | 1 +
 lib/routing.js         | 1 +
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index d452eea..a96e3fc 100644
--- a/components/Carbon.js
+++ b/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;
diff --git a/components/Settings.js b/components/Settings.js
index 1c634fd..b8af3a6 100644
--- a/components/Settings.js
+++ b/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}
diff --git a/components/Slider.js b/components/Slider.js
index 2d5e029..b049f6f 100644
--- a/components/Slider.js
+++ b/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)`
           }}
diff --git a/lib/constants.js b/lib/constants.js
index 1af74d1..10ae695 100644
--- a/lib/constants.js
+++ b/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,
diff --git a/lib/routing.js b/lib/routing.js
index 2d42341..bc03f7a 100644
--- a/lib/routing.js
+++ b/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' },