Rename request in place

app/components/SidebarRequestGroupRow.js

@@ -1,14 +1,16 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
+
 import RequestGroupActionsDropdown from './../containers/RequestGroupActionsDropdown'
 import SidebarRequestRow from './SidebarRequestRow'
+import * as db from '../database'
 
 const SidebarRequestGroupRow = ({
   children,
   requestGroup,
   isActive,
   toggleRequestGroup,
-  addRequestToRequestGroup
+  addRequestToRequestGroup,
 }) => {
   let folderIconClass = 'fa-folder';
   let expanded = !requestGroup.collapsed;
@@ -20,10 +22,11 @@ const SidebarRequestGroupRow = ({
         className={classnames('sidebar__row', {active: isActive})}>
 
       <div className={classnames('sidebar__item sidebar__item--big', {active: isActive})}>
-
-        <button className="sidebar__clickable" onClick={e => toggleRequestGroup(requestGroup)}>
-          <i className={'fa ' + folderIconClass}></i>
-          &nbsp;&nbsp;&nbsp;{requestGroup.name}
+        <button onClick={e => toggleRequestGroup(requestGroup)}>
+          <div className="sidebar__clickable">
+            <i className={'sidebar__item__icon fa ' + folderIconClass}></i>
+            <span>{requestGroup.name}</span>
+          </div>
         </button>
 
         <div className="sidebar__actions">
@@ -35,7 +38,6 @@ const SidebarRequestGroupRow = ({
             right={true}
           />
         </div>
-
       </div>
 
       <ul className="sidebar__list">

app/components/SidebarRequestRow.js

@@ -1,16 +1,17 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import classnames from 'classnames'
 
-import RequestActionsDropdown from './../containers/RequestActionsDropdown'
+import RequestActionsDropdown from '../containers/RequestActionsDropdown'
+import Editable from './base/Editable'
 import MethodTag from './MethodTag'
 import * as db from '../database'
 
+
 const SidebarRequestRow = ({request, requestGroup, isActive, activateRequest}) => {
   if (!request) {
     return (
       <li className="sidebar__item">
-        <button className="sidebar__clickable"
-                onClick={() => db.requestCreate({parentId: requestGroup._id})}>
+        <button className="sidebar__clickable" onClick={() => db.requestCreate({parentId: requestGroup._id})}>
           <em>click to add first request...</em>
         </button>
       </li>
@@ -19,10 +20,15 @@ const SidebarRequestRow = ({request, requestGroup, isActive, activateRequest}) =
 
   return (
     <li className="sidebar__row">
-
       <div className={classnames('sidebar__item', {active: isActive})}>
-        <button className="sidebar__clickable" onClick={() => {activateRequest(request)}}>
-          <MethodTag method={request.method}/> {request.name}
+        <button onClick={() => {activateRequest(request)}}>
+          <div className="sidebar__clickable">
+            <MethodTag method={request.method}/>
+            <Editable
+              value={request.name}
+              onSubmit={name => db.requestUpdate(request, {name})}
+            />
+          </div>
         </button>
 
         <div className="sidebar__actions">

app/components/base/Editable.js

@@ -0,0 +1,63 @@
+import React, {Component, PropTypes} from 'react';
+import ReactDOM from 'react-dom'
+
+class Editable extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      editing: false
+    }
+  }
+
+  _handleEditStart () {
+    this.setState({editing: true});
+
+    setTimeout(() => {
+      this.refs.input && this.refs.input.focus();
+    });
+  }
+
+  _handleEditEnd () {
+    this.setState({editing: false})
+    this.props.onSubmit(this.refs.input.value);
+  }
+
+  _handleEditKeyDown (e) {
+    if (e.keyCode === 13) {
+      // Pressed Enter
+      this._handleEditEnd();
+    } else if (e.keyCode === 27) {
+      // Pressed Escape
+      this.refs.input && this.refs.input.blur();
+    }
+  }
+
+  render () {
+    const {value, ...extra} = this.props;
+    const {editing} = this.state;
+
+    if (editing) {
+      return (
+        <input
+          type="text"
+          ref="input"
+          defaultValue={value}
+          onKeyDown={e => this._handleEditKeyDown(e)}
+          onBlur={e => this._handleEditEnd()}
+          {...extra}
+        />
+      )
+    } else {
+      return (
+        <span onDoubleClick={e => this._handleEditStart()} {...extra}>{value}</span>
+      )
+    }
+  }
+}
+
+Editable.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired
+}
+
+export default Editable;

app/css/components/forms.scss

@@ -86,6 +86,7 @@ textarea, input, button {
   border: 0;
   outline: 0;
   margin: 0;
+  padding: 0;
   color: inherit;
 
   &::-webkit-input-placeholder {

app/css/components/sidebar.scss

@@ -115,11 +115,15 @@
     .tag {
       opacity: 0.5;
       padding-left: 0;
-      width: 3.25em;
       text-align: left;
+      width: 2.8em;
     }
   }
 
+  .sidebar__item__icon {
+    padding-right: $padding-sm;
+  }
+
   // put border on folders
 
   .sidebar__row:not(:first-child) .sidebar__item--big {
@@ -131,7 +135,9 @@
   // ~~~~~~~~~~~~~~~~~ //
 
   .sidebar__clickable {
-    // Nothing yet...
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
   }
 
   // Padding