diff --git a/app/components/SidebarRequestGroupRow.js b/app/components/SidebarRequestGroupRow.js
index 90bf852bc..7c0e8a9ae 100644
--- a/app/components/SidebarRequestGroupRow.js
+++ b/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})}>
-
-
diff --git a/app/components/SidebarRequestRow.js b/app/components/SidebarRequestRow.js
index f9a896377..d2517ee51 100644
--- a/app/components/SidebarRequestRow.js
+++ b/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 (
-
- db.requestCreate({parentId: requestGroup._id})}>
+ db.requestCreate({parentId: requestGroup._id})}>
click to add first request...
@@ -19,10 +20,15 @@ const SidebarRequestRow = ({request, requestGroup, isActive, activateRequest}) =
return (
-
-
-
{activateRequest(request)}}>
- {request.name}
+ {activateRequest(request)}}>
+
+
+ db.requestUpdate(request, {name})}
+ />
+
diff --git a/app/components/base/Editable.js b/app/components/base/Editable.js
new file mode 100644
index 000000000..17dfb5432
--- /dev/null
+++ b/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 (
+ this._handleEditKeyDown(e)}
+ onBlur={e => this._handleEditEnd()}
+ {...extra}
+ />
+ )
+ } else {
+ return (
+ this._handleEditStart()} {...extra}>{value}
+ )
+ }
+ }
+}
+
+Editable.propTypes = {
+ onSubmit: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired
+}
+
+export default Editable;
diff --git a/app/css/components/forms.scss b/app/css/components/forms.scss
index 90367d18d..286809a8f 100644
--- a/app/css/components/forms.scss
+++ b/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 {
diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss
index 16d39cda7..073ae45fc 100644
--- a/app/css/components/sidebar.scss
+++ b/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