From f9e9a8ae4d6f0527e594805af6de1f7223878535 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Tue, 1 Aug 2017 14:17:03 +0200
Subject: [PATCH] Shrink timeline height and make years fade out (#2778)

* Shrink timeline height to 55px and make years fade out as hours fade in.

* Address the comments.
---
 .../scripts/components/time-travel-timeline.js | 18 ++++++++++++------
 client/app/scripts/utils/math-utils.js         |  5 +++++
 client/app/styles/_base.scss                   | 10 +++++-----
 client/app/styles/_variables.scss              |  2 ++
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/app/scripts/components/time-travel-timeline.js b/client/app/scripts/components/time-travel-timeline.js
index aca28888f..ce13a1abf 100644
--- a/client/app/scripts/components/time-travel-timeline.js
+++ b/client/app/scripts/components/time-travel-timeline.js
@@ -8,6 +8,7 @@ import { scaleUtc } from 'd3-scale';
 import { event as d3Event, select } from 'd3-selection';
 import { Motion, spring } from 'react-motion';
 
+import { linearGradientValue } from '../utils/math-utils';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import {
   nowInSecondsPrecision,
@@ -66,6 +67,8 @@ const MIN_TICK_SPACING_PX = 70;
 const MAX_TICK_SPACING_PX = 415;
 const ZOOM_SENSITIVITY = 1.0015;
 const FADE_OUT_FACTOR = 1.4;
+const TICKS_ROW_SPACING = 16;
+const MAX_TICK_ROWS = 3;
 
 
 class TimeTravelTimeline extends React.Component {
@@ -291,12 +294,15 @@ class TimeTravelTimeline extends React.Component {
     const periodFormat = TICK_SETTINGS_PER_PERIOD[period].format;
     const ticks = this.getTicksForPeriod(period, focusedTimestamp);
 
-    const verticalShift = this.getVerticalShiftForPeriod(period);
-    const transform = `translate(0, ${62 - (verticalShift * 15)})`;
+    const ticksRow = MAX_TICK_ROWS - this.getVerticalShiftForPeriod(period);
+    const transform = `translate(0, ${ticksRow * TICKS_ROW_SPACING})`;
 
-    // Ticks quickly fade in from the bottom and then slowly
-    // start fading out as they are being pushed to the top.
-    const opacity = verticalShift > 1 ? (6 - verticalShift) / 5 : verticalShift;
+    // Ticks quickly fade in from the bottom and then slowly start
+    // fading out towards the top until they are pushed out of canvas.
+    const focusedRow = MAX_TICK_ROWS - 1;
+    const opacity = ticksRow > focusedRow ?
+      linearGradientValue(ticksRow, [MAX_TICK_ROWS, focusedRow]) :
+      linearGradientValue(ticksRow, [-2, focusedRow]);
 
     return (
       <g className={period} transform={transform} style={{ opacity }}>
@@ -330,7 +336,7 @@ class TimeTravelTimeline extends React.Component {
           width={width} height={height} fillOpacity={0}
         />
         {this.renderDisabledShadow(focusedTimestamp)}
-        <g className="ticks">
+        <g className="ticks" transform="translate(0, 1)">
           {this.renderPeriodTicks('year', focusedTimestamp)}
           {this.renderPeriodTicks('month', focusedTimestamp)}
           {this.renderPeriodTicks('day', focusedTimestamp)}
diff --git a/client/app/scripts/utils/math-utils.js b/client/app/scripts/utils/math-utils.js
index 7840f4110..e2ca2512c 100644
--- a/client/app/scripts/utils/math-utils.js
+++ b/client/app/scripts/utils/math-utils.js
@@ -39,3 +39,8 @@ export function minEuclideanDistanceBetweenPoints(points) {
   });
   return minDistance;
 }
+
+// A linear mapping [a, b] -> [0, 1] (maps value x=a into 0 and x=b into 1).
+export function linearGradientValue(x, [a, b]) {
+  return (x - a) / (b - a);
+}
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 2bc0c44bd..adda36df4 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -189,7 +189,7 @@
 
   &.time-travel-open {
     .details-wrapper {
-      margin-top: 85px;
+      margin-top: $timeline-height + 15px;
     }
   }
 }
@@ -264,7 +264,7 @@
   height: 0;
 
   &.visible {
-    height: 105px;
+    height: $timeline-height + 35px;
     margin-bottom: 15px;
     margin-top: -5px;
   }
@@ -277,7 +277,7 @@
   .time-travel-timeline {
     align-items: center;
     display: flex;
-    height: 70px;
+    height: $timeline-height;
 
     svg {
       @extend .grabbable;
@@ -321,11 +321,11 @@
 
     &:before {
       top: 0;
-      height: 70px;
+      height: $timeline-height;
     }
 
     &:after {
-      top: 70px;
+      top: $timeline-height;
       height: 9px;
       opacity: 0.15;
     }
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index 52d352f67..ac30c5d25 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -53,6 +53,8 @@ $link-opacity-default: 0.8;
 $search-border-color: transparent;
 $search-border-width: 1px;
 
+$timeline-height: 55px;
+
 /* specific elements */
 $body-background-color: linear-gradient(30deg, $background-color 0%, $background-lighter-color 100%);
 $label-background-color: fade-out($background-average-color, .3);