Quick refactoring of time picker styles, needs a much bigger redesign

public/app/features/dashboard/timepicker/timepicker.html

@@ -24,60 +24,67 @@
 </div>
 
 <div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
-  <form name="timeForm" class="gf-timepicker-absolute-section">
-    <h3 class="section-heading">Custom range</h3>
-
-    <label class="small">From:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
-      </div>
-      <div class="gf-form">
-        <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
-          <i class="fa fa-calendar"></i>
-        </button>
-      </div>
+  <div class="popover-box">
+    <div class="popover-box__header">
+      <span class="popover-box__title">Quick ranges</span>
     </div>
-
-    <div ng-if="openFromPicker">
-      <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
+    <div class="popover-box__body gf-timepicker-relative-section">
+      <ul ng-repeat="group in ctrl.timeOptions">
+        <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
+          <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
+        </li>
+      </ul>
     </div>
+  </div>
 
-
-    <label class="small">To:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
+  <div class="popover-box">
+    <div class="popover-box__header">
+      <span class="popover-box__title">Custom range</span>
+    </div>
+    <form name="timeForm" class="popover-box__body gf-timepicker-absolute-section">
+      <label class="small">From:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
+        </div>
+        <div class="gf-form">
+          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+            <i class="fa fa-calendar"></i>
+          </button>
+        </div>
       </div>
-      <div class="gf-form">
-        <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
-          <i class="fa fa-calendar"></i>
-        </button>
+
+      <div ng-if="openFromPicker">
+        <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
       </div>
-    </div>
 
-    <div ng-if="openToPicker">
-      <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
-    </div>
 
-    <label class="small">Refreshing every:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+      <label class="small">To:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
+        </div>
+        <div class="gf-form">
+          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+            <i class="fa fa-calendar"></i>
+          </button>
+        </div>
       </div>
-      <div class="gf-form">
-        <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+
+      <div ng-if="openToPicker">
+        <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
       </div>
-    </div>
-  </form>
 
-  <div class="gf-timepicker-relative-section">
-    <h3 class="section-heading">Quick ranges</h3>
-    <ul ng-repeat="group in ctrl.timeOptions">
-      <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
-        <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
-      </li>
-    </ul>
+      <label class="small">Refreshing every:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+        </div>
+        <div class="gf-form">
+          <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+        </div>
+      </div>
+    </form>
   </div>
 </div>
 

public/app/features/explore/TimePicker.tsx

@@ -232,61 +232,61 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
     const timeOptions = this.getTimeOptions();
     return (
       <div ref={this.dropdownRef} className="gf-timepicker-dropdown">
-        <div className="gf-timepicker-absolute-section">
-          <h3 className="section-heading">Custom range</h3>
-
-          <label className="small">From:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <input
-                type="text"
-                className="gf-form-input input-large timepicker-from"
-                value={fromRaw}
-                onChange={this.handleChangeFrom}
-              />
-            </div>
+        <div className="popover-box">
+          <div className="popover-box__header">
+            <span className="popover-box__title">Quick ranges</span>
+          </div>
+          <div className="popover-box__body gf-timepicker-relative-section">
+            {Object.keys(timeOptions).map(section => {
+              const group = timeOptions[section];
+              return (
+                <ul key={section}>
+                  {group.map(option => (
+                    <li className={option.active ? 'active' : ''} key={option.display}>
+                      <a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
+                    </li>
+                  ))}
+                </ul>
+              );
+            })}
           </div>
+        </div>
 
-          <label className="small">To:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <input
-                type="text"
-                className="gf-form-input input-large timepicker-to"
-                value={toRaw}
-                onChange={this.handleChangeTo}
-              />
-            </div>
+        <div className="popover-box">
+          <div className="popover-box__header">
+            <span className="popover-box__title">Custom range</span>
           </div>
+          <div className="popover-box__body gf-timepicker-absolute-section">
+            <label className="small">From:</label>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-28">
+                <input
+                  type="text"
+                  className="gf-form-input input-large timepicker-from"
+                  value={fromRaw}
+                  onChange={this.handleChangeFrom}
+                />
+              </div>
+            </div>
 
-          {/* <label className="small">Refreshing every:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <select className="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+            <label className="small">To:</label>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-28">
+                <input
+                  type="text"
+                  className="gf-form-input input-large timepicker-to"
+                  value={toRaw}
+                  onChange={this.handleChangeTo}
+                />
+              </div>
+            </div>
+            <div className="gf-form">
+              <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
+                Apply
+              </button>
             </div>
-          </div> */}
-          <div className="gf-form">
-            <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
-              Apply
-            </button>
           </div>
         </div>
-
-        <div className="gf-timepicker-relative-section">
-          <h3 className="section-heading">Quick ranges</h3>
-          {Object.keys(timeOptions).map(section => {
-            const group = timeOptions[section];
-            return (
-              <ul key={section}>
-                {group.map(option => (
-                  <li className={option.active ? 'active' : ''} key={option.display}>
-                    <a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
-                  </li>
-                ))}
-              </ul>
-            );
-          })}
-        </div>
       </div>
     );
   }

public/sass/_grafana.scss

@@ -104,6 +104,7 @@
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';
+@import 'components/popover-box';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_popover-box.scss

@@ -0,0 +1,31 @@
+.popover-box {
+  background-color: $popover-bg;
+  color: $popover-color;
+  border: 1px solid $popover-border-color;
+  border-radius: $border-radius;
+  max-width: 500px;
+}
+
+.popover-box__header {
+  background-color: $popover-border-color;
+  padding: 6px 10px;
+  display: flex;
+}
+
+.popover-box__title {
+  font-weight: $font-weight-semi-bold;
+  padding-right: $spacer;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.popover-box__body {
+  padding: 20px 10px 10px 10px;
+}
+
+.popover-box__close {
+  cursor: pointer;
+}

public/sass/components/_thresholds.scss

@@ -66,9 +66,6 @@
   padding: 5px 8px;
 }
 
-.threshold-row-base {
-}
-
 .threshold-row-remove {
   display: flex;
   align-items: center;

public/sass/components/_timepicker.scss

@@ -13,23 +13,28 @@
 }
 
 .gf-timepicker-dropdown {
-  position: absolute;
-  top: $navbarHeight;
-  right: 0;
-  padding: 10px 20px;
   background-color: $page-bg;
   border-radius: 0 0 0 4px;
   box-shadow: $search-shadow;
   z-index: $zindex-dropdown;
-}
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 20px;
+  top: $navbarHeight;
+  width: 550px;
 
-.gf-timepicker-absolute-section {
-  width: 290px;
-  float: left;
-  padding: 0 10px;
-  select {
-    width: 183px;
-    margin-bottom: 0;
+  .popover-box {
+    max-width: 100%;
+
+    &:first-child {
+      border-radius: $border-radius $border-radius 0 0;
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $border-radius $border-radius;
+    }
   }
 }
 
@@ -48,9 +53,9 @@
 }
 
 .gf-timepicker-relative-section {
-  padding: 0 20px 0 30px;
   min-height: 237px;
   float: left;
+
   ul {
     list-style: none;
     float: left;