From e022864326d1bd0eeac7fa62d793f7b7c76947c1 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 22 Mar 2018 18:21:34 -0700
Subject: [PATCH] Polish Customizable Fields UI

Also moving styles to own stylesheet
---
 .../GraphOptionsCustomizableField.tsx         |  19 +--
 .../GraphOptionsCustomizeFields.tsx           |   2 +-
 ui/src/style/chronograf.scss                  |   5 +-
 .../style/components/ceo-display-options.scss | 113 +++++++++---------
 ui/src/style/components/customize-fields.scss |  73 +++++++++++
 5 files changed, 146 insertions(+), 66 deletions(-)
 create mode 100644 ui/src/style/components/customize-fields.scss

diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
index 2e1904a63..9b600545f 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
@@ -37,21 +37,26 @@ 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..."
           appearAsNormalInput={true}
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
index c3eedae8f..5b7ea0e2f 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
+++ b/ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
@@ -18,7 +18,7 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
   return (
     <div className="graph-options-group">
       <label className="form-label">Customize Fields</label>
-      <div className="field-controls--group">
+      <div className="customize-fields">
         {fields.map(field => {
           return (
             <GraphOptionsCustomizableField
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index cb6e65671..a82bbefc0 100644
--- a/ui/src/style/chronograf.scss
+++ b/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';
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 526c6a462..d44d7d778 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/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 {
@@ -127,11 +125,11 @@ $graph-type--gutter: 4px;
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
 
   > svg,
   > svg * {
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
   }
   > svg {
     width: 100%;
@@ -145,36 +143,70 @@ $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;
   width: 100%;
@@ -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
   ------------------------------------------------------------------------------
diff --git a/ui/src/style/components/customize-fields.scss b/ui/src/style/components/customize-fields.scss
new file mode 100644
index 000000000..13644736b
--- /dev/null
+++ b/ui/src/style/components/customize-fields.scss
@@ -0,0 +1,73 @@
+/*
+    Customize Fields
+    ----------------------------------------------------------------------------
+    Primarily used within Table Options inside Cell Editor Overlay
+*/
+
+.customize-fields {
+  max-height: 235px;
+  overflow-y: scroll;
+}
+
+.customizable-field {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 30px;
+  margin-top: 8px;
+
+  > * {
+    margin-left: 4px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.customizable-field--label,
+.customizable-field--label__hidden {
+  height: 30px;
+  line-height: 30px;
+  font-weight: 600;
+  font-size: 13px;
+  padding: 0 11px;
+  border-radius: 4px;
+  flex: 2 0 0;
+  @include no-user-select();
+  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 {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+}