Merge branch 'feature/1482-custom-time-range' of github.com:influxdata/chronograf into feature/1482-custom-time-range

ui/src/shared/components/CustomTimeRange.js

@@ -38,7 +38,7 @@ class CustomTimeRange extends Component {
 
   render() {
     return (
-      <div>
+      <div className="custom-time--container">
         <div className="custom-time--dates">
           <div className="custom-time--lower" ref={r => (this.lower = r)} />
           <div className="custom-time--upper" ref={r => (this.upper = r)} />

ui/src/shared/components/CustomTimeRangeDropdown.js

@@ -49,14 +49,12 @@ class CustomTimeRangeDropdown extends Component {
           )} — ${moment(upper).format('MMM Do HH:mm')}`}</span>
           <span className="caret" />
         </button>
-        <div className="custom-time--container">
         <CustomTimeRange
           onApplyTimeRange={onApplyTimeRange}
           timeRange={timeRange}
           onClose={this.handleCloseDropdown}
         />
       </div>
-      </div>
     )
   }
 }

ui/src/shared/components/CustomTimeRangeOverlay.js

@@ -2,7 +2,6 @@ import React, {PropTypes, Component} from 'react'
 import OnClickOutside from 'react-onclickoutside'
 
 import CustomTimeRange from 'shared/components/CustomTimeRange'
-import OverlayTechnologies from 'shared/components/OverlayTechnologies'
 
 class CustomTimeRangeOverlay extends Component {
   constructor(props) {
@@ -17,15 +16,13 @@ class CustomTimeRangeOverlay extends Component {
     const {onClose, timeRange, onApplyTimeRange} = this.props
 
     return (
-      <OverlayTechnologies>
-        <div className="custom-time--overlay-container">
+      <div className="custom-time--overlay">
         <CustomTimeRange
           onApplyTimeRange={onApplyTimeRange}
           timeRange={timeRange}
           onClose={onClose}
         />
       </div>
-      </OverlayTechnologies>
     )
   }
 }

ui/src/shared/components/TimeRangeDropdown.js

@@ -76,7 +76,7 @@ class TimeRangeDropdown extends Component {
     const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state
 
     return (
-      <div>
+      <div className="time-range-dropdown">
         <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
           <div
             className="btn btn-sm btn-default dropdown-toggle"
@@ -95,7 +95,13 @@ class TimeRangeDropdown extends Component {
               maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
             >
               <li className="dropdown-header">Time Range</li>
-              <li className="custom-timerange">
+              <li
+                className={
+                  isCustomTimeRangeOpen
+                    ? 'active dropdown-item custom-timerange'
+                    : 'dropdown-item custom-timerange'
+                }
+              >
                 <a href="#" onClick={this.showCustomTimeRange}>
                   Custom Time Range
                 </a>

ui/src/style/components/custom-time-range.scss

@@ -242,3 +242,15 @@ $rd-cell-size: 30px;
     background-color: $g6-smoke;
   }
 }
+/* Custom positioning for dashboard use */
+.time-range-dropdown {
+  position: relative;
+}
+.custom-time--overlay {
+  position: absolute;
+  top: 0;
+  right: calc(100% + 4px);
+  z-index: 2;
+  
+  .custom-time--container {display: flex;}
+}