From 7eed1d6fc3d370939982ff87ffbe1f5ed83d3061 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Thu, 31 Jan 2019 15:28:46 -0500
Subject: [PATCH] Sync styling of marker in both map and timeline from config

---
 src/components/Dashboard.jsx                      | 2 +-
 src/components/Map.jsx                            | 2 +-
 src/components/Timeline.jsx                       | 8 +++-----
 src/components/presentational/Timeline/Markers.js | 8 +++++++-
 src/scss/timeline.scss                            | 7 -------
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 4e5168a..19d5637 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -92,7 +92,7 @@ class Dashboard extends React.Component {
 
   render () {
     const { actions, app, domain, ui } = this.props
-    console.log(app)
+
     return (
       <div>
         <Toolbar
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index aec6800..ed1721c 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -280,7 +280,7 @@ function mapStateToProps (state) {
       tiles: state.ui.tiles,
       dom: state.ui.dom,
       narratives: state.ui.style.narratives,
-      mapSelectedEvents: state.ui.style.mapSelectedEvents,
+      mapSelectedEvents: state.ui.style.selectedEvents,
       shapes: state.ui.style.shapes
     }
   }
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 6bd810f..b131f73 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -290,15 +290,12 @@ class Timeline extends React.Component {
                 dims={dims}
                 onApplyZoom={this.onApplyZoom}
               />
-              {/* <Labels */}
-              {/*   dims={dims} */}
-              {/*   timelabels={this.state.timerange} */}
-              {/* /> */}
               <Markers
                 selected={this.props.app.selected}
                 getEventX={this.getDatetimeX}
                 getCategoryY={this.state.scaleY}
                 transitionDuration={this.state.transitionDuration}
+                styles={this.props.ui.styles}
               />
               <Events
                 datetimes={this.props.domain.datetimes}
@@ -333,7 +330,8 @@ function mapStateToProps (state) {
       narrative: state.app.narrative
     },
     ui: {
-      dom: state.ui.dom
+      dom: state.ui.dom,
+      styles: state.ui.style.selectedEvents
     }
   }
 }
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index 79166b1..8f01dd4 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/src/components/presentational/Timeline/Markers.js
@@ -1,12 +1,18 @@
 import React from 'react'
 
-const TimelineMarkers = ({ getEventX, getCategoryY, transitionDuration, selected }) => {
+const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration, selected }) => {
   function renderMarker (event) {
     return (
       <circle
         className='timeline-marker'
         cx={0}
         cy={0}
+        stroke={styles ? styles.stroke : '#ffffff'}
+        stroke-opacity='1'
+        stroke-width={styles ? styles['stroke-width'] : 2}
+        stroke-linecap=''
+        stroke-linejoin='round'
+        stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
           'transform': `translate(${getEventX(event)}px, ${getCategoryY(event.category)}px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index 72c19e4..ab13f0c 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -198,10 +198,6 @@
         stroke-dasharray: 1px 2px;
       }
 
-      .datetime {
-        /*transition: transform 0.2s ease;*/
-      }
-
       .event {
         cursor: pointer;
         opacity: .7;
@@ -213,9 +209,6 @@
 
       .timeline-marker {
         fill: none;
-        stroke: $offwhite;
-        stroke-width: 2;
-        stroke-dasharray: 5px 2px;
         transition: transform 0.2s ease;
       }