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
+
-    return connectDragPreview(
+    const fieldClass = `customizable-field${isDragging ? ' dragging' : ''}`
-      connectDropTarget(
+    const labelClass = `${
-        <div className="customizable-field">
-          <div
-            style={{opacity}}
-            className={
       visible
         ? 'customizable-field--label'
         : 'customizable-field--label__hidden'
-            }
+    }`
-            onClick={this.handleToggleVisible}
+
-            title={
+    const visibilityTitle = visible
-              visible
       ? `Click to HIDE ${internalName}`
       : `Click to SHOW ${internalName}`
-            }
+
+    return connectDragPreview(
+      connectDropTarget(
+        <div className={fieldClass}>
+          <div className={labelClass}>
+            {connectDragSource(
+              <div className="customizable-field--drag">
+                <span className="hamburger" />
+              </div>
+            )}
+            <div
+              className="customizable-field--visibility"
+              onClick={this.handleToggleVisible}
+              title={visibilityTitle}
             >
-            {connectDragSource(<span className={'icon shuffle'} />)}
               <span className={visible ? 'icon eye-open' : 'icon eye-closed'} />
-            {internalName}
+            </div>
+            <div className="customizable-field--name">{internalName}</div>
           </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;
+  }
+}