Fix positioning of query editor list headers

measurements filter, group by time, and accept/reject

ui/src/data_explorer/components/MeasurementList.js

@@ -74,7 +74,7 @@ const MeasurementList = React.createClass({
       <div className="query-builder--column">
         <div className="query-builder--column-heading">Measurements</div>
         {this.props.query.database ? <div className="qeditor--list-header">
-          <input className="qeditor--filter" ref="filterText" placeholder="Filter Measurements..." type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
+          <input className="qeditor--filter" ref="filterText" placeholder="Filter" type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
           <span className="icon search"></span>
         </div> : null }
         {this.renderList()}

ui/src/style/pages/data-explorer/query-builder.scss

@@ -15,7 +15,7 @@
 // Tabs
 .query-builder--tabs {
   display: flex;
-  width: 190px;
+  width: 250px;
   flex-direction: column;
   align-items: stretch;
   @include gradient-v($g3-castle,$g1-raven);
@@ -23,7 +23,7 @@
 }
 .query-builder--tabs-heading {
   height: 60px;
-  padding: 0 9px;
+  padding: 0 9px 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -45,7 +45,7 @@
   background: transparent;
   height: 30px;
   cursor: pointer;
-  padding: 0 8px;
+  padding: 0 8px 0 16px;
   transition:
       color 0.25s ease,
       background-color 0.25s ease;
@@ -141,9 +141,10 @@
   Tab Contents
   -------------------------------------------
 */
+$query-builder--column-heading-height: 60px;
 .query-builder--tab-contents {
   width: 100%;
-  background-color: $g5-pepper;
+  background-color: $g4-onyx;
   border-radius: 0 $radius $radius 0;
   overflow: hidden;
   position: relative;
@@ -163,7 +164,7 @@
 }
 .query-builder--column-heading {
   width: 100%;
-  height: 30px;
+  height: $query-builder--column-heading-height;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -171,8 +172,8 @@
   font-weight: 600;
   color: $g13-mist;
   padding: 0 9px;
-  line-height: 30px;
-  border-bottom: 2px solid $g6-smoke;
+  line-height: $query-builder--column-heading-height;
+  border-bottom: 2px solid $g5-pepper;
 }
 .query-builder--column {
   position: absolute;
@@ -182,16 +183,16 @@
 
   .qeditor--list {
     position: absolute;
-    top: 30px;
-    height: calc(100% - 30px);
+    top: $query-builder--column-heading-height;
+    height: calc(100% - #{$query-builder--column-heading-height});
     width: 100%;
     left: 0;
     padding: 0;
     overflow: auto;
     overflow-x: hidden;
     overflow-y: scroll;
-    @include custom-scrollbar($g5-pepper,$c-pool);
-    background-color: $g5-pepper;
+    @include custom-scrollbar($g4-onyx,$c-pool);
+    background-color: $g4-onyx;
   }
 }
 .query-builder--column:nth-of-type(1) { left: 0; }

ui/src/style/pages/data-explorer/query-editor.scss

@@ -96,15 +96,15 @@ $query-editor-height: 250px;
       background-color 0.25s ease;
 
     &:hover {
-      background-color: $g4-onyx;
-      color: $g17-whisper;
+      background-color: $g6-smoke;
+      color: $g15-platinum;
       cursor: pointer;
     }
   }
   &-radio {
     &.active {
       color: $g20-white;
-      background-color: $g4-onyx;
+      background-color: $g6-smoke;
       font-weight: 700;
     }
   }
@@ -169,11 +169,18 @@ $query-editor-height: 250px;
       }
     }
   }
-  &-header {
-    position: relative;
-    background-color: $query-editor-tab-active;
-      padding: 8px 18px 0px 18px;
 }
+.qeditor--list-header {
+  position: absolute;
+  top: 15px;
+  right: 16px;
+  width: calc(60% - 16px);
+  height: 30px;
+  padding: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 // List empty state
@@ -209,7 +216,7 @@ $query-editor-height: 250px;
   height: 30px;
   border-radius: 15px;
   font-size: 13px;
-  padding-left: 38px;
+  padding-left: 28px;
   outline: none;
   color: $g20-white;
   font-weight: 700;
@@ -243,8 +250,8 @@ $query-editor-height: 250px;
   }
   + .icon {
     position: absolute;
-    top: calc(50% + 5px);
-    left: calc(19px * 2);
+    top: 50%;
+    left: 11px;
     transform: translateY(-50%);
     color: $g10-wolf;
     transition: color 0.25s ease;