Polish editable page header interactions

ui/src/dashboards/components/DashboardHeaderEdit.js

@@ -21,15 +21,15 @@ class DashboardEditHeader extends Component {
     return (
       <div className="page-header full-width">
         <div className="page-header__container">
-          <div className="page-header__left">
+          <input
-            <input
+            className="page-header--editing"
-              className="page-header--editing"
+            autoFocus={true}
-              autoFocus={true}
+            value={name}
-              value={name}
+            onChange={e => this.handleChange(e.target.value)}
-              placeholder="Name this Dashboard"
+            placeholder="Name this Dashboard"
-              onChange={e => this.handleChange(e.target.value)}
+            spellCheck={false}
-            />
+            autoComplete={false}
-          </div>
+          />
           <ConfirmButtons item={name} onConfirm={onSave} onCancel={onCancel} />
         </div>
       </div>

ui/src/kapacitor/components/RuleHeader.js

@@ -110,31 +110,31 @@ export const RuleHeader = React.createClass({
           onKeyDown={e => this.handleEditName(e, rule)}
           onBlur={() => this.handleEditNameBlur(rule)}
           placeholder="Name your rule"
+          spellCheck={false}
+          autoComplete={false}
         />
-      : <h1
+      : <div className="page-header__left">
-          className="page-header__title page-header--editable kapacitor-theme"
+          <h1
-          onClick={this.toggleEditName}
+            className="page-header__title page-header--editable kapacitor-theme"
-          data-for="rename-kapacitor-tooltip"
+            onClick={this.toggleEditName}
-          data-tip="Click to Rename"
+            data-for="rename-kapacitor-tooltip"
-        >
+            data-tip="Click to Rename"
-          {rule.name}
+          >
-          <span className="icon pencil" />
+            {rule.name}
-          <ReactTooltip
+            <span className="icon pencil" />
-            id="rename-kapacitor-tooltip"
+            <ReactTooltip
-            delayShow={200}
+              id="rename-kapacitor-tooltip"
-            effect="solid"
+              delayShow={200}
-            html={true}
+              effect="solid"
-            offset={{top: 2}}
+              html={true}
-            place="bottom"
+              offset={{top: 2}}
-            class="influx-tooltip kapacitor-tooltip place-bottom"
+              place="bottom"
-          />
+              class="influx-tooltip kapacitor-tooltip place-bottom"
-        </h1>
+            />
+          </h1>
+        </div>
 
-    return (
+    return name
-      <div className="page-header__left">
-        {name}
-      </div>
-    )
   },
 })
 

ui/src/shared/components/ConfirmButtons.js

@@ -1,11 +1,22 @@
 import React, {PropTypes} from 'react'
+import classnames from 'classnames'
 
-const ConfirmButtons = ({onConfirm, item, onCancel}) => (
+const ConfirmButtons = ({onConfirm, item, onCancel, buttonSize}) => (
   <div className="confirm-buttons">
-    <button className="btn btn-xs btn-info" onClick={() => onCancel(item)}>
+    <button
+      className={classnames('btn btn-info btn-square', {
+        [buttonSize]: buttonSize,
+      })}
+      onClick={() => onCancel(item)}
+    >
       <span className="icon remove" />
     </button>
-    <button className="btn btn-xs btn-success" onClick={() => onConfirm(item)}>
+    <button
+      className={classnames('btn btn-success btn-square', {
+        [buttonSize]: buttonSize,
+      })}
+      onClick={() => onConfirm(item)}
+    >
       <span className="icon checkmark" />
     </button>
   </div>
@@ -17,6 +28,10 @@ ConfirmButtons.propTypes = {
   onConfirm: func.isRequired,
   item: oneOfType([shape(), string]),
   onCancel: func.isRequired,
+  buttonSize: string,
 }
 
+ConfirmButtons.defaultProps = {
+  buttonSize: 'btn-sm',
+}
 export default ConfirmButtons

ui/src/style/components/page-header-dropdown.scss

@@ -2,12 +2,14 @@
   .dropdown-toggle {
     height: 38px;
     padding-left: 0;
+    padding-right: (11px + 12px); // caret width + offset
+    padding-top: 0;
+    padding-bottom: 0;
     min-width: 50px;
     width: auto;
     border: 0;
     background-color: transparent;
     text-transform: none;
-    padding-right: (11px + 12px); // caret width + offset
     font-size: $page-header-size;
     font-weight: $page-header-weight;
     transition: color 0.25s ease;
@@ -39,4 +41,4 @@
       @include no-user-select();
     }
   }
-}
+}

ui/src/style/components/page-header-editable.scss

@@ -27,8 +27,6 @@
   font-weight: $page-header-weight;
   padding: 0;
   flex: 1;
-  position: relative;
-  top: -1px;
 
   &:focus {
     color: $c-pool;