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

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

@@ -24,9 +24,24 @@
 </div>
 </div>
 
 
 <div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
 <div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
-  <form name="timeForm" class="gf-timepicker-absolute-section">
-    <h3 class="section-heading">Custom range</h3>
+  <div class="popover-box">
+    <div class="popover-box__header">
+      <span class="popover-box__title">Quick ranges</span>
+    </div>
+    <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>
 
 
+  <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>
       <label class="small">From:</label>
       <div class="gf-form-inline">
       <div class="gf-form-inline">
         <div class="gf-form max-width-28">
         <div class="gf-form max-width-28">
@@ -70,14 +85,6 @@
         </div>
         </div>
       </div>
       </div>
     </form>
     </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>
   </div>
   </div>
 </div>
 </div>
 
 

public/app/features/explore/TimePicker.tsx

@@ -232,9 +232,31 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
     const timeOptions = this.getTimeOptions();
     const timeOptions = this.getTimeOptions();
     return (
     return (
       <div ref={this.dropdownRef} className="gf-timepicker-dropdown">
       <div ref={this.dropdownRef} className="gf-timepicker-dropdown">
-        <div className="gf-timepicker-absolute-section">
-          <h3 className="section-heading">Custom range</h3>
+        <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>
 
 
+        <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>
             <label className="small">From:</label>
             <div className="gf-form-inline">
             <div className="gf-form-inline">
               <div className="gf-form max-width-28">
               <div className="gf-form max-width-28">
@@ -258,34 +280,12 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
                 />
                 />
               </div>
               </div>
             </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>
-            </div>
-          </div> */}
             <div className="gf-form">
             <div className="gf-form">
               <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
               <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
                 Apply
                 Apply
               </button>
               </button>
             </div>
             </div>
           </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>
       </div>
       </div>
     );
     );

public/sass/_grafana.scss

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

public/sass/components/_popover-box.scss

+.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;
   padding: 5px 8px;
 }
 }
 
 
-.threshold-row-base {
-}
-
 .threshold-row-remove {
 .threshold-row-remove {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;

public/sass/components/_timepicker.scss

@@ -13,23 +13,28 @@
 }
 }
 
 
 .gf-timepicker-dropdown {
 .gf-timepicker-dropdown {
-  position: absolute;
-  top: $navbarHeight;
-  right: 0;
-  padding: 10px 20px;
   background-color: $page-bg;
   background-color: $page-bg;
   border-radius: 0 0 0 4px;
   border-radius: 0 0 0 4px;
   box-shadow: $search-shadow;
   box-shadow: $search-shadow;
   z-index: $zindex-dropdown;
   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 {
 .gf-timepicker-relative-section {
-  padding: 0 20px 0 30px;
   min-height: 237px;
   min-height: 237px;
   float: left;
   float: left;
+
   ul {
   ul {
     list-style: none;
     list-style: none;
     float: left;
     float: left;