Merge pull request #1264 from influxdata/bugfix/query-template-ux

Polish meta queries UX

ui/src/style/pages/data-explorer/font-scale.scss

@@ -23,12 +23,6 @@ $breakpoint-c: 2100px;
 
 @media only screen and (min-width: $breakpoint-b) {
   .data-explorer {
-    .query-builder--tabs {
-      width: 320px;
-    }
-    .query-builder--tab-label {
-      width: (320px - 8px - 16px - 16px);
-    }
     .qeditor--list-item,
     .query-builder--tab-label {
       font-size: 15px;
@@ -54,45 +48,20 @@ $breakpoint-c: 2100px;
         width: 10px;
       }
     }
-    .query-builder--tabs-heading {
-      height: 80px;
-    }
-    .query-builder--query-preview pre {
-      height: calc(80px - 4px);
-    }
-    .query-builder--columns {
-      top: 80px;
-      height: calc(100% - 80px);
-    }
     .raw-text--field,
     .query-builder--query-preview pre,
     .query-builder--query-preview pre code {
       font-size: 14px !important;
       line-height: 16px !important;
     }
-    .raw-text--field {
-      height: 48px;
-      padding: 12px 10px 0 10px;
-    }
-    .raw-text--status {
-      height: 28px;
-      padding: 0 10px;
-    }
-    .query-builder--query-preview pre {
-      padding: 10px;
-    }
   }
 }
 @media only screen and (min-width: $breakpoint-c) {
   .data-explorer {
-    .query-builder--tabs {
-      width: 372px;
-    }
     .qeditor--list-item {
       letter-spacing: 0.3px;
     }
     .query-builder--tab-label {
-      width: (373px - 8px - 16px - 16px);
       font-size: 16px;
     }
     .query-builder--tab {

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

@@ -1,5 +1,6 @@
 /* Variables */
 $query-builder-tabs-width: 210px;
+$query-builder--column-heading-height: 50px;
 
 
 .query-builder {
@@ -23,7 +24,7 @@ $query-builder-tabs-width: 210px;
   border-radius: $radius 0 0 $radius;
 }
 .query-builder--tabs-heading {
-  height: 60px;
+  height: 90px;
   padding: 0 9px 0 16px;
   display: flex;
   align-items: center;
@@ -144,8 +145,6 @@ $query-builder-tabs-width: 210px;
   Tab Contents
   -------------------------------------------
 */
-$query-builder--preview-height: 60px;
-$query-builder--column-heading-height: 50px;
 
 .query-builder--tab-contents {
   flex: 1 0 0;
@@ -168,14 +167,14 @@ $query-builder--column-heading-height: 50px;
   pre {
     display: flex;
     align-items: center;
-    padding: 7px;
+    padding: 10px;
     border: 2px solid $query-editor-tab-inactive;
     background-color: $query-editor-tab-inactive;
     color: $c-pool;
     border-radius: $radius;
     margin-bottom: 0;
     overflow: auto;
-    height: ($query-builder--preview-height - 4px);
+    height: 86px;
     @include custom-scrollbar($query-editor-tab-inactive, $c-pool);
 
     code {
@@ -186,8 +185,8 @@ $query-builder--column-heading-height: 50px;
 .query-builder--columns {
   position: absolute;
   width: 100%;
-  height: calc(100% - #{$query-builder--preview-height});
+  height: calc(100% - 90px);
-  top: $query-builder--preview-height;
+  top: 90px;
 }
 .query-builder--column-heading {
   @include no-user-select();

ui/src/style/pages/data-explorer/raw-text.scss

@@ -1,3 +1,18 @@
+/*
+  Variables
+  -------------------------------------
+*/
+
+$raw-text-color: $c-pool;
+$raw-text-height: 52px;
+$raw-status-height: 34px;
+/* ^ These 2 should total to 86px */
+$query-template-dropdown-width: 135px;
+$query-template-dropdown-height: 22px;
+$query-template-dropdown-offset: 6px;
+$query-template-dropdown-menu-width: 200px;
+
+
 /*
   Dropping the metaphorical CSS nuke here,
   was experiencing some weird typographic jank
@@ -25,8 +40,6 @@
   text-shadow: none !important;
 }
 
-$raw-text-color: $c-pool;
-$raw-text-height: 42px;
 
 .raw-text--field {
   @include custom-scrollbar($g2-kevlar, $raw-text-color);
@@ -37,7 +50,7 @@ $raw-text-height: 42px;
   border: 2px solid $g2-kevlar;
   border-bottom: 0;
   color: $raw-text-color;
-  padding: 7px;
+  padding: 12px 10px 0 10px;
   border-radius: $radius $radius 0 0;
   margin: 0;
   transition:
@@ -71,13 +84,15 @@ $raw-text-height: 42px;
   }
 }
 .raw-text--status {
+  position: relative;
   width: 100%;
-  height: ($query-builder--preview-height - $raw-text-height);
+  height: $raw-status-height;
-  line-height: 12px;
+  line-height: $raw-status-height;
   font-size: 12px;
   background-color: $g2-kevlar;
   border: 2px solid $g2-kevlar;
-  padding: 0 7px;
+  padding: 0 10px;
+  padding-right: ($query-template-dropdown-width + ($query-template-dropdown-offset * 2)) !important;
   border-radius: 0 0 $radius $radius;
   border-top: 0;
   color: $g11-sidewalk;
@@ -108,13 +123,34 @@ $raw-text-height: 42px;
   &.raw-text--success {
     color: $c-rainforest;
   }
+
+  /* Loading State */
+  .loading-dots {
+    top: calc(50% + 2px);
+    left: 14px;
+    transform: translateY(-50%);
+  }
 }
 
 .dropdown.query-template {
   position: absolute;
-  top: 8px;
+  top: ($raw-text-height + (($raw-status-height - $query-template-dropdown-height) / 2));
-  right: 7px;
+  right: $query-template-dropdown-offset;
-  .dropdown-toggle {
+
-    width: 135px;
+  div.dropdown-toggle.btn.btn-sm {
+    width: $query-template-dropdown-width;
+    padding: 0 9px !important;
+    height: $query-template-dropdown-height !important;
+    line-height: $query-template-dropdown-height !important;
+    font-size: 12px;
+    border-radius: $radius-small;
+  }
+
+  .dropdown-menu {
+    left: initial;
+    right: 0;
+    width: $query-template-dropdown-menu-width;
+    min-width: $query-template-dropdown-menu-width;
+    max-width: $query-template-dropdown-menu-width;
   }
 }