Merge pull request #1357 from influxdata/template-control-bar-polish

Template Control Bar Polish

ui/src/dashboards/components/Dashboard.js

@@ -51,35 +51,37 @@ const Dashboard = ({
       )}
     >
       <div className="template-control-bar">
-        <div className="page-header__left">
-          Template Variables
-        </div>
-        <div className="page-header__right">
-          {templates.map(({id, values}) => {
-            const items = values.map(value => ({...value, text: value.value}))
-            const selectedItem = items.find(item => item.selected) || items[0]
-            const selectedText = selectedItem && selectedItem.text
+        <h1 className="template-control--heading">Template Variables</h1>
+        {templates.map(({id, values, tempVar}) => {
+          const items = values.map(value => ({...value, text: value.value}))
+          const selectedItem = items.find(item => item.selected) || items[0]
+          const selectedText = selectedItem && selectedItem.text
 
-            // TODO: change Dropdown to a MultiSelectDropdown, `selected` to
-            // the full array, and [item] to all `selected` values when we update
-            // this component to support multiple values
-            return (
+          // TODO: change Dropdown to a MultiSelectDropdown, `selected` to
+          // the full array, and [item] to all `selected` values when we update
+          // this component to support multiple values
+          return (
+            <div key={id} className="template-control--dropdown">
               <Dropdown
-                key={id}
                 items={items}
+                buttonSize="btn-xs"
                 selected={selectedText || 'Loading...'}
                 onChoose={item =>
                   onSelectTemplate(id, [item].map(x => omit(x, 'text')))}
               />
-            )
-          })}
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={onOpenTemplateManager}
-          >
-            Manage
-          </button>
-        </div>
+              <label className="template-control--label">
+                {tempVar}
+              </label>
+            </div>
+          )
+        })}
+        <button
+          className="btn btn-primary btn-sm template-control--manage"
+          onClick={onOpenTemplateManager}
+        >
+          <span className="icon cog-thick" />
+           Manage
+        </button>
       </div>
       {cells.length
         ? <LayoutRenderer

ui/src/style/components/template-control-bar.scss

@@ -0,0 +1,76 @@
+/*
+  Template Control Bar
+  ------------------------------------------------------
+  Used within a dashboard to control values for
+  template variables
+*/
+
+$template-control--margin: 2px;
+
+.template-control-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: $template-control--margin;
+  @extend .cell-shell;
+  background-color: $g0-obsidian;
+}
+.template-control--heading {
+  font-size: 16px;
+  font-weight: 500;
+  color: $g13-mist;
+  margin: 0 8px 0 16px;
+  @include no-user-select();
+  white-space: nowrap;
+}
+.template-control--manage {
+  margin: $template-control--margin 8px;
+}
+.template-control--dropdown {
+  flex: 0 1 auto;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: $template-control--margin;
+
+  .dropdown {
+    order: 2;
+    margin: 0;
+    flex: 1 0 0;
+  }
+
+  .dropdown-toggle {
+    border-radius: 0 0 $radius-small $radius-small;
+    width: 100%;
+    font-size: 12px;
+    font-family: $code-font;
+  }
+  .dropdown-menu {
+    @include gradient-h($c-star,$c-pool);
+    @include custom-scrollbar-round($c-pool,$c-laser);
+
+    > li > a {
+      &, &:active {background-color: transparent !important;}
+      font-size: 12px;
+      font-family: $code-font;
+    }
+    > li {
+      &:hover {@include gradient-h($c-comet,$c-pool);}
+    }
+  }
+} 
+.template-control--label {
+  @include no-user-select();
+  order: 1;
+  height: 18px;
+  padding: 0 8px;
+  margin: 0;
+  font-size: 11px;
+  font-family: $code-font;
+  color: $c-potassium;
+  line-height: 18px;
+  border-radius: $radius-small $radius-small 0 0;
+  background-color: $g4-onyx;
+}

ui/src/style/layout/page-header.scss

@@ -31,7 +31,6 @@ $page-header-weight: 400 !important;
 }
 .page-header__left,
 .page-header__right {
-  flex: 1 0 0;
   display: flex;
   align-items: center;
 

ui/src/style/modules/mixins.scss

@@ -70,7 +70,9 @@ $scrollbar-offset: 3px;
   &::-webkit-scrollbar {
     width: $scrollbar-width;
     border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
     border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
 
     &-button {
       background-color: $trackColor;

ui/src/style/pages/dashboards.scss

@@ -41,25 +41,6 @@ $dash-graph-options-arrow: 8px;
 }
 
 .dashboard {
-  .template-control-bar {
-    height: 50px;
-    font-size: 18px;
-    font-weight: 400;
-    color: $g14-chromium;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-    padding: 10px 15px;
-    @extend .cell-shell;
-    .dropdown {
-      flex: 0 1 auto;
-      min-width: 100px;
-    }
-    .dropdown-toggle {
-      width: 100%;
-    }
-  }
   .react-grid-item {
     @extend .cell-shell;
   }
@@ -376,6 +357,12 @@ $dash-graph-options-arrow: 8px;
   }
 }
 
+/*
+  Template Control Bar
+  ------------------------------------------------------
+*/
+@import '../components/template-control-bar';
+
 /*
   Overylay Technology (Cell Edit Mode)
   ------------------------------------------------------