Bringing the add button, add input, and a blank state to the menu

toggle component.
Automattic · Dec 2, 2015 · 0452fb2 · 0452fb2
1 parent 492b993
commit 0452fb2
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 186 deletions.
diff --git a/client/reader/sidebar/_style.scss b/client/reader/sidebar/_style.scss
@@ -70,7 +70,8 @@
 			}
 		}
 
-		.sidebar-menu__list {
+		.sidebar-menu__list,
+		.sidebar-menu__empty {
 			height: 0;
 			overflow: hidden;
 		}
@@ -100,9 +101,11 @@
 				transform: translateX( 0 );
 			}
 
-			.sidebar-menu__list {
+			.sidebar-menu__list,
+			.sidebar-menu__empty {
 				height: auto;
-				padding: 8px 0;
+				padding-top: 8px;
+				padding-bottom: 8px;
 			}
 
 			.sidebar-menu__item {
@@ -124,7 +127,8 @@
 
 	.sidebar-menu__empty,
 	.sidebar-menu__empty:hover {
-		padding: 0 32px 0 55px;
+		padding-right: 32px;
+		padding-left: 55px;
 		font-size: 13px;
 		color: $gray-dark;
 		background-color: transparent !important; // needs to be more specific

diff --git a/client/reader/sidebar/menu.jsx b/client/reader/sidebar/menu.jsx
@@ -8,18 +8,22 @@ const React = require( 'react' ),
  * Internal Dependencies
  */
 const Gridicon = require( 'components/gridicon' ),
+	Button = require( 'components/button' ),
 	Count = require( 'components/count' );
 
 const SidebarMenu = React.createClass( {
 
 	propTypes: {
 		title: React.PropTypes.oneOfType( [ React.PropTypes.string, React.PropTypes.element ] ).isRequired,
-		count: React.PropTypes.integer
+		count: React.PropTypes.number,
+		addPlaceholder: React.PropTypes.string,
+		onAddSubmit: React.PropTypes.func
 	},
 
 	getInitialState: function() {
 		return {
-			expanded: this.props.expanded
+			expanded: this.props.expanded,
+			isAdding: false
 		};
 	},
 
@@ -44,9 +48,9 @@ const SidebarMenu = React.createClass( {
 
 	renderContent: function() {
 		return (
-			<div className="sidebar-menu__list">
+			<ul className="sidebar-menu__list">
 				{ this.props.children }
-			</div>
+			</ul>
 		);
 	},
 
@@ -55,13 +59,43 @@ const SidebarMenu = React.createClass( {
 		return (
 			<div className={ headerClasses } onClick={ this.onClick }>
 				<h2 className="sidebar-heading">
-						<Gridicon icon="chevron-down" />
-						<span>{ this.props.title }</span>
-						{ this.props.count
-							? <Count count={ this.props.count } />
-							: null
-						}
+					<Gridicon icon="chevron-down" />
+					<span>{ this.props.title }</span>
+					<Count count={ this.props.count } />
 				</h2>
+
+				<div></div>
+			</div>
+		);
+	},
+
+	toggleAdd: function() {
+		this.setState( { isAdding: ! this.state.isAdding } );
+	},
+
+	handleAddKeyDown: function() {
+		var inputValue = React.findDOMNode( this.refs.menuAddInput ).value;
+		if ( event.keyCode === 13 ) {
+			event.preventDefault();
+			this.props.onAddSubmit( inputValue );
+		}
+	},
+
+	renderAdd: function() {
+		return(
+			<div className="sidebar-menu__add-item">
+				<Button compact className="sidebar-menu__add-button" onClick={ this.toggleAdd }>Add</Button>
+
+				<div className="sidebar-menu__add">
+					<input
+						className="sidebar-menu__add-input"
+						type="text"
+						placeholder={ this.props.addPlaceholder }
+						ref="menuAddInput"
+						onKeyDown={ this.handleAddKeyDown }
+					/>
+					<Gridicon icon="cross-small" onClick={ this.toggleAdd } />
+				</div>
 			</div>
 		);
 	},
@@ -71,6 +105,7 @@ const SidebarMenu = React.createClass( {
 			'sidebar-menu',
 			this.props.className,
 			{
+				'is-add-open': this.state.isAdding,
 				'is-toggle-open': !! this.state.expanded,
 				'is-togglable': true,
 				'is-dynamic': true
@@ -80,6 +115,7 @@ const SidebarMenu = React.createClass( {
 		return (
 			<li className={ classes }>
 				{ this.renderHeader() }
+				{ this.renderAdd() }
 				{ this.renderContent() }
 			</li>
 		);