Fix positioning of CustomTimeIndicator

ui/src/shared/components/LayoutCell.js

@@ -57,6 +57,7 @@ class LayoutCell extends Component {
         <Authorized requiredRole={EDITOR_ROLE}>
           <LayoutCellMenu
             cell={cell}
+            queries={queries}
             dataExists={!!celldata.length}
             isDeleting={isDeleting}
             isEditable={isEditable}
@@ -67,11 +68,7 @@ class LayoutCell extends Component {
             onCSVDownload={this.handleCSVDownload}
           />
         </Authorized>
-        <LayoutCellHeader
-          queries={queries}
-          cellName={cell.name}
-          isEditable={isEditable}
-        />
+        <LayoutCellHeader cellName={cell.name} isEditable={isEditable} />
         <div className="dash-graph--container">
           {queries.length
             ? children

ui/src/shared/components/LayoutCellHeader.js

@@ -1,14 +1,11 @@
 import React, {PropTypes} from 'react'
-
-import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
-
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 
-const LayoutCellHeader = ({queries, isEditable, cellName}) => {
+const LayoutCellHeader = ({isEditable, cellName}) => {
   const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
 
   const headingClass = `dash-graph--heading ${isEditable
-    ? 'dash-graph--heading-draggable'
+    ? 'dash-graph--draggable dash-graph--heading-draggable'
     : ''}`
 
   return (
@@ -21,20 +18,14 @@ const LayoutCellHeader = ({queries, isEditable, cellName}) => {
         }
       >
         {cellName}
-        <div className="dash-graph--custom-indicators">
-          {queries && queries.length
-            ? <CustomTimeIndicator queries={queries} />
-            : null}
-        </div>
       </span>
     </div>
   )
 }
 
-const {arrayOf, bool, shape, string} = PropTypes
+const {bool, string} = PropTypes
 
 LayoutCellHeader.propTypes = {
-  queries: arrayOf(shape()),
   isEditable: bool,
   cellName: string,
 }

ui/src/shared/components/LayoutCellMenu.js

@@ -1,61 +1,62 @@
 import React, {PropTypes} from 'react'
 import OnClickOutside from 'react-onclickoutside'
+import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
 
 const LayoutCellMenu = OnClickOutside(
   ({
-    isDeleting,
-    onEdit,
-    onDeleteClick,
-    onDelete,
-    onCSVDownload,
-    dataExists,
     cell,
+    onEdit,
+    queries,
+    onDelete,
+    isEditable,
+    dataExists,
+    isDeleting,
+    onDeleteClick,
+    onCSVDownload,
   }) =>
-    <div
-      className={
-        isDeleting
-          ? 'dash-graph-context dash-graph-context__deleting'
-          : 'dash-graph-context'
-      }
-    >
-      <div className="dash-graph-context--button" onClick={onEdit(cell)}>
-        <span className="icon pencil" />
+    <div className="dash-graph-context">
+      <div
+        className={`${isEditable
+          ? 'dash-graph--custom-indicators dash-graph--draggable'
+          : 'dash-graph--custom-indicators'}`}
+      >
+        {queries && queries.length && <CustomTimeIndicator queries={queries} />}
       </div>
-      {dataExists
-        ? <div
-            className="dash-graph-context--button"
-            onClick={onCSVDownload(cell)}
-          >
-            <span className="icon download" />
+      {isEditable &&
+        <div clasnName="dash-graph--buttons">
+          <div className="dash-graph-context--button" onClick={onEdit(cell)}>
+            <span className="icon pencil" />
           </div>
-        : null}
-      {isDeleting
-        ? <div className="dash-graph-context--button active">
-            <span className="icon trash" />
+          {dataExists &&
             <div
-              className="dash-graph-context--confirm"
-              onClick={onDelete(cell)}
+              className="dash-graph-context--button"
+              onClick={onCSVDownload(cell)}
             >
-              Confirm
-            </div>
-          </div>
-        : <div className="dash-graph-context--button" onClick={onDeleteClick}>
-            <span className="icon trash" />
-          </div>}
+              <span className="icon download" />
+            </div>}
+          {isDeleting
+            ? <div className="dash-graph-context--button active">
+                <span className="icon trash" />
+                <div
+                  className="dash-graph-context--confirm"
+                  onClick={onDelete(cell)}
+                >
+                  Confirm
+                </div>
+              </div>
+            : <div
+                className="dash-graph-context--button"
+                onClick={onDeleteClick}
+              >
+                <span className="icon trash" />
+              </div>}
+        </div>}
     </div>
 )
 
-const LayoutCellMenuContainer = props => {
-  if (!props.isEditable) {
-    return null
-  }
+const {arrayOf, bool, func, shape} = PropTypes
 
-  return <LayoutCellMenu {...props} />
-}
-
-const {bool, func, shape} = PropTypes
-
-LayoutCellMenuContainer.propTypes = {
+LayoutCellMenu.propTypes = {
   isDeleting: bool,
   onEdit: func,
   onDelete: func,
@@ -63,8 +64,7 @@ LayoutCellMenuContainer.propTypes = {
   cell: shape(),
   isEditable: bool,
   dataExists: bool,
+  queries: arrayOf(shape()),
 }
 
-LayoutCellMenu.propTypes = LayoutCellMenuContainer.propTypes
-
-export default LayoutCellMenuContainer
+export default LayoutCellMenu

ui/src/shared/components/LayoutRenderer.js

@@ -106,7 +106,7 @@ class LayoutRenderer extends Component {
             useCSSTransforms={false}
             onResize={this.handleCellResize}
             onLayoutChange={this.handleLayoutChange}
-            draggableHandle={'.dash-graph--name'}
+            draggableHandle={'.dash-graph--draggable'}
             isDraggable={isDashboard}
             isResizable={isDashboard}
           >

ui/src/style/pages/dashboards.scss

@@ -186,13 +186,15 @@ $dash-graph-options-arrow: 8px;
 .dash-graph--name.dash-graph--name__default {
   font-style: italic;
 }
+.dash-graph--draggable {
+  cursor: move !important;
+}
 .dash-graph--custom-indicators {
   height: 24px;
   border-radius: 3px;
-  position: absolute;
   top: 3px;
-  right: 0;
   display: flex;
+  cursor: default;
 
   > .custom-indicator,
   > .source-indicator {
@@ -225,6 +227,9 @@ $dash-graph-options-arrow: 8px;
   align-items: center;
   flex-wrap: nowrap;
 }
+.dash-graph-context--buttons {
+  display: flex;
+}
 .dash-graph-context--button {
   width: 24px;
   height: 24px;