From d5b8c60317fe3ca40834f3f5300af18a43a1ba4e Mon Sep 17 00:00:00 2001
From: Scott Tolksdorf <scott.tolksdorf@gmail.com>
Date: Mon, 9 May 2016 14:00:12 -0400
Subject: [PATCH] Added in an editable title navitem

---
 client/homebrew/navbar/editTitle.navitem.jsx | 33 ++++++++++++++++
 client/homebrew/navbar/navbar.less           | 41 +++++++++++++++-----
 client/homebrew/pages/newPage/newPage.jsx    | 12 ++++--
 3 files changed, 74 insertions(+), 12 deletions(-)
 create mode 100644 client/homebrew/navbar/editTitle.navitem.jsx

diff --git a/client/homebrew/navbar/editTitle.navitem.jsx b/client/homebrew/navbar/editTitle.navitem.jsx
new file mode 100644
index 000000000..45e00a130
--- /dev/null
+++ b/client/homebrew/navbar/editTitle.navitem.jsx
@@ -0,0 +1,33 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_TITLE_LENGTH = 50;
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			title : '',
+			onChange : function(){}
+		};
+	},
+
+	handleChange : function(e){
+		if(e.target.value.length > MAX_TITLE_LENGTH) return;
+		this.props.onChange(e.target.value);
+	},
+	render : function(){
+		return <Nav.item className='editTitle'>
+			<input type='text' value={this.props.title} onChange={this.handleChange} />
+
+			<div className={cx('charCount', {'max' : this.props.title.length >= MAX_TITLE_LENGTH})}>
+				{this.props.title.length}/{MAX_TITLE_LENGTH}
+			</div>
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;
\ No newline at end of file
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 06b55bd98..3c4410161 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -1,19 +1,42 @@
-.homebrew nav{
 
+.homebrew nav{
 	.homebrewLogo{
 		.animate(color);
-		font-family     : CodeBold;
-		font-size: 12px;
-
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
 		div{
-			margin-top: 2px;
-			margin-bottom: -2px;
+			margin-top    : 2px;
+			margin-bottom : -2px;
 		}
-
-		color : white;
 		&:hover{
 			color : @blue;
 		}
 	}
-
+	.editTitle.navItem{
+		padding : 2px 12px;
+		input{
+			margin           : 0;
+			padding          : 2px;
+			width : 250px;
+			background-color : #333;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			border           : 1px solid @blue;
+			outline          : none;
+		}
+		.charCount{
+			display        : inline-block;
+			vertical-align : bottom;
+			margin-left    : 8px;
+			text-align     : right;
+			color : #666;
+			&.max{
+				color : @red;
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index d9dc82426..8aaa014be 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -5,6 +5,7 @@ var request = require("superagent");
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
+var EditTitle = require('../../navbar/editTitle.navitem.jsx');
 
 
 var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
@@ -31,9 +32,8 @@ var NewPage = React.createClass({
 				text : storage
 			})
 		}
-
 		window.onbeforeunload = function(e){
-			return "Your homebrew isn't saved. Are you sure you want to leave?";
+			//return "Your homebrew isn't saved. Are you sure you want to leave?";
 		};
 	},
 
@@ -46,6 +46,12 @@ var NewPage = React.createClass({
 		this.refs.editor.update();
 	},
 
+	handleTitleChange : function(title){
+		this.setState({
+			title : title
+		});
+	},
+
 	handleTextChange : function(text){
 		this.setState({
 			text : text
@@ -93,7 +99,7 @@ var NewPage = React.createClass({
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
-				<Nav.item>{this.state.title}</Nav.item>
+				<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
 			</Nav.section>
 
 			<Nav.section>