From 5560b09d7b5fb4dc07cfc0171195e40c128d9307 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 17 Jan 2019 15:21:31 +0000
Subject: [PATCH] move timeline dimensions to store

---
 src/components/Timeline.jsx                   | 25 ++++++++--------
 src/components/presentational/TimelineClip.js |  4 +--
 src/store/initial.js                          | 29 +++++++++++++------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 8d7104b..c950fb5 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -24,15 +24,7 @@ class Timeline extends React.Component {
     this.svgRef = React.createRef()
     this.state = {
       isFolded: false,
-      dims: {
-        height: 140,
-        width: 0,
-        width_controls: 100,
-        height_controls: 115,
-        margin_left: 120,
-        margin_top: 20,
-        trackHeight: 80
-      },
+      dims: props.app.dims,
       scaleX: null,
       scaleY: null,
       timerange: [null, null],
@@ -117,9 +109,15 @@ class Timeline extends React.Component {
       const boundingClient = document.querySelector(`#${dom}`).getBoundingClientRect();
 
       this.setState({
-          dims: Object.assign({}, this.state.dims, { width: boundingClient.width })
-        }, () => { this.setState({ scaleX: this.makeScaleX() })
-      });
+        dims: {
+          ...this.state.dims,
+          width: boundingClient.width
+        }
+      },
+        () => {
+          this.setState({ scaleX: this.makeScaleX()
+          })
+        });
     }
   }
 
@@ -329,9 +327,10 @@ function mapStateToProps(state) {
     },
     app: {
       timerange: selectors.getTimeRange(state),
+      dims: state.app.timeline.dimensions,
       selected: state.app.selected,
       language: state.app.language,
-      zoomLevels: state.app.zoomLevels,
+      zoomLevels: state.app.timeline.zoomLevels,
       narrative: state.app.narrative
     },
     ui: {
diff --git a/src/components/presentational/TimelineClip.js b/src/components/presentational/TimelineClip.js
index 29491da..11f4c79 100644
--- a/src/components/presentational/TimelineClip.js
+++ b/src/components/presentational/TimelineClip.js
@@ -3,8 +3,8 @@ import React from 'react';
 const TimelineClip = ({ dims }) => (
   <clipPath id="clip">
     <rect
-      x="120"
-      y="0" 
+      x={dims.margin_left}
+      y="0"
       width={dims.width - dims.margin_left - dims.width_controls}
       height={dims.height - 25}
     >
diff --git a/src/store/initial.js b/src/store/initial.js
index 9cb4a2a..b30daea 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -56,15 +56,26 @@ const initial = {
     isMobile: (/Mobi/.test(navigator.userAgent)),
     language: 'en-US',
     mapAnchor: [31.356397, 34.784818],
-    zoomLevels: [
-      { label: '3 years', duration: 1576800 },
-      { label: '3 months', duration: 129600 },
-      { label: '3 days', duration: 4320 },
-      { label: '12 hours', duration: 720 },
-      { label: '2 hours', duration: 120 },
-      { label: '30 min', duration: 30 },
-      { label: '10 min', duration: 10 }
-    ],
+    timeline: {
+      dimensions: {
+        height: 140,
+        width: 0,
+        width_controls: 100,
+        height_controls: 115,
+        margin_left: 200,
+        margin_top: 20,
+        trackHeight: 80
+      },
+      zoomLevels: [
+        { label: '3 years', duration: 1576800 },
+        { label: '3 months', duration: 129600 },
+        { label: '3 days', duration: 4320 },
+        { label: '12 hours', duration: 720 },
+        { label: '2 hours', duration: 120 },
+        { label: '30 min', duration: 30 },
+        { label: '10 min', duration: 10 }
+      ],
+    },
     flags: {
       isFetchingDomain: false,
       isFetchingSources: false,