Merge pull request #3040 from influxdata/style/table-customizable-fields

Polish Customizable Fields UI

ui/src/dashboards/components/GraphOptionsCustomizableField.tsx

@@ -37,23 +37,28 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
     const {internalName, displayName, visible} = this.props
 
     return (
-      <div className="field-controls--section">
+      <div className="customizable-field">
         <div
           className={
-            visible ? 'field-controls--label' : 'field-controls--label-hidden'
+            visible
+              ? 'customizable-field--label'
+              : 'customizable-field--label__hidden'
+          }
+          onClick={this.handleToggleVisible}
+          title={
+            visible
+              ? `Click to HIDE ${internalName}`
+              : `Click to SHOW ${internalName}`
           }
         >
-          <span
-            className={visible ? 'icon eye-open' : 'icon eye-closed'}
-            onClick={this.handleToggleVisible}
-          />
+          <span className={visible ? 'icon eye-open' : 'icon eye-closed'} />
           {internalName}
         </div>
         <InputClickToEdit
           value={displayName}
-          wrapperClass="field-controls-input"
+          wrapperClass="customizable-field--input"
           onBlur={this.handleFieldRename}
-          placeholder="Rename..."
+          placeholder={`Rename ${internalName}`}
           appearAsNormalInput={true}
           disabled={!visible}
         />

ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx

@@ -1,5 +1,6 @@
 import React, {SFC} from 'react'
 
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
 import uuid from 'uuid'
 
@@ -18,7 +19,11 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
   return (
     <div className="graph-options-group">
       <label className="form-label">Customize Fields</label>
-      <div className="field-controls--group">
+      <FancyScrollbar
+        className="customize-fields"
+        maxHeight={225}
+        autoHeight={true}
+      >
         {fields.map(field => {
           return (
             <GraphOptionsCustomizableField
@@ -30,7 +35,7 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
             />
           )
         })}
-      </div>
+      </FancyScrollbar>
     </div>
   )
 }

ui/src/style/chronograf.scss

@@ -21,8 +21,8 @@
 @import 'external/fixed-data-table-base';
 @import 'external/fixed-data-table-style';
 @import 'external/fixed-data-table';
-@import "external/codemirror";
-@import "../../node_modules/codemirror/theme/material.css";
+@import 'external/codemirror';
+@import '../../node_modules/codemirror/theme/material.css';
 
 // Layout
 @import 'layout/page';
@@ -41,6 +41,7 @@
 @import 'components/confirm-button';
 @import 'components/confirm-buttons';
 @import 'components/custom-time-range';
+@import 'components/customize-fields';
 @import 'components/dygraphs';
 @import 'components/fancy-scrollbars';
 @import 'components/fancy-table';

ui/src/style/components/ceo-display-options.scss

@@ -76,9 +76,7 @@ $graph-type--gutter: 4px;
     position: absolute;
     top: $graph-type--gutter / 2;
     left: $graph-type--gutter / 2;
-    transition:
-      color 0.25s ease,
-      border-color 0.25s ease,
+    transition: color 0.25s ease, border-color 0.25s ease,
       background-color 0.25s ease;
 
     &:hover {
@@ -145,35 +143,69 @@ $graph-type--gutter: 4px;
   stroke-miterlimit: 10;
   // transition: all 0.5s ease;
 
-  &.graphic-line-a {stroke: $g11-sidewalk;}
-  &.graphic-line-b {stroke: $g9-mountain;}
-  &.graphic-line-c {stroke: $g7-graphite;}
-  &.graphic-line-d {stroke: $g13-mist;}
+  &.graphic-line-a {
+    stroke: $g11-sidewalk;
+  }
+  &.graphic-line-b {
+    stroke: $g9-mountain;
+  }
+  &.graphic-line-c {
+    stroke: $g7-graphite;
+  }
+  &.graphic-line-d {
+    stroke: $g13-mist;
+  }
 }
 .viz-type-selector--graphic-fill {
   opacity: 0.045;
   // transition: opacity 0.5s ease;
 
-  &.graphic-fill-a {fill: $g11-sidewalk;}
-  &.graphic-fill-b {fill: $g9-mountain;}
-  &.graphic-fill-c {fill: $g7-graphite;}
-  &.graphic-fill-d {fill: $g13-mist; opacity: 1;}
+  &.graphic-fill-a {
+    fill: $g11-sidewalk;
+  }
+  &.graphic-fill-b {
+    fill: $g9-mountain;
+  }
+  &.graphic-fill-c {
+    fill: $g7-graphite;
+  }
+  &.graphic-fill-d {
+    fill: $g13-mist;
+    opacity: 1;
+  }
 }
 .viz-type-selector--option.active .viz-type-selector--graphic {
-  .viz-type-selector--graphic-line.graphic-line-a {stroke: $c-pool;}
-  .viz-type-selector--graphic-line.graphic-line-b {stroke: $c-dreamsicle;}
-  .viz-type-selector--graphic-line.graphic-line-c {stroke: $c-rainforest;}
-  .viz-type-selector--graphic-line.graphic-line-d {stroke: $g17-whisper;}
-  .viz-type-selector--graphic-fill.graphic-fill-a {fill: $c-pool;}
-  .viz-type-selector--graphic-fill.graphic-fill-b {fill: $c-dreamsicle;}
-  .viz-type-selector--graphic-fill.graphic-fill-c {fill: $c-rainforest;}
+  .viz-type-selector--graphic-line.graphic-line-a {
+    stroke: $c-pool;
+  }
+  .viz-type-selector--graphic-line.graphic-line-b {
+    stroke: $c-dreamsicle;
+  }
+  .viz-type-selector--graphic-line.graphic-line-c {
+    stroke: $c-rainforest;
+  }
+  .viz-type-selector--graphic-line.graphic-line-d {
+    stroke: $g17-whisper;
+  }
+  .viz-type-selector--graphic-fill.graphic-fill-a {
+    fill: $c-pool;
+  }
+  .viz-type-selector--graphic-fill.graphic-fill-b {
+    fill: $c-dreamsicle;
+  }
+  .viz-type-selector--graphic-fill.graphic-fill-c {
+    fill: $c-rainforest;
+  }
   .viz-type-selector--graphic-fill.graphic-fill-a,
   .viz-type-selector--graphic-fill.graphic-fill-b,
-  .viz-type-selector--graphic-fill.graphic-fill-c {opacity: 0.22;}
-  .viz-type-selector--graphic-fill.graphic-fill-d {fill: $g17-whisper; opacity: 1;}
+  .viz-type-selector--graphic-fill.graphic-fill-c {
+    opacity: 0.22;
+  }
+  .viz-type-selector--graphic-fill.graphic-fill-d {
+    fill: $g17-whisper;
+    opacity: 1;
+  }
 }
-
-
 
 .display-options--cell .form-group .nav.nav-tablist {
   display: flex;
@@ -196,8 +228,6 @@ $graph-type--gutter: 4px;
   @include no-user-select();
 }
 
-
-
 /*
   Cell Editor Overlay - Gauge Controls
   ------------------------------------------------------------------------------
@@ -206,8 +236,7 @@ $graph-type--gutter: 4px;
   width: 100%;
 }
 
-.gauge-controls--section,
-.field-controls--section {
+.gauge-controls--section {
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
@@ -256,34 +285,6 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
   flex: 1 0 0;
 }
 
-.field-controls--group {
-  max-height: 235px;
-  overflow-y: scroll;
-}
-.field-controls--label, .field-controls--label-hidden {
-  @extend %gauge-controls-label-styles;
-  color: $g16-pearl;
-  background-color: $g4-onyx;
-  flex: 2 0 0;
-
-  > span {
-    padding-right: 5px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-.field-controls--label-hidden {
-  color: $g0-obsidian;
-}
-.field-controls-input {
-  flex: 1 0 0;
-  display: flex;
-  align-items: center;
-}
-
-
 /*
   Cell Editor Overlay - Single-Stat Controls
   ------------------------------------------------------------------------------

ui/src/style/components/customize-fields.scss

@@ -0,0 +1,73 @@
+/*
+    Customize Fields
+    ----------------------------------------------------------------------------
+    Primarily used within Table Options inside Cell Editor Overlay
+*/
+
+.customizable-field {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 30px;
+  margin-top: 8px;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.customizable-field--label,
+.customizable-field--label__hidden {
+  @include no-user-select();
+  height: 30px;
+  line-height: 30px;
+  font-weight: 600;
+  font-size: 13px;
+  padding: 0 11px;
+  border-radius: 4px;
+  width: 60%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color 0.25s ease, color 0.25s ease;
+
+  > span {
+    margin-right: 5px;
+  }
+}
+
+.customizable-field--label {
+  color: $g14-chromium;
+  background-color: $g5-pepper;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $g6-smoke;
+    color: $g17-whisper;
+  }
+}
+
+.customizable-field--label__hidden {
+  background-color: $g4-onyx;
+  color: $g8-storm;
+  font-style: italic;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $g5-pepper;
+    color: $g13-mist;
+  }
+}
+
+.customizable-field--input {
+  margin-left: 4px;
+  width: calc(40% - 4px);
+  display: flex;
+  align-items: center;
+}
+.customizable-field .input-cte__empty {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

ui/test/dashboards/components/GraphOptionsCustomizeFields.test.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
 import GraphOptionsCustomizeFields from 'src/dashboards/components/GraphOptionsCustomizeFields'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 
 const setup = (override = {}) => {
@@ -24,10 +25,12 @@ describe('Dashboards.Components.GraphOptionsCustomizableField', () => {
       const {wrapper} = setup({fields})
       const label = wrapper.find('label')
       const CustomizableFields = wrapper.find(GraphOptionsCustomizableField)
+      const Scrollbox = wrapper.find(FancyScrollbar)
 
       expect(label.exists()).toBe(true)
       expect(CustomizableFields.exists()).toBe(true)
       expect(CustomizableFields.length).toBe(fields.length)
+      expect(Scrollbox.exists()).toBe(true)
     })
   })
 })