Move Rename Cell functionality to ContextMenu dropdown; Restyle cell header (#1199)

* Experiments

* Attach Cell Renaming to NameableGraph ContextMenu option

* Polish styles for Cell Name input field + draggable state

* Update CHANGELOG

CHANGELOG.md

@@ -34,6 +34,7 @@
   1. [#1124](https://github.com/influxdata/chronograf/pull/1124): Polished dashboard cell drag interaction, use Hover-To-Reveal UI pattern in all tables, Source Indicator & Graph Tips are no longer misleading, and aesthetic improvements to the DB Management page
   1. [#1187](https://github.com/influxdata/chronograf/pull/1187): Replace Kill Query confirmation modal with ConfirmButtons
   1. [#1185](https://github.com/influxdata/chronograf/pull/1185): Alphabetically sort Admin Database Page
+  1. [#1199](https://github.com/influxdata/chronograf/pull/1199): Move Rename Cell functionality to ContextMenu dropdown
 
 ## v1.2.0-beta7 [2017-03-28]
 ### Bug Fixes

ui/src/shared/components/LayoutRenderer.js

@@ -187,7 +187,7 @@ export const LayoutRenderer = React.createClass({
         useCSSTransforms={false}
         onResize={this.triggerWindowResize}
         onLayoutChange={this.handleLayoutChange}
-        draggableHandle={'.dash-graph--drag-handle'}
+        draggableHandle={'.dash-graph--name'}
         isDraggable={isDashboard}
         isResizable={isDashboard}
       >

ui/src/shared/components/NameableGraph.js

@@ -87,36 +87,34 @@ const NameableGraph = React.createClass({
         />
       )
     } else {
-      nameOrField = (<span className={classnames("dash-graph--name", {editable: !shouldNotBeEditable})}>{name}</span>)
+      nameOrField = (<span className="dash-graph--name">{name}</span>)
     }
 
-    let onClickHandler
+    let onStartRenaming
     if (!isEditing && isEditable) {
-      onClickHandler = onEditCell
+      onStartRenaming = onEditCell
     } else {
-      onClickHandler = () => {
+      onStartRenaming = () => {
         // no-op
       }
     }
 
     return (
       <div className="dash-graph">
-        <div className="dash-graph--heading">
+        <div className={classnames("dash-graph--heading", {"dash-graph--heading-draggable": !shouldNotBeEditable})}>{nameOrField}</div>
-          <div onClick={onClickHandler(x, y, isEditing)}>{nameOrField}</div>
+        {
-          {shouldNotBeEditable ? null : <div className="dash-graph--drag-handle"></div>}
+          shouldNotBeEditable ?
-          {
+          null :
-            shouldNotBeEditable ?
+          <ContextMenu
-              null :
+            isOpen={this.state.isMenuOpen}
-              <ContextMenu
+            toggleMenu={this.toggleMenu}
-                isOpen={this.state.isMenuOpen}
+            onEdit={onSummonOverlayTechnologies}
-                toggleMenu={this.toggleMenu}
+            onRename={onStartRenaming}
-                onEdit={onSummonOverlayTechnologies}
+            onDelete={onDeleteCell}
-                onDelete={onDeleteCell}
+            cell={cell}
-                cell={cell}
+            handleClickOutside={this.closeMenu}
-                handleClickOutside={this.closeMenu}
+          />
-              />
+        }
-          }
-        </div>
         <div className="dash-graph--container">
           {children}
         </div>
@@ -125,13 +123,14 @@ const NameableGraph = React.createClass({
   },
 })
 
-const ContextMenu = OnClickOutside(({isOpen, toggleMenu, onEdit, onDelete, cell}) => (
+const ContextMenu = OnClickOutside(({isOpen, toggleMenu, onEdit, onRename, onDelete, cell}) => (
   <div className={classnames("dash-graph--options", {"dash-graph--options-show": isOpen})} onClick={toggleMenu}>
     <button className="btn btn-info btn-xs">
       <span className="icon caret-down"></span>
     </button>
     <ul className="dash-graph--options-menu">
       <li onClick={() => onEdit(cell)}>Edit</li>
+      <li onClick={onRename(cell.x, cell.y, cell.isEditing)}>Rename</li>
       <li onClick={() => onDelete(cell)}>Delete</li>
     </ul>
   </div>

ui/src/style/pages/dashboards.scss

@@ -3,7 +3,8 @@
   ------------------------------------------------------
 */
 $dash-graph-heading: 30px;
-
+$dash-graph-heading-context: $dash-graph-heading - 8px;
+$dash-graph-options-arrow: 8px;
 
 /*
   Animations
@@ -98,112 +99,64 @@ $dash-graph-heading: 30px;
   left: 0;
   width: 100%;
   height: $dash-graph-heading;
-  padding: 0 16px;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-radius: $radius;
+  border-radius: $radius-small;
   font-weight: 600;
   font-size: 13px;
   color: $g14-chromium;
   transition:
     color 0.25s ease,
     background-color 0.25s ease;
-  &:hover {
+  &.dash-graph--heading-draggable:hover {
-    cursor: default;
-  }
-}
-.dash-graph--drag-handle {
-  height: $dash-graph-heading;
-  width: 100%;
-
-  &:before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    left: 0;
-    height: $dash-graph-heading;
-    background-color: $g5-pepper;
-    border-radius: 3px;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-  }
-  &:hover {
     cursor: move;
-  }
+    background-color: $g5-pepper;
-  &:hover:before {
-    opacity: 1;
   }
 }
 .dash-graph--name-edit,
 .dash-graph--name {
-  display: inline-block;
-  padding: 0 6px;
-  height: 26px !important;
-  line-height: (26px - 4px) !important;
   font-size: 13px;
   font-weight: 600;
-  position: relative;
-  left: -6px;
   border-radius: $radius;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .dash-graph--name {
+  height: $dash-graph-heading;
+  line-height: $dash-graph-heading;
+  width: calc(100% - 50px);
+  margin-left: 16px;
   transition:
     color 0.25s ease,
     background-color 0.25s ease,
     border-color 0.25s ease;
-  border: 2px solid transparent;
-  top: 2px;
-
-  &.editable {
-    &:after {
-      display: inline-block;
-      content: "\f058";
-      font-family: 'icomoon' !important;
-      font-style: normal;
-      font-weight: normal;
-      font-variant: normal;
-      line-height: 1;
-      text-transform: none;
-      color: $g11-sidewalk;
-      font-size: 14px;
-      opacity: 0;
-      transition: opacity 0.25s ease;
-      margin-left: 5px;
-    }
-
-    &:hover {
-      cursor: text;
-      color: $g20-white;
-
-      &:after {
-        opacity: 1;
-      }
-    }
-  }
 }
 .dash-graph--name-edit {
-  top: -1px;
+  margin-left: 8px;
-  width: 190px;
+  padding: 0 6px;
+  width: calc(100% - 42px);
+  height: 26px !important;
+  line-height: (26px - 4px) !important;
+  position: relative;
+  top: -1px; // Fix for slight offset
 }
 .dash-graph--options {
-  height: $dash-graph-heading;
+  width: $dash-graph-heading;
-  position: relative;
+  position: absolute;
-  width: ($dash-graph-heading - 8px);
+  z-index: 2;
-  right: -6px;
+  right: 0px;
+  top: 0px;
 
   > .btn {
     background-color: transparent !important;
     padding: 0;
     margin: 4px 0;
-    height: ($dash-graph-heading - 8px);
+    height: $dash-graph-heading-context;
-    width: ($dash-graph-heading - 8px);
+    width: $dash-graph-heading-context;
-    line-height: ($dash-graph-heading - 8px);
+    line-height: $dash-graph-heading-context;
     transition:
       background-color 0.25s ease,
       color 0.25s ease !important;
@@ -214,7 +167,6 @@ $dash-graph-heading: 30px;
     }
   }
 }
-$dash-graph-options-arrow: 8px;
 
 .presentation-mode .dash-graph--options {
   display: none;
@@ -351,9 +303,8 @@ $dash-graph-options-arrow: 8px;
       cursor: move;
     }
 
-    .dash-graph--drag-handle:before,
+    .dash-graph--heading {
-    .dash-graph--drag-handle:hover:before {
+      background-color: $g5-pepper;
-      opacity: 1 !important;
       cursor: move;
     }
   }