Improve styles for customize fields dragging and visibility

Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>

ui/src/dashboards/components/GraphOptionsCustomizableField.tsx

@@ -128,31 +128,40 @@ export default class GraphOptionsCustomizableField extends PureComponent<
       connectDropTarget,
       visible,
     } = this.props
-    const opacity = isDragging ? 0.2 : 1
+
+    const fieldClass = `customizable-field${isDragging ? ' dragging' : ''}`
+    const labelClass = `${
+      visible
+        ? 'customizable-field--label'
+        : 'customizable-field--label__hidden'
+    }`
+
+    const visibilityTitle = visible
+      ? `Click to HIDE ${internalName}`
+      : `Click to SHOW ${internalName}`
+
     return connectDragPreview(
       connectDropTarget(
-        <div className="customizable-field">
+        <div className={fieldClass}>
-          <div
+          <div className={labelClass}>
-            style={{opacity}}
+            {connectDragSource(
-            className={
+              <div className="customizable-field--drag">
-              visible
+                <span className="hamburger" />
-                ? 'customizable-field--label'
+              </div>
-                : 'customizable-field--label__hidden'
+            )}
-            }
+            <div
-            onClick={this.handleToggleVisible}
+              className="customizable-field--visibility"
-            title={
+              onClick={this.handleToggleVisible}
-              visible
+              title={visibilityTitle}
-                ? `Click to HIDE ${internalName}`
+            >
-                : `Click to SHOW ${internalName}`
+              <span className={visible ? 'icon eye-open' : 'icon eye-closed'} />
-            }
+            </div>
-          >
+            <div className="customizable-field--name">{internalName}</div>
-            {connectDragSource(<span className={'icon shuffle'} />)}
-            <span className={visible ? 'icon eye-open' : 'icon eye-closed'} />
-            {internalName}
           </div>
           <input
-            className="customizable-field--input"
+            className="form-control input-sm customizable-field--input"
             type="text"
+            spellCheck={false}
             id="internalName"
             value={displayName}
             onBlur={this.handleFieldRename}

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

@@ -15,21 +15,28 @@
   &:first-of-type {
     margin-top: 0;
   }
+
+  &.dragging {
+    border-radius: 4px;
+    opacity: 0.25;
+    @include gradient-h($c-pool, $c-star);
+
+    > * {
+      opacity: 0;
+    }
+  }
 }
 
 .customizable-field--label,
 .customizable-field--label__hidden {
   @include no-user-select();
   height: 30px;
-  line-height: 30px;
+  display: flex;
-  font-weight: 600;
+  flex-wrap: nowrap;
-  font-size: 13px;
+  align-items: center;
-  padding: 0 11px;
+  padding: 0 11px 0 0;
   border-radius: 4px;
   width: 60%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   transition: background-color 0.25s ease, color 0.25s ease;
 
   > span {
@@ -40,24 +47,12 @@
 .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;
+  color: $g7-graphite;
   font-style: italic;
-
-  &:hover {
-    cursor: pointer;
-    background-color: $g5-pepper;
-    color: $g13-mist;
-  }
 }
 
 .customizable-field--input {
@@ -72,3 +67,67 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.customizable-field--name {
+  flex: 1 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  font-size: 13px;
+  margin-left: 6px;
+}
+.customizable-field--drag,
+.customizable-field--visibility {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+.customizable-field--visibility {
+  width: 18px;
+}
+.customizable-field--drag .hamburger,
+.customizable-field--visibility .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.customizable-field--drag .hamburger {
+  width: 10px;
+  height: 2px;
+  background-color: $g11-sidewalk;
+  transition: background-color 0.25s ease;
+  border-radius: 1px;
+
+  &:before,
+  &:after {
+    position: absolute;
+    display: block;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: $g11-sidewalk;
+    transition: background-color 0.25s ease;
+    border-radius: 1px;
+    left: 0;
+  }
+  &:before {
+    top: -4px;
+  }
+  &:after {
+    top: 4px;
+  }
+}
+
+.customizable-field--label__hidden .customizable-field--drag .hamburger {
+  &,
+  &:before,
+  &:after {
+    background-color: $g7-graphite;
+  }
+}